Skip to main content

Guide to Install Web on Vercel

Investra is a modern application where the frontend (web) is built using Next.js and Tailwind CSS, and the backend is developed using Laravel.

In this guide, we will focus on deploying only the web part on Vercel. The backend should be hosted separately on platforms like AWS, DigitalOcean, Azure, VPS or cPanel.

Project Structure​

The standalone-client.zip file contains the frontend source code for Investra. Extract this file before beginning the deployment process.

Prerequisites​

Make sure you have the following installed:

  • Node.js (v18 or later recommended)
  • npm
  • Git (for GitHub method)
  • Vercel account (https://vercel.com)
  • Vercel CLI (for CLI method)

Installation Methods​

You can deploy the Investra web on Vercel using two methods:

  1. Using the Vercel CLI
  2. Using the GitHub integration

1. Deploy Using Vercel CLI​

Follow the steps below:

Step 1: Extract and Navigate​

Extract the standalone-client.zip file and open the terminal in that directory.

Step 2: Install Dependencies​

npm install --force

Step 3: Build the Project​

npm run build

Step 4: Edit vercel.json​

Open the vercel.json file and update the name and framework fields:

{
  "env": {
    "NEXT_PUBLIC_API_URL": "https://your-backend-url.com/api/v1",
    "NEXT_PUBLIC_ASSET_URL": "https://your-backend-url.com",
    "NEXT_PUBLIC_TOKEN_NAME": "token"
  },
  "build": {
    "env": {
      "NEXT_PUBLIC_API_URL": "https://your-backend-url.com/api/v1",
      "NEXT_PUBLIC_ASSET_URL": "https://your-backend-url.com",
      "NEXT_PUBLIC_TOKEN_NAME": "token"
    }
  }
}

Step 5: Deploy to Vercel​

vercel login

After logging in, run the following command to deploy the project:

vercel deploy

2. Deploy Using GitHub​

Follow the steps below:

Step 1: Extract and Navigate​

Extract the client.zip file and open the terminal in that directory.

Step 2: Install Dependencies​

npm install --force

Step 3: Create a GitHub Repository​

Go to GitHub and create a new repository.

github1

Enter a name for the repository and click "Create Repository".

github2

Now you will see a new repository in your GitHub account and copy the repository URL.

Step 4: Initialize Git​

git init

Step 5: Add and Commit Files​

git add .
git commit -m "Initial commit"

Step 6: Add Remote Repository URL​

git remote add origin https://github.com/username/investra.git

Step 7: Push to GitHub​

git push -u origin main

Step 8: Connect to Vercel​

  1. Login to Vercel and create a new project.

vercel1

  1. Connect the GitHub repository to Vercel.

vercel2

  1. Deploy the project.

vercel3

  1. As you can see the project is deploying.

vercel4

  1. After the deployment is complete, add the env variables.
NEXT_PUBLIC_API_URL=https://your-backend-url.com
NEXT_PUBLIC_ASSET_URL=https://invadmin.softivus.com
NEXT_PUBLIC_TOKEN_NAME=token

vercel5

  1. Now add your domain name.

vercel6

Enter your domain name.

vercel7

If all the steps are successful then your project is deployed successfully. And you can access your project from your domain name.

Conclusion​

Congratulations! You have successfully deployed Investra web on Vercel. If you have any questions, please contact our support team.