Deploy React to Surge and Express to Heroku Checklist

deploy_react_express_heroku_surge\checklist.md

Deploy Full-Stack React/Express App to Heroku and Surge

Express/Heroku

CORS Server-Side

1. Set NODE_ENV to production on Heroku with heroku config:set NODE_ENV=production
2. This sets the NODE_ENV environment variable on Heroku
3. Install the cors package on your express server
4. This is the setup if you're accepting credentials:

// ----------------------------------------
// CORS
// ----------------------------------------
const cors = require('cors');
app.use(cors({
  origin: process.env.NODE_ENV === 'production' ? 'https://frantic-government.surge.sh' : 'http://localhost:3000',
  credentials: true
}));

1. If not, I believe you can just do:

const cors = require('cors');
app.use(cors();

Or

const cors = require('cors');
app.use(cors({ origin: '*' });

Installation

1. Assuming that your express app is in ./server/ directory
2. You first run npm init in the project root
3. This generates the package.json in the project root
4. Heroku then recognizes the project as a Node.js project
5. In the root package.json scripts
6. Create a start script with a value of node server/app.js
7. Create a postinstall script with a value of cd server && npm install --save
8. This installs the dependencies and runs the express app
9. Must have Heroku Toolbelt
10. Run heroku create
11. Run git add -A, git commit, git push -u origin master, git push -u heroku master

React/Surge

CORS Client-Side

1. Are we in production? Use helper file to determine domain for fetch calls

const isProduction = () => {
  return !window.location.href.match('localhost');
};

const domain = isProduction() ?
  'https://peaceful-mesa-81349.herokuapp.com' :
  'http://localhost:3001';

1. You want to set mode to cors for fetch calls.

fetch(`${ domain }/api/v1/session`, {
  method: 'DELETE',
  mode: 'cors'
});

1. If you need to include cookies, set credentials to include

fetch(`${ domain }/api/v1/session`, {
  method: 'DELETE',
  credentials: 'include',
  mode: 'cors'
});

Installation

1. Install surge with NPM npm install --global surge
2. The first time you deploy to surge it will create a domain for you
3. After that you must specify it with the --domain option or use a CNAME file.
   • Custom domain: http://surge.sh/help/adding-a-custom-domain
   • CNAME file: http://surge.sh/help/remembering-a-domain
4. In your client/ folder, run npm run build
5. Always commit changes before deploying, git add -A, git commit, git push -u origin master
6. Assuming you're in the client/ directory run surge --domain yourdomain.surge.sh build
   • Or you can set the domain in a client/public/CNAME file
7. This deploys to surge
8. Just remember to always run npm run build before deploying