-
Install server dependencies:
npm install
-
Setup database
cd db
sqlite3 database.db < schema.sql
sqlite3 database.db < schema.sql
-
Run Backend Server:
- Do
npx nodemon socket-server.js
- This runs both the Express server and WebSocket server on port 10000 by default
- Do
-
Install client dependencies (for Create-React-App):
cd client && npm install
-
Running client code:
cd client && npm start
-
On your browser navigate to
http://localhost:3000
- This connects to the local React dev server, meaning any changes you make to front-end files will reflect automatically
-
Optional - To simulate a prod environment, navigate to
http://localhost:10000
instead ofhttp://localhost:3000
- This serve files directly from the
client/build
folder- This only works if you have already done a prod build from CRA (see below)
- This serve files directly from the
-
Create React App Production Build:
- This builds the React client code so that it can be served by express-server.js
- Read https://create-react-app.dev/docs/deployment/
cd client && npm run build
- This generates a
build
directory that contains all front-end client files - We want
express-server.js
to be serve front-end files frombuild
when the user visits the site
-
Heroku Build:
- Set-up a Heroku app (you may do this on the site or through the command line) and connect this app to Heroku's remote Git repository
- Prepare the codebase for Heroku deployment
- Deploying to Heroku means pushing to Heroku's remote Git repo
- The client directory is only used for local dev env
- From project root,
git push heroku master
- Sockets
VERY IMPORTANT: To keep our git log looking nice, please follow the steps below carefully when deploying!! You may follow this workflow after following the steps above (ie. you already have a working instance of this application up on Heroku). Whenever you want your changes are made to be made live, you will need to re-deploy the app
0. Test your changes. If you have the client/build
folder, be sure to delete it rm -rf build
before the next step
- Add and commit your changes to Git
git add --all
,git commit -m <message>
- Push these changes to GitHub
- Build the front-end:
cd client && npm run build && cd ..
- This uses CRA's webpack to build our front-end files
- Notice that you will now have a
client/build
folder. Don't push this toremote
(GitHub!)!!11!- Create a temp commit:
git add --all && git commit -m "Temporary Commit for Heroku"
- We will be reverting this commit later
- Deploy to heroku:
git push heroku master --force
- You will know if you successfully deployed the build if you see something like this:
... remote: -----> Launching... remote: Released v8 remote: https://your-app-name-here.herokuapp.com/ deployed to Heroku remote: remote: Verifying deploy... done. ...
- You will know if you successfully deployed the build if you see something like this:
- Now, we want to delete the temporary commit you made earlier:
git reset --soft HEAD~1
- Careful! This removes your most RECENT commit! Your most recent commit should be the temp commit
- Create a temp commit:
- Do
git log
to see if you have successfully deleted your most recent commit- The reason why we want to delete our most recent commit is because we don't want to push
client/build
to GitHub
- The reason why we want to delete our most recent commit is because we don't want to push
- Do
git status
-- you may see thatbuild
is staged for commit- What you can do now is delete the
build
folder,cd client && rm -rf build && cd ..
- Now, your
git status
will still look a bit messy, so just dogit add --all
- Do
git status
again. It should be clean and show no changes!
- What you can do now is delete the
One-liner (combines steps 3 - 6): cd client && npm run build && cd .. && git add --all && git commit -m "Temporary Commit for Heroku" && git push heroku master --force && git reset --soft HEAD~1 && cd client && rm -rf build && cd .. && git add --all
- Check if an instance of the Heroku app is up
- From root, do
heroku ps:scale web=1
- Visit the app by doing
heroku open
or by visiting the actual URL of the app
- From root, do
- Viewing logs
heroku logs --tail
- Connecting to Heroku bash
heroku run bash
- You can check out the deployed files here
ls
exit
to exit