⚡Installation
This installation will hardly take less than 60 mins of your time, so, follow the steps one by one slowly without skipping anything to avoid any issues✌🏻
There are a few things you need to install on your pc before going through the installation procedure. Those are listed below;
Node installed ( Latest version recommended)
Terminal
Text editor (vs code recommended)
Step 1 - Extracting The Downloaded Folder
First things first, once you purchased Fabyoh, download the Fabyoh script from codecanyon, and extract the downloaded zip file on your PC in any folder, after extracting you will get a fabyoh vxxx folder.
You will find 3 folders (admin, client, backend) Inside the fabyoh vxxx” folder.
Step 2 - NPM Install
Now it's time to install the required dependencies on all three folders (admin, client, backend).
To do this, open the fabyoh vxxx folder on your preferred terminal.
Then, go to the “admin” folder via the terminal and run “npm install” to install node_modules, once it’s installed, run “npm audit fix”.
Then, go to the “client” folder via the terminal and run “npm install” to install node_modules, once it’s installed, run “npm audit fix”.
Then, go to the “backend” folder via the terminal and run “npm install” to install node_modules, once it’s installed, run “npm audit fix”.
Now you have successfully installed node_module for admin, client, and backend, we have completed half of the things, don't start the server now, configure the remaining things first.
Step 3 - Env Configuration
You will find the .env or .env.local file in each folder (admin, client, backend), open it in your preferred editor and replace the field with your details.
Admin Env Configuration:
NEXT_PUBLIC_BACKEND_URL: By default, the fabyoh backend server runs on port 5000, so don’t change this value “http://localhost:5000/”, if you want to switch to a different port, you can change it in the backend’s “server.js” file and update it here. (*required)
NEXT_PUBLIC_API_URL: Change this value only when you switched to a different server. (*required)
NEXT_PUBLIC_GRAPHQL_URL: Change this value only when you switched to a different server. (*required)
NEXT_PUBLIC_CLIENT_URL: Replace with your store url
NEXT_PUBLIC_SITE_NAME: Enter your store name
NEXT_PUBLIC_JWT_SECRET: Enter any lengthier mambo jumbo sentence or use any online tool to generate ( should be same as backend env JWT token)
Client Env Configuration:
NEXT_PUBLIC_BACKEND_URL: By default, the fabyoh backend server runs on port 5000, so don’t change this value “http://localhost:5000/”, if you want to switch to a different port, you can change it in the backend’s “server.js” file and update it here. (*required)
NEXT_PUBLIC_API_URL: Change this value only when you switched to a different server. (*required)
NEXT_PUBLIC_GRAPHQL_URL: Change this value only when you switched to a different server. (*required)
NEXT_PUBLIC_CLIENT_URL: By default fabyoh, the client (store) runs on port 3000, don’t change this value. (*required)
NEXT_PUBLIC_CLIENT_WEBSITE_DESC: Enter a short description of your store.
NEXT_PUBLIC_SITE_NAME: Enter your store name
NEXT_PUBLIC_CLIENT_SOCIAL_SUPPORT: Enter your store's social media URL.
NEXT_PUBLIC_GOOGLE_ANALYTICS: Enter your website’s google analytics tracking code/link here to enable analytics for your website. (Only required when your store is live on the internet).
NEXT_PUBLIC_JWT_SECRET: Enter any lengthier mambo jumbo sentence or use any online tool to generate ( should be same as backend env JWT token)
NEXT_PUBLIC_TIDIO_CHAT: Replace “YOUR TIDIO LIVE CHAT URL” with your tidio javascript code.
NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION: Replace “YOUR GOOGLE SITE VERIFICATION CONTENT” with your google console verification code.
NEXT_PUBLIC_PAYPAL_URL: Replace “YOUR PAYPAL PAYMENT GATEWAY URL” with your PayPal javascript SDK link. Eg: <script src="https://www.paypal.com/sdk/js?client-id=<YOUR_CLIENT_ID>¤cy=USD&disable-funding=credit,card"></script>
(Client id will be found in your PayPal developers account) (Required for a PayPal payment gateway to work)
NEXT_PUBLIC_STRIPE_KEY: Enter your stripe public key, create a stripe account and get the public key (Required for a Stripe payment gateway to work)
NEXT_PUBLIC_RAZORPAY_KEY_ID: Enter Razorpay key id, create a Razorpay account, and get the key id. (Required for a Razorpay payment gateway to work)
Backend Env Configuration:
MONGO_URL: Enter your MongoDB connection string, it will look like this “mongodb+srv://dummy:hello123@cluster0.pfose.mongodb.net/your-database-name?retryWrites=true&w=majority”, (Don’t forget to enter “database name” in the connection string, otherwise, it will create default database name “test” (*required)
BACKEND_URL: By default, the fabyoh backend server runs on port 5000, so don’t change this value “http://localhost:5000/”, if you want to switch to a different port, you can change it in the backend’s “server.js” file and update here (*required)
CLIENT_URL1: Store url, leave this field as it is (*required)
CLIENT_URL2: Admin panel url, leave this field as it is (*required)
SITENAME: Enter your store name.
JWT_ACCESS_TOKEN_SECRET: Enter any lengthier mambo jumbo sentence or use any online tool to generate ( should be same as a client and admin env JWT token)
JWT_RESET_PASSWORD_SECRET: Enter any lengthier mambo jumbo sentence or use any online tool to generate.
STRIPE_SECRET_KEY: Enter your stripe secret key, create a stripe account and get the secret key (Required for a Stripe payment gateway to work)
RAZORPAY_KEY_ID: Enter Razorpay key id, create a Razorpay account, and get the key id. (Required for a Razorpay payment gateway to work)
RAZORPAY_SECRET: Enter Razorpay secret, create a Razorpay account, and get the secret key. (Required for a Razorpay payment gateway to work).
GOOGLE_CLIENT_ID: Create an application in the google cloud console to get a google client id ( Required for Google login to work)
GOOGLE_CLIENT_SECRET: Create an application in the google cloud console to get a google client secret ( Required for Google login to work)
SIB_SENDER_EMAIL: Create an account in the Sendinblue email marketing provider (It’s free) and enter your sender email here. (Required for sending any emails such as order creation emails and more from your store)
SIB_API_KEY: Create an account in the Sendinblue email marketing provider (It’s free) and enter your Sendinblue api key here. (Required for sending any emails such as order creation emails and more from your store)
It's recommended to leave other fields as it is! Env configurations are done!
For sending transactional emails, you have to create the email templates first on your sendinblue account and then you can connect using template ids.
Step 4 - Starting The Server
Now, navigate to “backend” in your terminal and start the server by running nodemon server.js
If you don't have nodemon installed on your pc, then start the server using node server.js
Once, it’s connected successfully, you will see “Mongodb DB Connected Successfully”.
Now, open your admin folder on your terminal and start the server by running npm run dev
Then, open your client folder on your terminal and start the server by running an npm run dev
Then, create a super admin for your store by going to http://localhost:3001/login, enter the email and password you like to create the super admin account, you can change the password later.
Step 5 - Playing Around
It's time to play around, you have completed the configuration and created the super admin account.
Now, you can create products, and tweak the admin panel to change the header, footer, homepage layout, change site settings, and more.
Before creating products, add product categories & card types first by going to the admin panel.
We wish you success in your business and once again thanks for purchasing Fabyoh ❤️
Last updated
