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.
- If not already there, run
cd /var/www/etcpasswdapp
to navigate into the application's folder. - 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.
- 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
- If you don't have SSH for the Ubuntu server you might need to run
- 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).
- If "Port 22" isn't open already (probably not) you will need to run
- Ensure that the SSH service is running on the server computer by running
sudo service ssh start
. - 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.
- 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.
-
- 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.
- FYI, the main default folder is the one that you appear in when you log into the server; usually the
- Now that the application files are in your server you can move them from the main default folder into the
/etcpasswdapp/frontend
folder withcp -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.
-
- Now that the application files are moved I recommend deleting the old files. To do this run
rm -r <folder_name>
andrm <file_name>
for each folder and file individually so as to not accidently delete something you wanted to keep.
With Git
- First install git onto the server computer with
sudo apt install git
. - You will need to configure your git identity on the server by running both
git config --global user.name "Your GitHub username"
andgit config --global user.email YourGitHubEmail@example.com
. - Now, navigate into the folder your application will live in with
cd /var/www/etcpasswdapp
. - 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. - Now run
sudo git clone https://github.com/yourGitHubProject.git frontend
to clone the repository into a new folder calledfrontend
. - Now run
cd /var/www/etcpasswdapp/frontend
and you should see the files you downloaded and if you rungit 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.
- First thing is to navigate into the apache config folder for the application with
cd /etc/apache2/sites-enabled
. - Run
sudo nano etcpasswdapp.conf
to edit the VirtualHost configuration for the application. - 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.
- Install the npm module with
sudo apt install npm
to allow for the creation of the "production build" for your application. - Navigate to the application's folder with
cd /var/www/etcpasswdapp/frontend
. - Run
sudo npm install
to make sure all the packages are installed.- Add the
-g
flag at the end to install npm globally.
- Add the
- If you have any .env files ensure that they are up to date. (See step $4 below)
- 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.
- Ensure you are in the applications folder and run
sudo nano .env
to create & edit the.env
file. - 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 toREACT_APP_CRYPT_KEY
.
- For example, if you had a variable such as
- Save the file and exit the editor.
- 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 becomesprocess.env.REACT_APP_CRYPT_KEY
.
- For example, in my "app.js" file any
- 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.
- 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
- 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.
- For example: add the
- Add any files with their path to the file
- Save the file and exit the editor.
- 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.
- 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.
- Run
sudo npm cache clean --force
to force the clearing any cache the application might have. - 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
andsudo rm -rf package-lock.json
.
- Or delete each separately by running
- Install the npm packages again with
sudo npm install
. - Ensure npm is started with
sudo npm start
. - 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
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
Top comments (0)