diff --git a/README.md b/README.md index 23af2a9..f9c6893 100644 --- a/README.md +++ b/README.md @@ -35,3 +35,37 @@ To use this boilerplate, you'll need to take the following steps: If you want to run the server and/or webpack separately, you can also `npm run start-server` and `npm run build-client`. From there, just follow your bliss. + +## Deployment + +Ready to go world wide? Here's a guide to deployment! + +### Prep +1. Set up the [Heroku command line tools](https://devcenter.heroku.com/articles/heroku-cli) and install [Yarn](https://yarnpkg.com/en/) if you haven't already (`npm install -g yarn`) +2. `heroku login` +3. Add a git remote for heroku: + - **If you're creating a new app...** + 1. `heroku create` or `heroku create your-app-name` if you have a name in mind. + 2. `heroku addons:create heroku-postgresql:hobby-dev` to add ("provision") a postgres database to your heroku dyno + + - **If you already have a Heroku app...** + 1. `heroku git:remote your-app-name` You'll need to be a collaborator on the app. + +### When you're ready to deploy + +1. Make sure that all your work is fully committed and pushed to your master branch on Github. +2. Checkout a new branch called "deploy": `git checkout -b deploy`. If you currently have an existing branch called "deploy", delete it now (`git branch -d deploy`). Note that the name "deploy" here isn't magical, but it needs to match the name of the branch we specify in step 3d. +3. `npm run deploy` - this will cause the following commands to happen in order: + a. `webpack -p`: webpack will run in "production mode" + b. `git add -f public/bundle.js public/bundle.js/map`: "force" add the otherwise gitignored build files + c. `git commit --allow-empy -m 'Deploying'`: create a commit, even if nothing changed + d. `git push heroku deploy:master`: push your local "deploy" branch to the "master" branch on heroku + +Now, you should be deployed! To clean up, remove your deploy branch: + +4. `git checkout master`: return to your master branch +5. `git branch -d deploy`: remove the deploy branch + +Why do all of these steps? The big reason is because we don't want our production server to be cluttered up with dev dependencies like webpack, but at the same time we don't want our development git-tracking to be cluttered with production build files like bundle.js! By doing these steps, we make sure our development and production environments both stay nice and clean! + +(By the way, if performing these steps seems tedious and error-prone, try writing a shell script that will do them all for you!) diff --git a/package.json b/package.json index 7a6f688..d2bce3b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "build-client": "webpack", "build-client-watch": "webpack -w", - "deploy": "webpack -p && git push heroku master", + "deploy": "webpack -p && git add -f public/bundle.js public/bundle.js.map && git commit --allow-empty -m 'Deploying' && git push heroku deploy:master", "start": "node server", "start-dev": "npm run build-client-watch & npm run start-server", "start-server": "nodemon -e html,js,scss --ignore public server",