├── .nowignore ├── src ├── images │ └── gatsby-icon.png ├── styles │ └── index.css └── pages │ └── index.js ├── gatsby-node.js ├── gatsby-browser.js ├── api └── date.ts ├── gatsby-ssr.js ├── gatsby-config.js ├── package.json ├── README.md ├── .gitignore └── tsconfig.json /.nowignore: -------------------------------------------------------------------------------- 1 | yarn.lock 2 | README.md -------------------------------------------------------------------------------- /src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/em/gatsby/master/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Node APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/node-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /api/date.ts: -------------------------------------------------------------------------------- 1 | import { NowRequest, NowResponse } from '@now/node'; 2 | 3 | export default (_req: NowRequest, res: NowResponse) => { 4 | const date = new Date().toString(); 5 | res.status(200).send(date); 6 | }; 7 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: 'Gatsby + Node.js (TypeScript) API', 4 | }, 5 | plugins: [ 6 | `gatsby-plugin-react-helmet`, 7 | { 8 | resolve: `gatsby-plugin-manifest`, 9 | options: { 10 | name: 'Gatsby + Node.js (TypeScript) API', 11 | short_name: 'Gatsby + Node.js (TypeScript)', 12 | start_url: '/', 13 | icon: 'src/images/gatsby-icon.png', 14 | }, 15 | }, 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "gatsby", 4 | "version": "1.0.0", 5 | "dependencies": { 6 | "gatsby": "^2.18.14", 7 | "gatsby-image": "^2.0.15", 8 | "gatsby-plugin-manifest": "^2.0.5", 9 | "gatsby-plugin-react-helmet": "^3.0.0", 10 | "react": "^16.5.1", 11 | "react-dom": "^16.5.1", 12 | "react-helmet": "^5.2.0" 13 | }, 14 | "devDependencies": { 15 | "@now/node": "^1.3.0" 16 | }, 17 | "scripts": { 18 | "dev": "gatsby develop", 19 | "build": "gatsby build" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/styles/index.css: -------------------------------------------------------------------------------- 1 | main { 2 | align-content: center; 3 | box-sizing: border-box; 4 | display: grid; 5 | font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 6 | 'Arial', sans-serif; 7 | hyphens: auto; 8 | line-height: 1.65; 9 | margin: 0 auto; 10 | max-width: 680px; 11 | min-height: 100vh; 12 | padding: 72px 0; 13 | text-align: center; 14 | } 15 | h1 { 16 | font-size: 45px; 17 | } 18 | h2 { 19 | margin-top: 1.5em; 20 | } 21 | p { 22 | font-size: 16px; 23 | } 24 | a { 25 | border-bottom: 1px solid white; 26 | color: #0076ff; 27 | cursor: pointer; 28 | text-decoration: none; 29 | transition: all 0.2s ease; 30 | } 31 | a:hover { 32 | border-bottom: 1px solid #0076ff; 33 | } 34 | code, 35 | pre { 36 | color: #d400ff; 37 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 38 | Bitstream Vera Sans Mono, Courier New, monospace, serif; 39 | font-size: 0.92em; 40 | } 41 | code:before, 42 | code:after { 43 | content: '\`'; 44 | } 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Gatsby Logo](https://github.com/vercel/vercel/blob/master/packages/frameworks/logos/gatsby.svg) 2 | 3 | # Gatsby Example 4 | 5 | This directory is a brief example of a [Gatsby](https://www.gatsbyjs.org/) app with [Serverless Functions](https://vercel.com/docs/v2/serverless-functions/introduction) that can be deployed with Vercel and zero configuration. 6 | 7 | ## Deploy Your Own 8 | 9 | Deploy your own Gatsby project, along with Serverless Functions, with Vercel. 10 | 11 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/vercel/tree/master/examples/gatsby) 12 | 13 | _Live Example: https://gatsby.now-examples.now.sh_ 14 | 15 | ### How We Created This Example 16 | 17 | To get started with Gatsby on Vercel, you can use the [Gatsby CLI](https://www.gatsbyjs.org/docs/gatsby-cli/) to initialize the project: 18 | 19 | ```shell 20 | $ gatsby new gatsby-site 21 | ``` 22 | 23 | ### Deploying From Your Terminal 24 | 25 | You can deploy your new Gatsby project, along with [Serverless Functions](https://vercel.com/docs/v2/serverless-functions/introduction), with a single command from your terminal using [Vercel CLI](https://vercel.com/download): 26 | 27 | ```shell 28 | $ vercel 29 | ``` 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | .env.build 57 | 58 | # gatsby files 59 | .cache/ 60 | public 61 | 62 | # Mac files 63 | .DS_Store 64 | 65 | # Yarn 66 | yarn-error.log 67 | .pnp/ 68 | .pnp.js 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | import '../styles/index.css'; 4 | 5 | function Index() { 6 | const [date, setDate] = useState(null); 7 | useEffect(() => { 8 | async function getDate() { 9 | const res = await fetch('/api/date'); 10 | const newDate = await res.text(); 11 | setDate(newDate); 12 | } 13 | getDate(); 14 | }, []); 15 | return ( 16 |
17 | 18 | Gatsby + Node.js (TypeScript) API 19 | 20 |

Gatsby + Node.js (TypeScript) API

21 |

22 | Deployed with{' '} 23 | 28 | Vercel 29 | 30 | ! 31 |

32 |

33 | 38 | This project 39 | {' '} 40 | is a Gatsby app with two 41 | directories, /src for static content and /api{' '} 42 | which contains a serverless{' '} 43 | Node.js (TypeScript) function. See{' '} 44 | 45 | api/date for the Date API with Node.js (TypeScript) 46 | 47 | . 48 |

49 |
50 |

The date according to Node.js (TypeScript) is:

51 |

{date ? date : 'Loading date...'}

52 |
53 | ); 54 | } 55 | 56 | export default Index; 57 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */, 5 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, 6 | "lib": [ 7 | "es2015" 8 | ] /* Specify library files to be included in the compilation. */, 9 | // "allowJs": true, /* Allow javascript files to be compiled. */ 10 | // "checkJs": true, /* Report errors in .js files. */ 11 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 12 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 13 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 14 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 15 | // "outFile": "./", /* Concatenate and emit output to single file. */ 16 | // "outDir": "./", /* Redirect output structure to the directory. */ 17 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 18 | // "composite": true, /* Enable project compilation */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true /* Enable all strict type-checking options. */, 27 | "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */, 28 | "strictNullChecks": true /* Enable strict null checks. */, 29 | "strictFunctionTypes": true /* Enable strict checking of function types. */, 30 | "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */, 31 | "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */, 32 | "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */, 33 | "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */, 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | 52 | /* Source Map Options */ 53 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 54 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 55 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 56 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 57 | 58 | /* Experimental Options */ 59 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 60 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 61 | } 62 | } 63 | --------------------------------------------------------------------------------