logo

Quickstart

To run react project you will need couple thing to setup first, Install Node version v20.18.2(LTS). if you already not installed. download from Here

We will start from backend configuration, as backend is included both admin and store template. So if you are purchased only admin then follow the backend and admin part. And if only store template then only backend and store part. And if from CodeCanyon then follow whole configuration.

Project Configuration

  • After downloading the template, unzip it
  • Open the VS Code Terminal/System Terminal
  • Go to the folder (backend): (cd path/to/template)
  • Run: npm install, it will install all used packages for this backend. If you see any vulnerability in packages run npm audit fix, it will fix/update all packages.
  • Make sure that there is no error.

After the npm packages are installed, make sure that you have a package.json file and check that you have the below lines under the scripts.

"scripts": {
        "dev": "nodemon api/index.js",
        "start": "node api/index.js",
        "production": "NODE_ENV=production nodemon api/index.js",
        "test": "echo \"Error: no test specified\" && exit 1",
        "data:import": "node script/seed.js",
        "product": "node script/product.js"
        }
  • Rename .env.example to .env
  • Configure your MongoDB database. Watch this video on MongoDB . After configuring, you will find a MongoDB URI. Put that URI in the MONGO_URI variable in your .env file.
  • The JWT_SECRET is a random value used for creating a secret token. You can use any value, but make sure it remains secret.

Note for custom sign up/login configuration: Using default gmail smtp server not recommended by google, Check This. In our current version we are using Next-Auth for sign up and sign in. If you still want to use any SMTP server, please use paid SMTP service, like Mailgun, sendGrid etc . Also will need to customize current process accordingly. But we will recommended to use Next-Auth.

  • You need an email and app password for email verification and the "forget password" option, also invoice sent to customer email. Use an email address that you want to send messages from when users register or request to reset their password. We used Nodemailer and the default email server for this, you can check app password after added 2FA on google, from Here. Click on the Create and manage your app passwords and follow the process for creating new 16digit app password. Also you can Watch this video to create an App Password for your email. After that, put your email in the EMAIL_USER variable and the app password in the EMAIL_PASS variable in your .env file. Also, make sure you allow less secure apps to be ON and set up CAPTCHA for production environment. See this documentation for more details. Doc
  • When you run on live server/production use Admin and Store live URL for STORE_URL and ADMIN_URL variables. And When you run on the local server, use http://localhost:3000 and http://localhost:4000.

After configuration you .env file will look like this

  PORT=5055
  # for mongodb password, please don't use any special character as mongodb not supported that
  MONGO_URI=your mongodb url
  JWT_SECRET=alamsfdfsdsdfsdfsdfsdfsdfsdrafdar!@#$0fddlfjdfdfdssfds
  JWT_SECRET_FOR_VERIFY=lfjfjasjfsdfsfr09ri09wfsdfsdfrilfdjdj
                  
  STRIPE_KEY=your Secret key
  MAX_AMOUNT=5000.0
  MIN_AMOUNT =10.0
  AMOUNT_STEP =5.0
  CURRENCY=usd
  STRIPE_PAYMENT_DESCRIPTION="This is Kachabazar payment with Stripe!"
  
  # if you want to use gmail/email sent for email verfication or forget password then bellow .env file 
  # need to configure otherwise no need to configure. As per the google they not recomaned to use app password 
  # https://support.google.com/accounts/answer/185833?hl=en, so you can use paid smpt service or use current next auth.
  
  SERVICE=gmail
  EMAIL_USER=your email
  EMAIL_PASS=your 16 digit email app password
  HOST=smtp.gmail.com
  EMAIL_PORT=465
  
  //when in local mode use this, and in production/live server you will need to use live admin and store url
  STORE_URL=http://localhost:3000
  ADMIN_URL=http://localhost:4000


# you must need to add this 32digit hex random key in both admin and backend same key, otherwish roles based will not work. 
# you can generate by this command, or use the bellow one as it is
# openssl rand -hex 32

ENCRYPT_PASSWORD=856305f1a5b7ba87b8448e69b3bb7a4631c23f0afa2ca5331fa1373f7e372345

Next Auth Configuration

Configure only those providers clientId and clientSecret, which you want to use, other don't need to add.

We are using Next-Auth for register and login user. Currently we are using Google, Facebook and Github login. You can use any other providers from Here . We will show Google, Facebook and Github Provider configuration here.

  • First Go to google developer console and watch this Video for creating New Project and oAuth Client ID to get the clientId and clientSecret for Google. Also you have to add local and live url with redirect url in Javascripts Origin and Authoried redirect Url section. Check the Screenshot.
  • To get Github clientId and clientSecret, go to github setting, scroll down and click on Developer Settings then click OAuth Apps then click Register a new app button to create new app with necessay information, like this Screenshot.

As Github only support one redirect url, so when you develope on local add local redirect url and when live use live redirect url in Authorization callback URL.

  • To get Facebook clientId and clientSecret, Watch this Video and create new App, configure redirect url and other options like bellow Screenshots.
  • Screenshot One

Stripe Configuration

If you purchased store template and want to use Stripe only then configure this otherwish omit this configuration.

  • To get Stripe secrets watch this Video.

RazorPay Configuration

If you purchased store template and want to use RazorPay only then configure this otherwish omit this configuration.

  • To get Razarpay secrets watch this Video.

Goggle Analytics Configuration

If you purchased store template and want to use Goggle Analytics only then configure this otherwish omit this configuration.

  • To get Goggle Analytics key watch this Video and this Video.

Tawk Chat Configuration

If you purchased store template and want to use Tawk Chat only then configure this otherwish omit this configuration.

  • To get Tawk Chat secrets watch this Video.

Now you will need to add all clientId and clientSecret and all others secrets/keys in setting.js file(utils/settins.js), storeSetting sections, in here Screenshot

Importing Demo Data

Once you successfully connect with MongoDB and configure the .env file, run npm run data:import. It will execute the seed.js (script/seed.js) file and import all demo data into the database. Make sure to change the demo data in the utils folder according to your needs. If everything is okay, the backend configuration is done, and you will find all the demo data in your MongoDB database, also in admin and store.

Running the Backend

Now run npm run dev to start your backend on the local server with PORT 5055 or the PORT you have specified.

Was this page helpful?