Deploying Serverless GraphQL APIs with TypeScript on Netlify

Last updated Invalid date
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 👨‍🎤.



Stay in touch!



About the author

Khalil Stemmler,
Software Essentialist ⚡

I'm Khalil. I turn code-first developers into confident crafters without having to buy, read & digest hundreds of complex programming books. Using Software Essentialism, my philosophy of software design, I coach developers through boredom, impostor syndrome, and a lack of direction to master software design and architecture. Mastery though, is not the end goal. It is merely a step towards your Inward Pull.



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 Schemas vs. RESTful DTOs
GraphQL schemas serve a similar purpose to RESTful DTOs. One of the main differences is tooling. In this post, I aim to strengthen...
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 ...