Adding React to a Server
Tags: codenewbie, todayilearned, sideprojects, security
Published: 2021-01-01 01:36:21

So you built a home server and now you want to put a web site there to test. You are in the right place.
![](https://media.giphy.com/media/l0HlHFRbmaZtBRhXG/giphy.gif)


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)](https://dev.to/caffiendkitten/building-a-home-test-server-27h1#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.




# <a name="TOC">Table Of Contents</a>
[Step 1: Setting up Separate Folders for the Frontend and Backend](#S1)
[Step 2: Downloading an application repository](#S2)
[Step 3: The React Configuration](#S3)
[Step 4: Configure the Environment Variables](#S4)
[Step 5: Clearing the Cache](#S5)







# <a name="S1">Step 1: Setting up Separate Folders for the Frontend and Backend</a>
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](#TOC)}






# <a name="S2">Step 2: Downloading an application repository</a>
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)](https://dev.to/caffiendkitten/building-a-home-test-server-27h1#UNFW).
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 command](https://dev-to-uploads.s3.amazonaws.com/i/a1vijmipon4931th9xbx.png)
 - `scp` is the [Secure Copy Protocol](https://dev.to/caffiendkitten/building-a-home-test-server-27h1#SSHandSCP).
 - `-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](https://git-scm.com/book/en/v2/Getting-Started-Installing-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 YourGitHubEmail@example.com`.
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](#TOC)}









# <a name="S3">Step 3: The React Configuration</a>
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](https://www.npmjs.com/).

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/`). ![VirtualHost Changes Example](https://dev-to-uploads.s3.amazonaws.com/i/twdkroiuvgheqx686j6x.png)
 - 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](#TOC)}





 
# <a name="S4">Step 4: Configure the Environment Variables</a>
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](#TOC)}








# <a name="S5">Step 5: Clearing the Cache</a>
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](#TOC)}







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 




<hr>

Happy Hacking
![Happy Hacking ^_^](https://media.giphy.com/media/l3vRmVv5P01I5NDAA/giphy.gif)

### Resources:
<a name="L1">1.</a> https://create-react-app.dev/docs/deployment/#static-server
<a name="L2">2.</a> https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle
<a name="L3">3.</a> https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments
<a name="L4">4.</a> https://serverless-stack.com/chapters/environments-in-create-react-app.html

 





##### <figcaption>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.</figcaption>