Currently we are using React to generate static files, and then use Apache (aka httpd on AWS) to host it, as well as handling SSL certs.


Apache install


sudo apt install httpd # For AWS

sudo apt install apache2 # For Azure



Configure Apache (already done on current Dashboard frontend machine)


# For AWS, file is at: /etc/httpd/conf/httpd.conf

# For Azure, file is at: /etc/apache2/apache2.conf

<VirtualHost *:443>
    DocumentRoot "/var/www/html"
    ServerName "dashboard.diaper.cf"
    ServerAlias "dashboard.diaper.cf"
    SSLEngine on
    SSLCertificateFile "/etc/letsencrypt/live/diaper.cf/fullchain.pem"
    SSLCertificateKeyFile "/etc/letsencrypt/live/diaper.cf/privkey.pem"
  <Directory "/var/www/html">
    order allow,deny
    allow from all

    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) /index.html [NC,L]
  </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName "dashboard.diaper.cf"
    Redirect permanent / https://dashboard.diaper.cf
</VirtualHost>



Generate static files with React 

npm run build .env  // Replace `.env` with your actual environmental variables

Note: The env var file must be in the listed filenames at https://create-react-app.dev/docs/adding-custom-environment-variables/


Copy the static files ( build  folder) to Apache folder

First, upload the generated build  folder (from the previous step) onto the Dashboard Frontend AWS Server. One of many choices is to use FileZilla 

I've put a script that will copy and update the static files to Apache folder automatically as follows.

It's rather self-explanatory

Note: Usually updating content does not require Apache  to restart – You can verify if new content is hosted by refreshing your browser, particularly by Command  + Shift  + R  to refresh to empty the current page's cache and reload.

# File at Dashboard frontend machine's /home/ec2-user/deploy-react/run-deploy.sh

echo "============================================================================================"
echo "=== This is a script to copy React 'build/' folder contents to be hosted by Apache httpd ==="
echo "============================================================================================"

echo "** Please run me with sudo **"

echo "Have you copied the 'build/' folder into this directory? (choose answer number below)"
select yn in "Y" "N"; do
	case $yn in
		Y) rm -r /var/www/html/*; cp -r ./build/* /var/www/html/; echo "== Done =="; break;;
		N) exit;;
	esac
done


If you update the SSL certs, Apache must be restarted by

sudo systemctl restart httpd