Skip to content

Documentation

Installation Guide

Introduction

This guide will walk you through the initial setup, server requirements, and installation of the project on your web server. Additionally, it covers configuring Nginx as a reverse proxy and virtual host to handle API requests from your Node.js backend to serve your React frontend.

Server Requirements

Before you start, make sure your server meets the following requirements:

Node.js: Version 18.0.0 or higher
PostgreSQL: Version 13 or higher
NPM: Version 7.0.0 or higher
Nginx: Version 1.22 or higher

Setting Up

Make sure you’ve downloaded the project files from here and unzip the package files. After extracting, you’ll find shopzing.zip and database folder which you will need to upload to your web server.

Uploading the Project to your Web Server

Use a file transfer client like FileZilla or WinSCP to upload the shopzing.zip and database folder to your web server, then unzip the shopzing.zip file. You’ll find shopzing folder. You need to move this folder to the document root directory of your domain. Keep database/database.sql file at current location as we’ll use this when we import during database setup.

Rename the Project Folder

Once you have moved the extracted project folder to your web document root, you may choose to rename the folder to match your domain or project name by running the following commands:

mv shopzing myProject
cd myProject

Next, initialize the project

npm init -y

Install Dependencies

Install both frontend and backend dependencies:

npm install
npm install express body-parser cookie-parser cors dotenv pg

Configure Environment Variables

Find .env file in the src directory of your project. Update the following configuration and replace the placeholder values with your actual values:

SITE_NAME=myProject
DB_USER=DB_USER
DB_PASSWORD=DB_PASSWORD
DB_HOST=localhost
DB_PORT=5432
DB_NAME=DB_NAME
PORT=4002
UPLOAD_PATH=uploads/
INVOICE_PATH=invoices/
DEMO_HOST=https://demo.fetchiyo.com
HOST=https://example.com
JWT_SECRET=your_jwt_secret_here
PAYPAL_API_BASE_URL=PayPal API Base URL
PAYPAL_WEBHOOK_ID=PayPal Webhook ID
PAYSTACK_API_BASE_URL=Paystack API Base URL
FLUTTERWAVE_API_BASE_URL=Flutterwave API Base URL
    • SITE_NAME=myProject: Replace myProject with the name of your site.
    • DB_USER=DB_USER: Replace DB_USER with your PostgreSQL database username.
    • DB_PASSWORD=DB_PASSWORD: Replace DB_PASSWORD with your PostgreSQL database password.
    • DB_HOST=localhost: If your PostgreSQL server is on a different host, replace localhost with the appropriate host address.
    • DB_PORT=5432: Replace 5432 if your PostgreSQL server is using a different port.
    • DB_NAME=DB_NAME: Replace DB_NAME with your PostgreSQL database name.
    • PORT=4002: Set the port number for your Node.js server.
    • UPLOAD_PATH=uploads/: Set the path where uploaded files will be stored.
    • INVOICE_PATH=invoices/: Set the path where invoice files will be stored.
    • DEMO_HOST=https://demo.fetchiyo.com: Keep it same as it will be required for demo data.
    • HOST=https://example.com: Replace this field with your domain or host URL.
    • JWT_SECRET=your_jwt_secret_here: Replace your_jwt_secret_here with the JWT secret you’ll generate below.
    • PAYPAL_API_BASE_URL=Replace with PayPal API Base URL
    • PAYPAL_WEBHOOK_ID=Replace with your actual PayPal Webhook ID
    • PAYSTACK_API_BASE_URL=Replace with Paystack API Base URL
    • FLUTTERWAVE_API_BASE_URL=Replace with Flutterwave API Base URL

This .env file securely stores environment variables like database credentials, server port, file paths, and API keys.

Generating JWT Secret

To generate a JWT secret, follow these steps:

Open Terminal

Access your server’s command line interface.

Generate JWT Secret

openssl rand -hex 64

This command generates a 64-byte hexadecimal string. The output will look something like this:

1e9b5c2bce9d3d4e5f9e2fca3fbd5a9bca1e7c3d78e8c2d5e4f1b0a7c4e5b9c3e

Add to .env File

Open your .env file located in the src directory of your project.

Add the JWT secret value

JWT_SECRET=1e9b5c2bce9d3d4e5f9e2fca3fbd5a9bca1e7c3d78e8c2d5e4f1b0a7c4e5b9c3e

Replace the example string with your generated secret.

Importing PostgreSQL Database

To import the project’s PostgreSQL database into your own PostgreSQL database, follow these steps:

Step 1: Locate the database.sql file inside the database folder under the project folder.

Step 2. Use the psql command to import the database.sql file into your database:

psql -U your_username -d your_database_name -f path/to/database.sql
  • Replace your_username with your PostgreSQL username.
  • Replace your_database_name with the name of the database you created.
  • Replace path/to/database.sql with the actual path to your database.sql file.

Step 3: Verify the Import

Connect to your database using psql:

psql -U your_username -d your_database_name

Check if the tables and data have been imported correctly:

\dt

This command lists all tables in the database.

Configure Nginx

Nginx is required to set up as a reverse proxy to handle API requests from your Node.js server. Follow these steps to configure Nginx:

Install Nginx

sudo yum install nginx -y

Create and Edit Nginx Configuration

sudo nano /etc/nginx/conf.d/example.com.vhost

Add the following configuration:

server {
server_name example.com;

location / {
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://localhost:5173;
proxy_http_version 1.1;
proxy_set_header Connection "";
keepalive_timeout 75s;
keepalive_requests 100;
}

location /api/ {
proxy_pass http://localhost:4002;
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_http_version 1.1;
proxy_set_header Connection "";
keepalive_timeout 75s;
keepalive_requests 100;
}

location /admin/api/ {
proxy_pass http://localhost:4002;
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_http_version 1.1;
proxy_set_header Connection "";
keepalive_timeout 75s;
keepalive_requests 100;
}

location /uploads/ {
alias /uploads/;
}

location /assets/ {
alias /assets/;
}

listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

server {
if ($host = example.com) {
return 301 https://$host$request_uri;
}

listen 80;
server_name example.com;
return 404;
}

Change values as per your server and project settings wherever required.

Restart Nginx to apply the configuration:

sudo systemctl restart nginx

Running the Node Server

Navigate to the directory containing your server.js file:

cd /path/to/your/myProject/src

Run the Node.js server with nohup:

nohup node server.js > server.log 2>&1 &

Running the Frontend App

To run the frontend app, follow these steps:

Navigate to your project directory:

cd /path/to/your/myProject
nohup npm run dev > dev.log 2>&1 &

If you encounter any issues or need further assistance, please contact support at support@fetchiyo.com.