Cisco Guillaume GuillaumeCisco

Guillaume Cisco Website

Interactive SSR website built with React, Webpack, Redis caching, HTTPS local development, and Tauri desktop support.

Stack

React
Webpack
Node.js SSR
Redis
Docker
AWS EC2
Nginx
Let's Encrypt
Tauri v2
Yarn Berry (v4)

Requirements

Node.js

Required version:

>=22.0.0

Recommended:

node v26.1.0
npm 11.11.0
yarn 4.13.0

Verify versions:

node -v
npm -v
yarn -v

Install Corepack + Yarn Berry

Enable Corepack:

npm install -g corepack
corepack enable

Activate Yarn:

corepack prepare yarn@4.13.0 --activate

Verify:

yarn -v

Install dependencies

yarn install

Local HTTPS certificates

Development mode requires local HTTPS certificates generated with mkcert.

Install mkcert

Linux

Install NSS tools:

sudo apt install libnss3-tools

Install mkcert:

curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"

chmod +x mkcert-v*-linux-amd64

sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert

macOS

brew install mkcert

Install local CA

mkcert -install

Generate local certificates

yarn certs

Expected files:

certs/
├── localhost+2-key.pem
└── localhost+2.pem

Development

Run the SSR development server with HTTPS and HMR:

yarn dev

Application URL:

https://localhost:3000

Production build

Build the production application:

yarn build

Run production locally:

yarn start

Tests

Run tests

yarn test

Coverage

yarn cover

ESLint

yarn eslint

Tauri Desktop App

The desktop application uses Tauri v2.

Install Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Linux dependencies

sudo apt install \
  libwebkit2gtk-4.1-dev \
  libappindicator3-dev \
  librsvg2-dev \
  patchelf

Development mode

yarn tauri:dev

Production build

yarn tauri:build

Redis cache

The project uses Redis for SSR shell caching.

Create Docker network

docker network create app-net

Start Redis container

docker run -d \
  --name redis \
  --network app-net \
  redis

Redis shell access

docker exec -it redis sh

Flush Redis:

redis-cli flushall

Docker local testing

Run the production container locally:

docker run -it \
  -v /etc/letsencrypt/:/etc/letsencrypt/ \
  --network app-net \
  -e REDIS_HOST=redis \
  -e REDIS_PORT=6379 \
  -e SSL_KEY_PATH=/etc/letsencrypt/live/guillaumecisco.com/privkey.pem \
  -e SSL_CERT_PATH=/etc/letsencrypt/live/guillaumecisco.com/fullchain.pem \
  -p 8001:3000 \
  docker_image_name:latest

Then open:

https://localhost:8001

AWS CLI

Linux

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

unzip awscliv2.zip

sudo ./aws/install

macOS

brew install awscli

Verify:

aws --version

AWS configuration

aws configure

Recommended region:

eu-central-1

Nginx configuration

Main nginx file:

/etc/nginx/nginx.conf

Enable gzip inside the http {} block:

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_min_length 1024;

    gzip_types
        text/plain
        text/css
        text/javascript
        application/javascript
        application/json
        application/xml
        application/rss+xml
        image/svg+xml;

    include /etc/nginx/conf.d/*.conf;
}

Virtual host

File:

/etc/nginx/conf.d/guillaumecisco.conf

# HTTP
server {
    listen 80;
    server_name guillaumecisco.com www.guillaumecisco.com;

    location ^~ /.well-known/acme-challenge/ {
        root /var/www/html;
        default_type "text/plain";
        try_files $uri =404;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}

# HTTPS
server {
    listen 443 ssl http2;
    server_name guillaumecisco.com www.guillaumecisco.com;

    ssl_certificate     /etc/letsencrypt/live/guillaumecisco.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/guillaumecisco.com/privkey.pem;

    location ^~ /.well-known/acme-challenge/ {
        root /var/www/html;
        default_type "text/plain";
        try_files $uri =404;
    }

    location / {
        proxy_pass https://127.0.0.1:8001;

        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_ssl_server_name on;
        proxy_ssl_verify off;
    }
}

Validate nginx:

sudo nginx -t

Reload nginx:

sudo systemctl reload nginx

Install Certbot

Amazon Linux:

sudo yum install certbot

Ubuntu:

sudo apt install certbot

Generate production SSL certificates

sudo certbot certonly \
  --webroot \
  -w /var/www/html \
  -d guillaumecisco.com \
  -d www.guillaumecisco.com

Certificates:

/etc/letsencrypt/live/guillaumecisco.com/

Automatic SSL renewal

Edit crontab:

sudo crontab -e

Add:

0 3 * * * certbot renew --quiet --deploy-hook "/usr/bin/systemctl reload nginx"

Renewal test

sudo certbot renew --dry-run

Deployment

Create deploy.js

cp tools/deploy_template.js deploy.js

Update:

Docker registry
image name
Redis host
Redis port
optional Sentry DSN

Login to AWS ECR

aws ecr get-login-password --region eu-central-1 \
  | docker login --username AWS --password-stdin \
  984406419997.dkr.ecr.eu-central-1.amazonaws.com

Deploy

yarn deploy

Production container

docker run -d \
  --name guillaumecisco \
  --network app-net \
  -v /etc/letsencrypt/:/etc/letsencrypt/:ro \
  -e REDIS_HOST=redis \
  -e REDIS_PORT=6379 \
  -e SSL_KEY_PATH=/etc/letsencrypt/live/guillaumecisco.com/privkey.pem \
  -e SSL_CERT_PATH=/etc/letsencrypt/live/guillaumecisco.com/fullchain.pem \
  -p 8001:3000 \
  984406419997.dkr.ecr.eu-central-1.amazonaws.com/guillaumecisco:latest

Architecture

packages/
├── webpack/
├── tauri/
├── eslint/
└── test/

src/
public/
tools/
src-tauri/

Important notes

Port 80 must stay open for Let's Encrypt
Local development requires mkcert certificates
Redis is required for SSR caching
HTTPS is enabled in both development and production
The production backend serves HTTP/2 internally
The application uses SSR with dynamic chunk loading

Result

SSR React website
HTTPS local development
Automatic SSL renewal
Dockerized production deployment
Redis SSR cache
Tauri desktop support
Dynamic code splitting

Cisco Guillaume GuillaumeCisco

Achievements

Achievements

Guillaume Cisco Website

Stack

Requirements

Node.js

Install Corepack + Yarn Berry

Install dependencies

Local HTTPS certificates

Install mkcert

Linux

macOS

Install local CA

Generate local certificates

Development

Production build

Tests

Run tests

Coverage

ESLint

Tauri Desktop App

Install Rust

Linux dependencies

Development mode

Production build

Redis cache

Create Docker network

Start Redis container

Redis shell access

Docker local testing

AWS CLI

Linux

macOS

AWS configuration

Nginx configuration

Virtual host

Install Certbot

Generate production SSL certificates

Automatic SSL renewal

Renewal test

Deployment

Create deploy.js

Login to AWS ECR

Deploy

Production container

Architecture

Important notes

Result

Popular repositories Loading

Uh oh!