cPanel Update

This document will help you to update the Investra web frontend using cPanel. This guide assumes you have deployed the web frontend using static export method.

Prerequisites

• Make sure your local machine has Node.js installed and the version is 22 or higher.
• Make sure you have already uploaded the admin on cPanel and setup all the necessary configuration and your admin URL is working fine.

Step 1: Find the Static Export File

On the core folder you will see have static-client.zip file. Extract the zip file.

And go to project root directory.

Step 2: PWA Setup

1. Open the src/app/manifest.ts file.

import type { MetadataRoute } from "next";
export const dynamic = "force-static";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "Investra",
    short_name: "Investra",
    description: "Investment platform",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#000000",
    icons: [
      {
        src: "/web-app-manifest-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/web-app-manifest-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
    screenshots: [
      {
        src: "/desktop-screenshot.png",
        type: "image/png",
        form_factor: "wide",
        sizes: "1366x768",
        label: "Desktop view of Investra",
      },
      {
        src: "/mobile-screenshot.png",
        type: "image/png",
        form_factor: "narrow",
        sizes: "400x800",
        label: "Mobile view of Investra",
      },
    ],
  };
}

Update all the values according to your needs:

• name: The full name of your application (displayed on install prompts)
• short_name: A shorter name for your app (displayed on home screens)
• description: A brief description of your application
• background_color & theme_color: Customize to match your brand colors

Adding PWA Icons

The icons array defines the app icons used when users install the PWA. You can add more icons to support different device resolutions:

• All icon files must be placed in the public folder
• Ensure each icon's src path matches the actual filename in your public folder
• Common sizes include 192x192 (required), 512x512 (required), and optionally 384x384, 256x256, etc.
• All icons should be in PNG format with type: "image/png"

Step 3: Setup the ENV File

1. Copy the .example.env file to .env file and edit the file.

2. Add the following variables to the .env file:

NEXT_PUBLIC_API_URL=http://app.example.com #Required
NEXT_PUBLIC_TOKEN_NAME=token
NEXT_PUBLIC_ASSET_URL=http://example.com

Step 4: Build the App for Production

1. Install the dependencies using npm install

npm install --force

2. Build the app for production:

npm run build

We use sharp package for image optimization. If you get error on sharp package then remove the sharp package from the package.json file.

"dependencies": {
"sharp": "^0.32.1", #remove this line
}

Then remove the node_modules folder and package-lock.json file. Then run the npm install --force command again and build the app again.

npm run build

Step 5: Zip the Out Folder

1. Go to the out folder.
2. Select all the files and compress them as out.zip file.

Step 6: Upload the out.zip File to cPanel

1. Upload the out.zip file to cPanel.

Step 7: Add .htaccess File

Now add the .htaccess file to your cPanel and add the following code:

<IfModule mod_rewrite.c>
    Options +FollowSymLinks -MultiViews
    RewriteEngine On

    # Remove trailing slash and map to .html
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.*)/$ $1.html [L]

    RewriteCond %{REQUEST_FILENAME}.html -f
    RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}\.html -f
    RewriteRule ^(.*)$ $1.html [NC,L]

    # Protect git directory
    RewriteRule (^|/)\.git - [F,L]

    # Force HTTPS
    RewriteCond %{HTTPS} !=on
    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

# Redirect all 404 errors
ErrorDocument 404 /404.html

Copy the above code to your .htaccess file and save it.

Most of the cPanel work with this .htaccess file. But if you face any issue then use the below code for like (KeyWeb).

<IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.*)/$ $1.html [L]

    RewriteCond %{REQUEST_FILENAME}.html -f
    RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}\.html -f
    RewriteRule ^(.*)$ $1.html [NC,L]

    # Protect some contents
    RewriteRule (^|/)\.git - [F,L]
</IfModule>

# Serve custom 404 page
ErrorDocument 404 /404.html

Conclusion

Congratulations! You have successfully updated the web frontend on cPanel.