Adding React to a Server

So you built a home server and now you want to put a web site there to test. You are in the right place.

When I last left off with this series I finished setting up a basic LMAP software stack to host a website/application and at this intersection there are a few paths that you could follow to deploy you application on your LAMP server:

• You could download an repository containing an applications source files and configure it directly on the server.
• You could set up a Content Management System (CMS) and build an application through a graphical interface.
• You could build something from scratch on the server.

For this part of the project I will be downloading the source files for an application that I built previously and deploy that from the server.
The files are located on GitHub and my local client computer so I will go over two ways that you can download them: with SSH and from GitHub.

Table Of Contents

Step 1: Setting up Separate Folders for the Frontend and Backend
Step 2: Downloading an application repository
Step 3: The React Configuration
Step 4: Configure the Environment Variables
Step 5: Clearing the Cache

Step 1: Setting up Separate Folders for the Frontend and Backend

This step is used if you are using SSH to get the application's files or if you are creating an application from scratch.

First thing I recommend doing is setting up the folders for the frontend to live in. You could also create a "backend" folder at this point but I will wait and create it when I need it later in this series.

1. If not already there, run cd /var/www/etcpasswdapp to navigate into the application's folder.
2. Run sudo mkdir frontend to create a separate folder for the frontend.

{Back to the Table Of Contents}

Step 2: Downloading an application repository

Now we need to get the application files onto the server and there are a few ways that it can be done. If you system allows a USB you could copy the files onto a USB and then into the applications folder, use git to download the files from GitHub, or use SSH to download the files from your client computer.

With SSH
To get this step done I need to be able to download the files from my client computer through a Command Line Interface. This is easy enough because during the Ubuntu Server install SSH was installed.

1. You can confirm that you have SSH installed already by running systemctl status ssh.
   • If you don't have SSH for the Ubuntu server you might need to run sudo apt install ssh
2. Ensure that "Port 22" is open on your server computer to interact with it run sudo ufw status.
   • If "Port 22" isn't open already (probably not) you will need to run sudo ufw allow 22 to open the Port with the Uncomplicated Firewall (ufw).
3. Ensure that the SSH service is running on the server computer by running sudo service ssh start.
4. Now on the client computer open the "PowerShell" CLI as Admin and navigate to whatever folder your application is in. For me I have to run cd ../../Users\meeeeee\Documents\Development.
   • Be sure to choose the correct folder for YOUR system. This took me a minute to find the right folder in my system and "meeeeee" is just a name I threw in for an example.
   • I'm also not sure if Admin status is really needed but I did it just to be safe.
5. Once in the folder run scp -r .\Final-Project-Frontend\* dan@192.168.2.43:/home/dan/ (but specific to your set up)
   • scp is the Secure Copy Protocol.
   • -r is the flag to perform a recursive action on anything in the folder.
   • .\Final-Project-Frontend\ is the folder where my application is located within my Development folder on my client computer.
   • * is added to mean everything in the folder's folders and not just files.
   • dan@192.168.2.43:/home/dan/ is the SSH command to connect to my server computer and the file where you want your files put.
6. Back on the server computer ensure that you are in your main defualt folder with the cd command.
   • FYI, the main default folder is the one that you appear in when you log into the server; usually the /home/your_name_here folder.
7. Now that the application files are in your server you can move them from the main default folder into the /etcpasswdapp/frontend folder with cp -r * /var/www/etcpasswdapp/frontend.
   • cp is the command for "copy".
   • -r will recursively move everything in the folder you are currently in (hopefully your main default folder) into the applications main folder.
8. Now that the application files are moved I recommend deleting the old files. To do this run rm -r <folder_name> and rm <file_name> for each folder and file individually so as to not accidently delete something you wanted to keep.

With Git

1. First install git onto the server computer with sudo apt install git.
2. You will need to configure your git identity on the server by running both git config --global user.name "Your GitHub username" and git config --global user.email [e-mail].
3. Now, navigate into the folder your application will live in with cd /var/www/etcpasswdapp.
4. Before you clone the GitHub repository you will need to delete the folders you created in step #1 with sudo rm -rf frontend. This will recursively remove the etcpasswdapp's frontend folder.
5. Now run sudo git clone https://github.com/yourGitHubProject.git frontend to clone the repository into a new folder called frontend.
6. Now run cd /var/www/etcpasswdapp/frontend and you should see the files you downloaded and if you run git status you can see that you are linked up to GitHub for some great version control and backup ability of your application.

