So which steps do we need to follow when we deploy a react app?
First of all we need to check and possibly adjust the base path,
this is only important when we use the react router and there when wrapping the app in the browser
router, you can set your basename property. That is always required when your app is served from something
else
than the root route, the route domain. If you're serving your app from example.com/my-app,
then you'll need to set the basename to my app for the router to work correctly.
That's the first important thing,
the second important thing is that we need to build an optimized project, this is done with one convenient
command in our application,
npm run build in create react app projects. That will automatically build the project and optimize
all our javascript bundles to have a very small codebase
we then actually will upload on a server, because you obviously want to ship as little code as possible
since that will be as fast as possible.
Now another important thing to keep in mind is your server must always serve the index.html file also
and especially in 404 cases, that's required due to the way the Internet works.
If your user visits my-app.com/users, then the server is the first to receive that route
and chances are the server doesn't know the /users path because you defined it in your react app.
Now for that to not throw an error,
your react app needs to get a chance of parsing the path and it only does so if you return the index.html
file for that unknown route,
it is unknown to the server in the end.
So always return index.html in 404 cases
otherwise your routing dependent react applications won't work.
Finally upload the build artefacts you get from the second step, build and optimize the project to a static
server,
you don't need a server running PHP or Node or anything like that.
In the end, what you will deploy here is a single page app consisting of html and a little bit of css
and a lot of javascript,
none of that needs a server side language, so a static server like AWS S3, Github pages or Firebase
or any other server will do and you just upload the build artefacts, not your entire project folder.
The build artefacts will be stored in a /build folder and I will show this to you in a second
and that's actually all. That is how easy it is to deploy your react application.
Let's now do this together in the next lecture.