Deployment

Deployment

Netlify

Our site is currently hosted here. At a high-level, here's how the deployment process works:

1. I create a branch based on develop in my local environment. I write some code, and then I make a pull request to develop.
2. Netlify will automatically start to build the code on that pull request. If it doesn't break the build, the checks pass and you can merge the code.
3. You merge the code, and Netlify makes the site live. You can see all of this happening in real-time here.

Nitty-gritty of building:

netlify.toml

This file is the configuration for Netlify deployment. There isn't much in here, because a lot of stuff is configured in the web UI for Netlfiy. Anything in here will override the settings in the web UI, though, so be careful. This is how we define what happens when Netlify tries to deploy something. Since we're using Create React App, you can see below we tell Netlify to run yarn build to create a production build. Then we say you can find the files to serve in the build folder, and our lambda functions in built-lambda.

// NOTE: Check the repo to make sure this isn't out of date!
[build]
  command = "yarn build" # the command you run to build this file
  functions = "built-lambda" # netlify-lambda builds to this folder AND Netlify reads functions from here
  publish = "build" # create-react-app builds to this folder, Netlify should serve all these files statically

[dev]
  command = "yarn start"
  port = 3000
  targetPort = 3000

Details on our yarn build

I have slightly modified our build script in package.json to also build lambda functions. Normally, lambda functions would be somewhere else, but Netlify is nice and lets us create a couple for free, then takes care of hosting them for us.

   ...other stuff...
  "scripts": {
    ...
    "build": "react-scripts build && netlify-lambda build src/lambda",
    ...
  }

When we build, we have to make sure we specify to also build the lambda functions. Otherwise, they won't work in production, because they won't exist.

Building Typescript

Typescript must be compiled from Typescrit to normal Javascript. Create React App handles this for us (most of the time). The exception is with lambda functions. To get Netlify to compile them properly, we need to add something to our .babelrc file. Babel is a tool that makes Javascript compatible everywhere.

To make sure everything is compiled right, our .babelrc needs to look like this:

// NOTE: Check the repo to make sure this isn't out of date!
{
    "presets": [
      "@babel/preset-typescript",
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "6.10.3"
          }
        }
      ]
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-object-assign",
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }

For more information on using netlify lambda and TypeScript, look at this nice guide.