Skip to content

Steps to deploy your own e commerce app without coding using AngadiWeb

Jump to bottom
Bharath Chandra edited this page Jan 26, 2021 · 1 revision

Getting Started

This is a detailed step by step instruction guide to setup your own e-commerce site running without any changes in the code ( except some changes in the config files ). Prerequisites are necessary to setup your app locally, then follow the deployment steps to deployment.

Prerequisites Steps

  • Install Git and Node js
  • Lanuch the terminal or powershell in admin mode and run the commands below.
  • npm 
    npm install npm@latest -g
  • Firebase tools 
    npm install -g firebase-tools

Steps to Deployment

  1. Select the project location and launch the terminal / powershell. Clone the repo

    git clone https://github.com/E-Angadi/AngadiWeb.git

  2. Install NPM packages

    npm install

  3. Open firebase console with your Google account logged in and create a new project. Upgrade the project plan from spark to blaze by setting up your billing account. follow the instructions here.

  4. Hit on the firestore tab in the left drawer in the firebase console and create the firestore database with security rules in test mode. Follow this guide.

  5. Similarly, setup Authentication with Email/Password and Anonymous mode enabled. Also setup functions and storage with no changes made.

  6. Click on the web icon in project overview and create a web project with hosting enabled. and copy the Firebase SDK snippet in config mode from project settings. Replace these configs with the dummy ones below in src/config/firebaseConfig.js

     export var firebaseConfig = {
   apiKey: "AIzaSyAXvJpxppxmWraxxxxxxxxxx",
   authDomain: "yourconfigs.firebaseapp.com",
   projectId: "yourconfigs",
   storageBucket: "yourconfigs.appspot.com",
   messagingSenderId: "217752987550",
   appId: "1:111111111111:web:111111111111111111",
 };

  7. Create a Razorpay account and generate the key_id and key_secret in test mode. Follow the guide here. Paste this key_id in src/config/configs.js and both the keys in functions/config.js

  8. Create a Algolia account and create a index with name products(Case Sensitive). Generate the API keys. Copy the app_id and search only key and paste it in the src/config/configs.js file. Copy the app id and admin key and paste them in the functions/config.js. Go through the steps in algolia, setup your search parameters as title, description such that, user can search over these two values only. You can adjust other search terms even after adding the products. Now your products data will be in sync with algolia data.

  9. Complete the remaining changes with src/config/configs.js file like colors, title, description, etc.

  10. Replace the public/imgs/logo.png with your logo and if possible public/favicon.ico with your favicon

  11. Move to the terminal / powershell, run the command below. Allow the firebase CLI to access your project

    firebase login

  12. Initialize firebase, select the options

    • Use existing project
    • Select your project (Which you created in step 3)
    • Select firestore, functions and hosting
    • Don't override any files
    • Use JavaScript as language in functions and use Eslint
    • Install firebase functions dependencies
    • Yes for Single Page Application (SPA)
    • Use build as public dist
    firebase init

  13. Create your Admin Account

    • Open the Authentication tab in your firebase console and click on the Add user button. Enter your admin email and password and hit on Add user button.
    • You can witness a user added in the list, copy the User UID of the account you just created from the list.
    • Open the Firestore tab in your console and click on Start Collection button, enter users in the Collection ID field and click on next.
    • Paste the UID of the user you just created as Document ID, add the feilds below with exact name, type and values. and hit the save button.
      • isAdmin - boolean - true
      • isGuest - boolean - false
      • pincode - number - 0
      • cart - string - (leave empty)
      • delivery - string - (leave empty)
      • name - string - (your name)
      • pNum - string - (your phone number)

  14. To test your application, run the command below in the terminal / powershell. open http://localhost:3000/ in your browser.

    npm start

  15. open Sign In page from header or http://localhost:3000/signin and enter your admin email address and password to signin. Open your dashboard at http://localhost:3000/dashboard. Open the Locations tab in the dashboard and add few deliverable locations pincode. Now open the home page and check the colors and logo.

  16. Run the command below to deploy firebase functions which are essential for payments. copy functions url obtained after successully deploying functions. Paste that URL in src/config/configs.js file as value of functionsURL field.

    firebase deploy --only functions

  17. Build the application running the command below. This will create a production code in build folder

    npm run-script build

  18. Run the command below to host your site. you will obtain the hosted site URL after successfully hosting site. You can get the same link in the hosting tab of your firebase console.

    firebase deploy --only hosting

  19. Run the command below to enforce security and indexes

    firebase deploy --only firestore:rules
firebase deploy --only firestore:indexes

  20. Open the hosted site after 10-15 mins, signin with your admin email address and password. Add few categories and products as explained in the Usage Section.

  21. Now test the application by placing an order by adding few products into the cart with admin account and normal account. You should see those placed orders in your dashboard. You should also see payment received in your razorpay dashboard.

  22. If step 20 is successful and if your razorpay verification process is completed before, generate the key_id and key_secret in live mode and replace those with test mode keys which we placed in step 7. Also setup the payment capturing setting in your razorpay dashboard if need for your bussiness.

  23. Now build the project again as explained in step 16 and host it as explained in step 17. Your Deployment is successful.

NOTE: some common errors which we encounter while firebase deployment can be resolved by logging out and logging in again by using below commands

firebase logout

and then

firebase login
Clone this wiki locally