{Back to the Table Of Contents}

Step 3: The React Configuration

Now that the application is in the correct folder on the server it's time to add the React configuration into Apache; which really is installing the NPM package manager.

1. First thing is to navigate into the apache config folder for the application with cd /etc/apache2/sites-enabled.
2. Run sudo nano etcpasswdapp.conf to edit the VirtualHost configuration for the application.
3. Edit the "DocumentRoot" line to the new location of the landing page (/var/www/etcpasswdapp/frontend/build)and the "Directory" path to the application's main folder (/var/www/etcpasswdapp/).
   • Note: At this time your site might show you an error on your client computer because, like mine, the build folder is probably not be configured right yet.
4. Install the npm module with sudo apt install npm to allow for the creation of the "production build" for your application.
5. Navigate to the application's folder with cd /var/www/etcpasswdapp/frontend.
6. Run sudo npm install to make sure all the packages are installed.
   • Add the -g flag at the end to install npm globally.
7. If you have any .env files ensure that they are up to date. (See step $4 below)
8. Run sudo npm run build to create the production build folder.
   • If you run into an error here where the "build" fails refer to step #5 below for Clearing the Cache and try again.

Now that npm is installed you might need to restart the Apache service but you shouldn't need to run sudo npm run start because the Apache web server is already running and this command is for starting a separate "server instance" that isn't needed for this type of set up.

{Back to the Table Of Contents}

Step 4: Configure the Environment Variables

Environment variables are important to hold secrets for the application as well as tell the application to run in a "production" mode or "development" mode (which is important for testing).
You might not need this step if you are creating an application from scratch or coping the application files from the client computer. However, if you downloaded a GitHub repository then you will need to create an .env file and a .gitignore file and configure them for security of the application.

1. Ensure you are in the applications folder and run sudo nano .env to create & edit the .env file.
2. Add any needed variables with the "REACT_APP_" prefix or rename any existing variables to have "REACT_APP_" before all variables you will need.
   • For example, if you had a variable such as CRYPT_KEY it needs be be changed to REACT_APP_CRYPT_KEY.
3. Save the file and exit the editor.
4. Edit any location where the variables are used and add "process.env" in front of each variable.
   • For example, in my "app.js" file any CRYPT_KEY variable becomes process.env.REACT_APP_CRYPT_KEY.
5. Now delete any of the old variable creations throughout the application's files.
   • For example, at the top of my "app.js" file I will delete a bunch of constants that I created for local testing of the API location, like const CRYPT_KEY = "http://localhost:3000/api/v1/login". No need to keep extra code around.
6. Run sudo .gitignore to create & edit a .gitignore file that GitHub will use to know which files will not be added to GitHub.
   • For example: add the .env file to that .gitignore file so it doesn't accidently get loaded onto GitHub.
7. Add any files with their path to the file
8. Save the file and exit the editor.
9. I recommend you rerun the npm run build command here to reconfigure your build to the new variables and the new files.

{Back to the Table Of Contents}

Step 5: Clearing the Cache

So your build failed. Mine failed a few times during this process and the best thing to try is to clear the cache, delete the npm packages for the application, and re-build it.

1. If not already there, run cd /var/www/etcpasswdapp to navigate into the application's folder.
   • This step needs to be done from within the application's folder.
2. Run sudo npm cache clean --force to force the clearing any cache the application might have.
3. Run sudo rm -rf node_modules package-lock.json to delete the "node_modules" folder and the "package-lock.json" file.
   • Or delete each separately by running sudo rm -rf node_modules and sudo rm -rf package-lock.json.
4. Install the npm packages again with sudo npm install.
5. Ensure npm is started with sudo npm start.
6. Run npm run build again and hopefully your application will be working now.

{Back to the Table Of Contents}

At this point the applications frontend should be working. For my system I have my backend still on Heroku so my links are not broken BUT the backend is not working because I have not set up SSL on the frontend yet.

Up Next... Securing Server Traffic with SSL

---

Happy Hacking

Resources:

1. https://create-react-app.dev/docs/deployment/#static-server
2. https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle
3. https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments
4. https://serverless-stack.com/chapters/environments-in-create-react-app.html

Please Note: that I am still learning and if something that I have stated is incorrect please let me know. I would love to learn more about what I may not understand fully.