Setting up the project

Project Contents

You will receive a bundle.zip file on download. It will have 3 folders

  1. webapp - This contains the source code for frontend and UI of the system
  2. server-api - This contains the source code for backend based on express js and firebase
  3. Database - Firebase DB Dump required for initial setup
  4. Documentation.rtf (Contains the links to the Demo website and its documentation)

Credentials Required

  1. A Gmail account required for firebase setup.
  2. SMTP Credentials for email setup
  3. Twilio Account for SMS Setup

System Requirements

  1. Node.js version - 10.x.x
  2. wkhtmltopdf should be installed on your system. You can download and install it from this link

Before proceeding Extract the bundle.zip folder. (Note -> If you copy the files from extracted folder, Do remember to copy the hidden files like .babelrc etc in app folder. Else you might face issues while starting the project.)

Setting up Firebase

  1. Setup the the project in firebase by following instructions at this link.

  2. Go to the project you created in firebase console.

  3. From the left sidebar - Click on the Database Link and then click on Get Started under Realtime database

  4. Importing the initial database - Click on 3 dots icon as shown in below screenshot and Click on Import JSON and select the file under Database/import.json to import the basic data into the system. Also note down the database url as pointed.

     

  5. Enable Firebase Storage by clicking Storage Menu on Left Sidebar. This is neccesary to enable file uploads and backups.

  6. Enable Firebase Email/Password Authentication by clicking Authentication Menu on Left Sidebar and then Click on Sign In Method.

Backend Setup

  1. Go to server-api folder
  2. Run npm install to install dependencies.

  3. Configuring firebase on backend using environment variables:

    1. Go to the firebase console, Click on settings icon in the sidebar on top and go to Users and Permissions
    2. Click on Service Accounts Tab and Go to Firebase Admin SDK and Click on Generate New Private Key. It will download a json file.
    3. Open the json file and copy all content. Go to this Link and minify json string and copy it to someplace on your system from the output box.
    4. Go to the firebase console, Click on settings icon in the sidebar on top and go to Project Settings
    5. Click on Add App -> Select Web -> Copy the object under firebase config. Go to this Link and minify json string and copy it to someplace on your system from the output box.
    6. You can perform either of below ways to export the values in step 4 and step 5 as environment variables. We minified json in  step 5,6 order to properly export them as environment variables.

      1. Create a .env file in server-api folder and create 2 lines.

        FIREBASE_ADMIN_CONFIG=<Copied Value from Step 5>
FIREBASE_CONFIG=<Copied Value from Step 6>
DATABASE_URL=<Copied Value from Step 4>

         

      2. OR you can export 2 environment variables as below using terminal or command prompt on your system or via .env file. For guide on how to set environment variables, Check this link.

        FIREBASE_ADMIN_CONFIG=<Copied Value from Step 5>
FIREBASE_CONFIG=<Copied Value from Step 6>
DATABASE_URL=<Copied Value from Step 4>
      3. If you are hosting on some cloud provider like heroku or aws, you may even use their options to set environment variables.
  4. Run the server using command npm start. Server will run at port 8080 by default in development mode and is accessible at http://localhost:8080 in case of local system.

Frontend Setup

  1. Go to webapp folder
  2. Run npm install to install dependencies.
  3. Optional - In a non-local environment i,e you are running on some online server, Set SERVER environment variable as the URL of the Backend without any forward slash via either of 2 ways as below : 
    1. Create a .env file in server-api folder as below. 
      SERVER=<BACKEND URL OF SERVER API>
BASE_NAME_URL=<Set if deploying on a relative path via reverse proxy like nginx>
    2. OR you can export as environment variable as below using terminal or command prompt on your system. For guide on how to set environment variables, Check this link. 
      SERVER=<BACKEND URL OF SERVER API>
    3. If you are hosting on some cloud provider like heroku or aws, you may even use their options to set environment variables.
  4. Run the server using command npm start. Webapp will run at port 3000 by default in development mode.
  5. You can access the webapp at http://localhost:3000

If you still face any issues in setting up the projects, contact us, and we will get back to you as soon as possible.

Deploying to Production

You can create the builds for both backend and frontend and deploy to your production server. Both will be built as a simple nodejs code which can be ran on production using npm start

  1. Build Backend - Go to server-api and run npm run build. The build is present under dist folder.
  2. Export the environment variables FIREBASE_ADMIN_CONFIG and FIREBASE_CONFIG and DATABAE_URL as explained above or create a .env file inside dist folder.
  3. Before Running the frontend, Set the environment variable SERVER= on your production server using any of ways as explained in above setup.
  4. Build Frontend - Go to webapp and run npm run build.The build is present under build folder.
  5. This build are simple nodejs builds and can be run on any server with nodejs installed using the command  NODE_ENV=production npm start
  6. These builds are by default compatible with deployment on popular cloud providers like AWS, Heroku, Digital Ocean etc.

Configuring System from Admin

  1. Go to the webapp url http://localhost:3000 or the production url and login using admin credentials. Default admin credentials are : Email - [email protected] Password - 123456

  2. Go to Configuration from left sidebar. This screen allows you to customize various configurations like currency, api credentials etc used across the system. Configure different credentials in below steps on this screen.

  3. Edit the API_HOST Property to point to the URL of the backend api url ( http://localhost:8080 or the production backend url). This is done to support storage links

  4. Edit the HOST Property to point to the URL of the frontend webapp ( http://localhost:3000 or the production frontend url). This is done to support email links.

  5. Setup Email

    1. Follow steps at this link. This step is neccesary to enable system to send out emails.
    2. Configure following SMTP Credentials to enable emails in the configuration screen.
      Configuration Key Configuration Value
      NODEMAILER_SECURE SSL Status for SMTP(true/false)
      NODEMAILER_PORT Port for SMTP
      NODEMAILER_HOST Host or IP for SMTP Server
      NODEMAILER_PASS Password for SMTP Server
      NODEMAILER_USER Username for SMTP Server

       

  6. Setup Payment Gateways

    1. You can configure Payment Gateways under Payment Gateways Menu in left sidebar to enable payments properly.

    2. For getting api key and secrets, checkout the links below

    3. Stripe

    4. Razorpay Getting API Key

    5. Paypal

Published On November 5, 2022 8:17 PM

Last Updated March 3, 2023 10:33 PM