Step 13
So far, we have used Netlify to deploy our React apps. However, we don't necessarily need a static server like Netlify to deploy a React App project in production. Instead, we can build our own server to host a react application. All needed is to serve the "build" artifact of the React application.
Let's do this as an exercise!
- Please go to https://github.com/ and log into your GitHub account.
- Next, click on this link: https://classroom.github.com/a/XsTO8B_8 and accept the invitation!
- Clone the repository and follow the instructions on the README to run the app locally.
Notice the repository contains the "build" artifact of our QuickNotes React app. It uses the serve library to run the app locally. (You should "serve" the content of the build folder instead of directly opening the index.html
.)
Exercise Using Node and Express, build a web server to serve the QuickNotes app. Deploy the server to Heroku.
Solution
- Solution is here: https://github.com/cs280spring/quicknote-app-server-solution.
- The deployed server is available at https://quicknote-app-fa21.herokuapp.com/.
Note the path
app.get("/*", (req, res) => { ... })
is"/*"
instead of"/"
. This is to ensure the server plays well with client-side routing. Read more about it in here.