lesson.md

Lesson Material

Backend Deployment

I know we went through how to deploy with now.sh and this works most of the time. In saying that, I've lost a bit of faith in Now over the past few cohorts seeing some weird bugs.

Now used to be great for Express deployments but it has changed a lot over the past year.

You can see what kinds of deployments Now is great for by running:

now init

My recommendation would be if you're interesting in learning about serverless functions working with a React app Now is the best place to start (before looking at some of AWS's offerings).

So instead of being a little unsure with the deployment process we'll be using good old trusty Heroku to deploy our backend instead.

The deployment process needs to be as follows:

1. Run normal git commands (init, add, commit, merge, push etc)
2. heroku create to get deployment remotes
3. Make sure npm start is node index.js or whatever your API entry point file is
4. git push heroku master to deploy
5. Make sure you've set up all the correct ENV variables in the Heroku web app
6. To make the Heroku dynos always running (no lag) you need to pay $7 a month

Frontend Deployment

So there's heaps of options to deploy our frontend including Now but my recommendation is to use Netlify.

Netlify proclaims this which isn't really true... but the steps are more or less correct:

1. create-react-app build your app and follow normal git processes
2. Install the Netlify CLI, use netlify login once you've installed the CLI
3. Add this line of code to your package.json scripts deploy": "npm run build && netlify deploy --prod --dir=build", I'll explain what all of this means
4. Add your ENV variables in two files, locally use .env.development and for production just use .env, these variable must be named REACT_APP_<SOMETHING> otherwise they won't work
5. React router needs some extra config to work nicely with Netlify, we need to create a file named netlify.toml and then add this:

[[redirects]]
  from = "/*"    
  to= "/index.html"
  status = 200

6. Netlify is amazing as it comes with a fully fledged DNS, you can buy domains, you automatically have HTTPS etc

Linting and Using Prettier

Linting means making your code use the right style convention like semi colons or not having any console.logs. This is a really important step to include just before deployment.

create-react-app comes bundled with the most popular linter eslint but our Express apps have none of this setup. Let's do a quick eslint config right now.

Here are the steps:

1. npm install -D eslint
2. Add the .eslintrc config file to your Express projects

{
  "parserOptions": {
    "ecmaVersion": "2018"
  },
  "extends": [
    "eslint:recommended"
  ],
  "rules": {
  },
  "env": {
    "node": true,
    "es6": true,
    "jest": true
  }
}

3. Add this lint script to your package.json, "lint": "eslint . --ext .js; exit 0",

You've also probably heard of a tool called Prettier. This is used to format your code (remove unused parenthesis, indentation etc). Prettier is also a great tool to use before deploying. To configure it:

1. npm install -D prettier
2. Add the .prettierrc.json config file to your Express projects

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

3. Add this format script to your package.json, "format": "prettier --write "**/*.+(js)""