Deploy a React App with ExpressJS and Nginx

hello everyone this video will show you how to deploy a react application with express.js as the backend service express.js will serve the react application using express.static middleworld function we will first deploy the service on the root path for the server and then on a sub path and i will go through all the changes needed both on the server side client side and also on nginx let's get started okay the first step is to create the statifiers that the expressjs server will serve we can do that by running npn run build which is going to create like a build folder with all the static files needed for the react application to work as we can see the build folder has been created and we have index.html and then under the static folder we have the all djs files and all the css files then i created like a basic server server.js file where i am importing expressjs and some others um modules however the the important bit we want to see is this one we i'm using the express static middleware to serve the files under the build folder the one that we just created using the static middleware by express.js then i created a very basic server.js file where i'm importing express.js module and others modules needed for the express to run the important part though is this one so we want to tell expressjs to serve static files by using express static middleware and we have to tell expressions where to get those files and we have we are indicating the folder the build folder that we just created using the npn run build so every time a client is asking for static files especially as we look into the build folder however this is not quite enough if we are using a client-side routing if your application if your react application is using client-side routing as this one so let's go very quickly on the app.js file as you can see we're using react router dom and we have three routes so it's about users and the default route what's gonna happen with this configuration with this one is that every time let's say a client is asking for this route so like i lost 500 5000 slash users the express.js server we look into the build folder and look for our users file which of course doesn't exist because we don't have any users html file inside the build folder all we need to tell express to yes is that every time you receive an unknown path just reply back with the index.html file and we are doing that by using slash star so every time there is an unknown path just send back the index.html file under the build folder so this request will not reply with the users anymore but we'll reply with the index.html file the index.html file will load again the react application let's try to run the server now so if i run node servers i guess server started and if i go on localhost 5000 i should be able to see my react application and there you go yeah we have the the react application the roots are working as you can see the um the url is changing and if i reload the page i still get back the react application let's try it about okay yes it's working next step is to let's see how we can push this application on a server and and use nginx and express.js to serve the react application okay i logged into an ec2 instance i created on aws and i cloned the project which is called react app express js nginx and we will see that we have all the files needed yes we have the server.js file the one that we just uh edited on the videos to the code yes that's that's the one so in order to run node.js server as a demon i'm using pm2 module pm2 is a module that you can use to run node.js application very easily you can install that by running npm e install pn2 i already i've already done it so i'm going to escape this step so the node.js server is running on locales 5000 now we have to tell nginx that every time you receive he receives a request on the root url to proxy all these requests to the localhost 5000 process we can do that by adding a new conf on nginx so i already created the spread.js conf which we're gonna see now so i'm adding a new location uh block and here adding all the header configuration needed and the important thing is to check this one proxy pass so i'm saying every time you receive a request on this root url just proxy the request to the http localhost 5000 process let's see now and start the uh engine x server so nginx restarts it's gonna pick up the changes okay it's running and if i go on the if i go on the um url so if i go on the server ip which is this one and reload i will see that it's actually working so i can navigate through the roots again if a reload is still being served by the engineering server and then express js server let's check also the network tab and we can see that yes the the path are working and is replying back with the index.html file so we've seen how it's how easy is to you know deploy react express with express js server and nginx as a reverse proxy now let's see if you want to do the same thing but on the sub path of the of the server in order to serve a right application on a sub path like here this one we are showing webmywebsite.com relative path and in our example you can use like slash up just for the example we we need to do like three changes on the client side and just one on the nginx config so starting from the client client react application we want to tell the react application that every time he asks for assets from the index.html to use relative path so since we don't know from the beginning which is going to which one is going to be our url we can use this let's say little hack to tell in this html to get the asset path from our relative path so what we need to do is to add the homepage config on the package.json with the dot value this thing will make sure that all asset paths are relative to the interest html file so it doesn't matter where the html file is all the asset paths will be relative to it next step is to is to go on the app.js file of the of the react application and we need to add a base name on the react router dom so the best name is needed to tell the router that we have a subpath and i'm using here like an environment variable because i want to use the base name only if the base name is defined so i created like an m file here and if the base name is defined i'm going to use the base name as well on the let's say parent router so here otherwise the value will be null and it will be ignored remember that every time you set the m variables for a react application need to add the react up prefix otherwise uh the react application build script will just ignore it like actually every script that you run with react scripts is gonna they're gonna ignore all the variables that doesn't have that don't have the reactant react app prefix the last step we have to do on the react let's say side is to add the public url value so the public url if we go on the docs here let's see if there is like a search yes it's here so public url is basically the variable is like a base path where the uh index.html5 is going to get the assets the static files so we need to tell that every time you try we need to tell um react that the public url will have like an extra value which is gonna be our sub path value so in this case i'm gonna use slash up since we're gonna deploy our react application using the slash up subpath so we can set the public url both as an end variable as i'm doing here on the m file or we can also do that setting the um public url value on the script itself so if i do this one is the same thing like up this one sorry has to be equal up this had the same effect as setting the uh public url value on the m file so with this in mind let's add the um the up values here and also here so now now that we have done the changes we have to let's see what are the changes needed on the server side okay i am on the server again let's see the let's configure the m file on the server so here i will uncommand the values of the base name and public url and i will need to run the npn run build to update our let's say build package so now the build script is running with the files and variables configured and our [Music] our build folder has the um as the base name configured as you can see also the script is going to tell you the the project was built assuming this is host at slash app slash which is what we're going to do the last step is to update our nginx config and we're going to do that by changing the express js that we have just created and we need to add the app subpath on the engine x so let's focus for a second on the nginx config it's very important to remember the training slash on the proxy pass because if we add the trendy slash on the proxy pass directive the nginx server will basically act as an alias so i'll show you on the on the code i think it's easier so this is like the same express.js config with the trendy slash what's gonna happen is that every time a client hits this this can be like a domain example.com slash app slash users nginx will use the proxy pass directive as an alias so it will it will just replace the url with the proxy pass value so what's going to happen is that your server will receive this request which is actually the right one if we forget the trailing slash here on the proxy pass directive nginx will redirect to your localhost the original uri so what will happen is that your express gs server in this case but your let's say server running on the proxy pass you will receive this request so something like this and it will not work because it doesn't know how to serve this page so again remember the trailer slash for this use case on the proxy plus value okay let's go back on the nginx conf and in order to apply the uh modification let's just restart the server and see if it actually works so nginx has been restarted let's go on the on chrome browser and this is the uh the ip of the server so if i go on the root now have the welcome to engine x the full one but if i navigate through the up um the app url as i will yeah as i was expecting i'm getting the react application served by nginx and express gs so what is what is happening is that this request has been forwarded by the proxy pass to localhost 5000 where the node.js server is running let's see if the root works they work as well if i do like reload let's see it they work as well so everything is working even with this subpath and this was thanks to the configuration we had to do on the react application and also on the nginx location block great i hope this video was useful for you and you understood like better how to deploy a red application using express js and nginx both on the root folder and subpar folder of the of a server let me know if you have any questions on the comments and see you on the next one cheers

Channel: Enrico Portolan

Views: 1,866

Keywords: aws, serverless, cloud

Id: 6CjbezdbB8o

Length: 14min 59sec (899 seconds)

Published: Wed Jun 23 2021