Benjamin Brooke Web Development Blog

My website. Built with NextJS + Strapi

Blog Posts

Date	Name
07-05-2021	D3 Visualization | LADC Sample Sales
06-25-2021	eCommerce Stories | Automating Order Placement & Data Entry
06-15-2021	How To Build A Flip Card Component With React
06-05-2021	How To Optimize Your Next.js Production Build
06-04-2021	Build An eCommerce Color Search Tool With Node.js + React 2
05-25-2021	Build An eCommerce Color Search Tool With Node.js + React 1
05-11-2021	Build A Blog Article Progress Bar With React + Bootstrap
09-03-2020	Read Time Feature For React + Markdown Blog
09-03-2020	React Contact Form With Formik + Klaviyo
08-16-2020	WordPress Form To Email + Google Sheet
01-24-2020	How To Build A Command Line Application With Node
12-21-2019	D3 Visualization | Simple Binary Search Tree
11-17-2019	D3 Visualization | High School Clock
10-09-2019	React Form Validation With Formik + GraphQl + Yup
08-23-2019	How To Encode GIFs With Node
08-16-2019	How To Use Local Storage To Persist Data
08-11-2019	How To Build A Color Picker With React
08-01-2019	Save Development Time With AutoHotKey
07-17-2019	D3 Visualization | Minesweeper
07-09-2019	React SVG Icons With No Artistic Abilities

Environment Variables

Environment variables are needed to configure various features throughout the application

Client

Use .env.local in root of frontend folder

Name
KLAVIYO_PRIVATE_TOKEN
KLAVIYO_PUBLIC_TOKEN

Server

Use .env in root backend folder

Name
ADMIN_HOST
ADMIN_JWT
ADMIN_PORT
ADMIN_URL
CLOUDINARY_KEY
CLOUDINARY_SECRET
CLOUDINARY_NAME
DATEBASE_HOST
DATEBASE_PORT
DATEBASE_NAME
DATEBASE_USERNAME
DATEBASE_PASSWORD
DATEBASE_SSL
REDIS_PASSWORD

Deployment

Set up to deploy to GitHub and to a remote server on push of main branch

Git Setup

Utilizes dual origin remotes for push

1. GitHub Repository
2. Server Repository (Bare)

 git remote set-url --add --push origin ssh://[user]@[server ip][path to bare git repo on server]

Confirm configuration by running to view verbose remotes

git remote -v

Output should list 2 push and 1 fetch remotes named origin. When a normal git push is run the code is sent to both GitHub and the server

git add [files]
git commit -m [message]
git push origin main

PM2 Process Manager

Node process are run in the background and managed by PM2

Install PM2 globally on server

npm install -g pm2

Initial PM2 processes

The client application depends on server so start Strapi first

pm2 start npm --name "strapi" -- start

Then run the Next process

pm2 start npm --name "next" -- start

Once both processes are running create an init script for PM2

pm2 startup

Freeze the process list so PM2 will restart automatically when server reboots

pm2 save

Remove PM2 init script

pm2 unstartup systemd

Server Repository

A post-receive hook runs on the server to rebuild both NextJS and Strapi

#!/bin/sh

# add npm executable to PATH
PATH="/root/.nvm/versions/node/v14.17.0/bin:$PATH"

# variable assignment
sitePath=/var/www/bvgsoftware.com
repoPath=/var/repo/bvgsoftware.git
assetPath=/root/bvgsoftware

# copy current main branch to project directory
git --work-tree=$sitePath --git-dir=$repoPath checkout -f main

# copy environmment variable files into project directory
cp $assetPath/.env.local $sitePath/frontend/.env.local
cp $assetPath/.env $sitePath/backend/.env

# rebuild and restart Strapi back end
cd $sitePath/backend

npm run cleanup

npm install

npm run build

pm2 restart strapi

# rebuild and restart Next front end
cd $sitePath/frontend

npm run cleanup

npm install

npm run build

pm2 restart next

exit 0

Data Migration

Local To Server

Copy local postgres database to a tar file and send it to remote server

From the backend directory run the following

npm run migrate

On remote server the database must be restored from the tar file by the postgres user

sudo -i -u postgres
pg_restore -v -c -d postgres /var/www/bvgsoftware.com/data.tar

Server To Local

Download tar file from server and restore local postgres database

pg_restore -U postgres -v -c -d postgres /var/www/brokeveganguy.com/data.tar

Strapi Middleware Cache

Cache requests on demand to speed up data fetching

Development

Start Redis from Docker Desktop or from command line

Start Redis in Docker container using -d to run as a daemon

docker run --name redis1 -p 6379:6379 redis -d

Can also be declared in a docker-compose.dev.yml file

docker-compose -f docker-compose.dev.yml up -d

Open an interactive sheel to explore Redis

docker exec -it redis1 sh
redis-cli
KEYS *

View docker logs

docker logs --tail 50 --follow --timestamps redis1

Production

Redis is running as a service managed by systemd

systemctl status redis