remove netlify-lambda for Netlify Dev (#274)

* Removing netlify-lambda, added Netlify Dev support ✨(thanks @sw-yx !)
* [Documentation] Netlify Dev changes on Contributing and Readme:

Removed all netlify-lambda related npm commands and added new ones.
Added some clarifications to the steps in the setup process, added MacOS section for `node-gyp`

* Prettier autoformat changes

CONTRIBUTING.md

@@ -11,7 +11,7 @@ please read the [code of conduct](CODE_OF_CONDUCT.md).
 
 > Only required on the first run, subsequent runs can use `yarn` to both
 bootstrap and run the development server using `yarn develop`.
-Since this starter using the [netlify-lambda](https://github.com/netlify/netlify-lambda), there could be further issues you, please check the [Readme](https://github.com/netlify/netlify-lambda) for further information and set up questions. 
+Since this starter using the [netlify-dev](https://www.netlify.com/products/dev/#how-it-works), there could be further issues you, please check the [netlify-dev](https://github.com/netlify/netlify-dev) repository for further information and set up questions. 
 
 ```sh
 $ git clone https://github.com/netlify-templates/gatsby-starter-netlify-cms
@@ -20,19 +20,10 @@ $ yarn
 
 ## Available scripts
 
-### `start`
-
-Starts the development server. This task runs both the `start:app` and `start:lambda` scripts.
-
-#### Usage
-
-```sh
-$ yarn start
-```
 
 ### `build`
 
-Build the static files into the `public` folder, turns lambda functions into a deployable form. This task runs both the `build:app` and `build:lambda` scripts.
+Build the static files into the `public` folder, turns lambda functions into a deployable form. 
 
 #### Usage
 
@@ -42,34 +33,32 @@ $ yarn build
 
 ### `clean`
 
-Removes all the files from `public`, `.cache` directories using the `rimraf` command.
+Runs `gatsby clean` command.
 
 #### Usage
 
 ```sh
 yarn clean
 ```
 
-### `develop`
-
-Runs the `clean` script and starts the gatsby develop server using the command `gatsby develop`. Since this is not starting the lambda server it can be used when you only changing the site and not the lambda functions.
+### `netlify dev`
 
-#### Usage
+Starts the netlify dev environment, including the gatsby dev environment.
+For more infor check the [Netlify Dev Docs](https://github.com/netlify/cli/blob/master/docs/netlify-dev.md)
 
 ```sh
-yarn develop
+netlify dev
 ```
 
-### `serve`
+### `develop` or `start`
 
-This command is shorthand for `gatsby serve` 
+Runs the `clean` script and starts the gatsby develop server using the command `gatsby develop`. We recomend using this command when you don't need Netlify specific features
 
 #### Usage
 
 ```sh
-yarn serve
+yarn develop
 ```
-
 ### `test`
 
 Not implmented yet
@@ -90,46 +79,6 @@ Formats code and docs according to our style guidelines using `prettier`
 yarn format
 ```
 
-### `start:app`
-
-Runs the `develop` command, this mapping is needed so we can start both gatsby and lambda with one command (`yarn start`).
-
-#### Usage
-
-```sh
-yarn start:app
-```
-
-### `start:lambda`
-
-Runs the `netlify-lambda` command, starts the lambda server in develop mode.
-
-#### Usage
-
-```sh
-yarn start:lambda
-```
-
-### `build:app`
-
-Builds the gatsby app
-
-#### Usage
-
-```sh
-yarn build:app
-```
-
-### `build:lambda`
-
-Runs the `netlify-lambda build` command, compiles the functions.
-
-#### Usage
-
-```sh
-yarn build:lambda
-```
-
 
 ## Pull Requests
 

README.md

@@ -8,7 +8,7 @@ This repo contains an example business website that is built with [Gatsby](https
 
 It follows the [JAMstack architecture](https://jamstack.org) by using Git as a single source of truth, and [Netlify](https://www.netlify.com) for continuous deployment, and CDN distribution.
 
-## Features ##
+## Features
 
 - A simple landing page with blog functionality built with Netlify CMS
 - Editabe Pages: Landing, About, Product, Blog-Collection and Contact page with Netlify Form support
@@ -17,17 +17,18 @@ It follows the [JAMstack architecture](https://jamstack.org) by using Git as a s
 - Basic directory organization
 - Uses Bulma for styling, but size is reduced by `purge-css-plugin`
 - Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
-- Uses `gatbsy-image` with Netlify-CMS preview support
+- Uses `gatsby-image` with Netlify-CMS preview support
 - Separate components for everything
 - Netlify deploy configuration
-- Netlify function support, see `src/lambda` folder
+- Netlify function support, see `lambda` folder
 - Perfect score on Lighthouse for SEO, Accessibility and Performance (wip:PWA)
 - ..and more
 
 ## Prerequisites
 
 - Node (I recommend using v8.2.0 or higher)
 - [Gatsby CLI](https://www.gatsbyjs.org/docs/)
+- [Netlify CLI](https://github.com/netlify/cli)
 
 ## Getting Started (Recommended)
 
@@ -38,21 +39,28 @@ Netlify CMS can run in any frontend web environment, but the quickest way to try
 After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete. Next, you’ll need to set up Netlify’s Identity service to authorize users to log in to the CMS.
 
 ### Access Locally
+
+Pulldown a local copy of the Github repository Netlify created for you, with the name you specified in the previous step
 ```
 $ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
 $ cd [REPO_NAME]
 $ yarn
-$ npm run start
+$ netlify dev # or ntl dev
 ```
+
+This uses the new [Netlify Dev](https://www.netlify.com/products/dev/?utm_source=blog&utm_medium=netlifycms&utm_campaign=devex) CLI feature to serve any functions you have in the `lambda` folder.
+
 To test the CMS locally, you'll need run a production build of the site:
+
 ```
 $ npm run build
-$ npm run serve
+$ netlify dev # or ntl dev
 ```
 
 ### Media Libraries (installed, but optional)
 
 Media Libraries have been included in this starter as a default. If you are not planning to use `Uploadcare` or `Cloudinary` in your project, you **can** remove them from module import and registration in `src/cms/cms.js`. Here is an example of the lines to comment or remove them your project.
+
 ```javascript
 import CMS from 'netlify-cms-app'
 // import uploadcare from 'netlify-cms-media-library-uploadcare'
@@ -70,10 +78,10 @@ CMS.registerPreviewTemplate('index', IndexPagePreview)
 CMS.registerPreviewTemplate('about', AboutPagePreview)
 CMS.registerPreviewTemplate('products', ProductPagePreview)
 CMS.registerPreviewTemplate('blog', BlogPostPreview)
-
 ```
 
 ## Getting Started (Without Netlify)
+
 ```
 $ gatsby new [SITE_DIRECTORY_NAME] https://github.com/netlify-templates/gatsby-starter-netlify-cms/
 $ cd [SITE_DIRECTORY_NAME]
@@ -82,19 +90,25 @@ $ npm run serve
 ```
 
 ### Setting up the CMS
+
 Follow the [Netlify CMS Quick Start Guide](https://www.netlifycms.org/docs/quick-start/#authentication) to set up authentication, and hosting.
 
 ## Debugging
-Windows users might encounter ```node-gyp``` errors when trying to npm install.
+
+Windows users might encounter `node-gyp` errors when trying to npm install.
 To resolve, make sure that you have both Python 2.7 and the Visual C++ build environment installed.
+
 ```
 npm config set python python2.7
 npm install --global --production windows-build-tools
 ```
 
 [Full details here](https://www.npmjs.com/package/node-gyp 'NPM node-gyp page')
 
+MacOS users might also encounter some errors, for more info check [node-gyp](https://github.com/nodejs/node-gyp). We recommend using the latest stable node version.
+
 ## Purgecss
+
 This plugin uses [gatsby-plugin-purgecss](https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/) and [bulma](https://bulma.io/). The bulma builds are usually ~170K but reduced 90% by purgecss.
 
 # CONTRIBUTING

gatsby-config.js

@@ -1,5 +1,3 @@
-var proxy = require('http-proxy-middleware')
-
 module.exports = {
   siteMetadata: {
     title: 'Gatsby + Netlify CMS Starter',
@@ -76,17 +74,4 @@ module.exports = {
     }, // must be after other CSS plugins
     'gatsby-plugin-netlify', // make sure to keep it last in the array
   ],
-  // for avoiding CORS while developing Netlify Functions locally
-  // read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
-  developMiddleware: app => {
-    app.use(
-      '/.netlify/functions/',
-      proxy({
-        target: 'http://localhost:9000',
-        pathRewrite: {
-          '/.netlify/functions/': '',
-        },
-      })
-    )
-  },
 }

lambda/hello.js

@@ -1 +1,17 @@
-!function(e,r){for(var t in r)e[t]=r[t]}(exports,function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=0)}([function(e,r,t){"use strict";function n(e,r,t){console.log("queryStringParameters",e.queryStringParameters),t(null,{statusCode:200,body:JSON.stringify({msg:"Hello, World! "+Math.round(10*Math.random())})})}t.r(r),t.d(r,"handler",function(){return n})}]));
+// For more info, check https://www.netlify.com/docs/functions/#javascript-lambda-functions
+module.exports.handler = async function(event, context) {
+  console.log("queryStringParameters", event.queryStringParameters)
+  return {
+    // return null to show no errors
+    statusCode: 200, // http status code
+    body: JSON.stringify({
+      msg: "Hello, World! This is better " + Math.round(Math.random() * 10)
+    })
+  }
+}
+
+// Now you are ready to access this API from anywhere in your Gatsby app! For example, in any event handler or lifecycle method, insert:
+// fetch("/.netlify/functions/hello")
+//    .then(response => response.json())
+//    .then(console.log)
+// For more info see: https://www.gatsbyjs.org/blog/2018-12-17-turning-the-static-dynamic/#static-dynamic-is-a-spectrum

package.json

@@ -39,21 +39,13 @@
   "main": "n/a",
   "scripts": {
     "clean": "gatsby clean",
-    "start:app": "npm run develop",
-    "start:lambda": "netlify-lambda serve src/lambda",
-    "start": "run-p start:**",
-    "build:app": "npm run clean && gatsby build",
-    "build:lambda": "netlify-lambda build src/lambda",
-    "build": "run-p build:**",
+    "start": "npm run develop",
+    "build": "npm run clean && gatsby build",
     "develop": "npm run clean && gatsby develop",
-    "serve": "gatsby serve",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "http-proxy-middleware": "^0.20.0",
-    "netlify-lambda": "^1.4.3",
-    "npm-run-all": "^4.1.5",
     "prettier": "^1.15.3"
   }
 }

src/cms/cms.js

@@ -7,8 +7,8 @@ import BlogPostPreview from './preview-templates/BlogPostPreview'
 import ProductPagePreview from './preview-templates/ProductPagePreview'
 import IndexPagePreview from './preview-templates/IndexPagePreview'
 
-CMS.registerMediaLibrary(uploadcare);
-CMS.registerMediaLibrary(cloudinary);
+CMS.registerMediaLibrary(uploadcare)
+CMS.registerMediaLibrary(cloudinary)
 
 CMS.registerPreviewTemplate('index', IndexPagePreview)
 CMS.registerPreviewTemplate('about', AboutPagePreview)

src/components/BlogRoll.js

@@ -24,9 +24,7 @@ class BlogRoll extends React.Component {
                       <PreviewCompatibleImage
                         imageInfo={{
                           image: post.frontmatter.featuredimage,
-                          alt: `featured image thumbnail for post ${
-                            post.title
-                          }`,
+                          alt: `featured image thumbnail for post ${post.title}`,
                         }}
                       />
                     </div>

src/components/Layout.js

@@ -4,7 +4,7 @@ import Footer from '../components/Footer'
 import Navbar from '../components/Navbar'
 import './all.sass'
 import useSiteMetadata from './SiteMetadata'
-import { withPrefix } from "gatsby"
+import { withPrefix } from 'gatsby'
 
 const TemplateWrapper = ({ children }) => {
   const { title, description } = useSiteMetadata()
@@ -18,32 +18,35 @@ const TemplateWrapper = ({ children }) => {
         <link
           rel="apple-touch-icon"
           sizes="180x180"
-          href={`${withPrefix("/")}img/apple-touch-icon.png`}
+          href={`${withPrefix('/')}img/apple-touch-icon.png`}
         />
         <link
           rel="icon"
           type="image/png"
-          href={`${withPrefix("/")}img/favicon-32x32.png`}
+          href={`${withPrefix('/')}img/favicon-32x32.png`}
           sizes="32x32"
         />
         <link
           rel="icon"
           type="image/png"
-          href={`${withPrefix("/")}img/favicon-16x16.png`}
+          href={`${withPrefix('/')}img/favicon-16x16.png`}
           sizes="16x16"
         />
 
         <link
           rel="mask-icon"
-          href={`${withPrefix("/")}img/safari-pinned-tab.svg`}
+          href={`${withPrefix('/')}img/safari-pinned-tab.svg`}
           color="#ff4400"
         />
         <meta name="theme-color" content="#fff" />
 
         <meta property="og:type" content="business.business" />
         <meta property="og:title" content={title} />
         <meta property="og:url" content="/" />
-        <meta property="og:image" content={`${withPrefix("/")}img/og-image.jpg`} />
+        <meta
+          property="og:image"
+          content={`${withPrefix('/')}img/og-image.jpg`}
+        />
       </Helmet>
       <Navbar />
       <div>{children}</div>