Deploying Serverless GraphQL APIs with TypeScript on Netlify

It's quite trivial to get a Serverless GraphQL API up and running in 2020.

Deploying a Serverless GraphQL API with TypeScript is essentially the same as deploying one with JavaScript.

The only difference is in the build steps.

For example, using vanilla JavaScript on Netlify, the build step in our package.json is usually to copy all of the vanilla JavaScript code in our src folder over to the functions folder.

package.json
{
  "scripts": {
    "start": "nodemon",
    "bundle": "cpx src/**/* functions/bundle"  }
}

While building with TypeScript is effectively the same, just through different means. In a TypeScript environment, we configure a tsconfig.json and run tsc as the build step.

package.json
{
  "compilerOptions": {
    "allowJs": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "pretty": true,
    "sourceMap": true,
    "target": "es2017",
    "outDir": "./functions/bundle",    "lib": ["es6"],
    "resolveJsonModule": true,
    "types": ["node"],
    "typeRoots" : ["./node_modules/@types", "./src/@types"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true
  },
  "include": [
    "src/*.ts",
    "src/**/*.ts",
    "src/**/*.js"
  ],
  "exclude": [
    "node_modules",
    "src/**/*.spec.ts",
    "src/**/*.spec.js"
  ]
}
package.json
{
  "scripts": {
    "start": "nodemon",
    "bundle": "tsc"  }
}

Either way, the result is the same since Netlify needs all of the source code used in the functions direction to be bundled before it's deployed.

Resources

Check out these starters for deploying your own Serverless GraphQL APIs on Netlify with TypeScript or vanilla JavaScript.

Starters

Tutorial

If you're interested in how the starters were built, read "How to Deploy a Serverless GraphQL API on Netlify [Starters]".



Discussion

Liked this? Sing it loud and proud 👨‍🎤.


0 Comments

Be the first to leave a comment

Submit

Stay in touch!



About the author

Khalil Stemmler,
Developer Advocate @ Apollo GraphQL ⚡

Khalil is a software developer, writer, and musician. He frequently publishes articles about Domain-Driven Design, software design and Advanced TypeScript & Node.js best practices for large-scale applications.



View more in GraphQL



You may also enjoy...

A few more related articles

How to Deploy a Serverless GraphQL API on Netlify [Starters]
Exploring two starter projects you can use to deploy a serverless GraphQL API on Netlify with or without TypeScript.
GraphQL's Greatest Architectural Advantages
There's a lot of advantages to using GraphQL instead of REST on your server, and there's a lot of advantages to using Apollo Clien...
I'm Learning Everything GraphQL in 2020
GraphQL is the latest API style on the block. It's a modern way for us to pull data out of your system (queries) and make changes ...
Make Illegal States Unrepresentable! - Domain-Driven Design w/ TypeScript
By using TypeScript's static type system, not only can we enforce (typically challenging things like) business rules and error sta...

Want to be notified when new content comes out?

Join 5000+ other developers learning about Domain-Driven Design and Enterprise Node.js.

I won't spam ya. 🖖 Unsubscribe anytime.

Get updates