Patrick's Portfolio React App w/ Express.js Backend for Assistant

1. Major Dependencies

• React with Vite
• Typescript
• Eslint and Prettier
• Framer Motion
• Three.js (Fiber) with Drei
• MUI Component Library
• Express.js

2. Commands

yarn            # Equivalent to 'yarn i' or 'yarn install'
yarn prepare    # prepares pre-commit hooks for development
yarn dev        # For hot-reloading development session

3. Environment Variables

# For proxy configuration
SSL_DIR=./deploy/ssl/
NGINX_SSL_DIR=/etc/nginx/ssl/
LETS_ENCRYPT_DIR=./deploy/ssl/
LOCAL_KEY=localhost.key
LOCAL_CERT=localhost.crt
DEPLOY_KEY=localhost.key
DEPLOY_CERT=localhost.crt
PRIVATE_HOST_NAME=localhost                         # Should be replaced with private ip address


WEB_HOOK_DIR=./deploy/webHooks/
WEB_HOOK_SECRET=...                                 # Github Webhook Secret for CD

HTTP_PROXY_PORT=80
HTTPS_PROXY_PORT=443

TIMEZONE=America/Los_Angeles

OPEN_API=...
OPEN_ASSIST_ID=...

HOST_NAME=localhost                                 # Set to public domain name

PASSKEY=opensesame

4. Certificate Set-up

a. Generating Unsigned Certificates

# (From root of project)
cd deploy/ssl/
openssl req -x509 -out localhost.crt -keyout localhost.key -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -extensions EXT -config <( printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

b. Let's Encrypt (Certbot) Certificates

In order to generate certificates signed by a certificate authority, we suggest and have accomodated the use of Let's Encrypt (through the Certbot CLI). Other authorities can be used in place of Let's Encrypt with relative ease but this may require slightly more refactoring in the environment variable setting and retrieval.

Below is the suggest command for generating such a certificate and key within a Linux distribution. If you are using a Windows OS System, ensure that you have a WSL distribution installed/enabled. Bare in mind that keys and certificates generated by Let's Encrypt have a '.pem' extension. Simply change the extensions to '.key' and '.crt' respectively. You may also have to edit the certificate file by replacing BEGIN CERTIFICATE and END CERTIFICATE to BEGIN TRUSTED CERTIFICATE and END TRUSTED CERTIFICATE respectively.

Command Breakdown certonly - This option tells certbot to obtain a certificate but not to install it. The certificate will be saved to the system for you to install manually.

--manual - Specifies that the DNS challenge will be handled manually. You will need to manually create DNS TXT records to prove domain ownership.

--preferred-challenges=dns - Indicates that the preferred challenge type is DNS. This is often used for wildcard certificates or when HTTP challenges are not possible or practical. (This is highly dependent on the domain set up itself).

--email - The flag to signal that the next token is the email address to be used for urgent renewal and security notices.

--server https://acme-v02.api.letsencrypt.org/directory - Specifies the ACME server endpoint for Let's Encrypt. The URL provided is the default endpoint for obtaining certificates from Let's Encrypt’s production environment.

-d - The flag to signal that the next token specifies the primary domain for which the certificate is being requested.

sudo certbot certonly --manual --preferred-challenges=dns --email <Your Email> --server <https://acme-v02.api.letsencrypt.org/directory> -d <The Deployed Domain/Subdomain> -d '*.<The Deployed Domain/Subdomain>'

5. Project Build Step

(sudo) docker-compose up -d --build

6. View Page

Head to localhost or <finalized domain> and check out the deployed version of the site!