PickBazar Documentation
WelcomeHow It Works
Prerequisite
Installation
Windows InstallationLinux & MAC InstallationFor MAC and Linux(with sail and docker)Getting Started with FrontendAvailable CLI commandCommon How to use
Available Scripts & Command
How Can I use this app
Demo Deploy
Features
Settings
Payment
Flash Sale
Shop Transfer
Social LoginOTP (Mobile Number Verification)WalletEmail ConfigurationEmail VerificationSubscribeTerms and conditions
SEO and Analytics
Refund
Real-time Notification
Multilingual & Translation
Third-party Integrations
Deployment
API
Back-End Integration
Customizations
Update & Upgrade Guide
FAQ PageContactQuestion & AnswerFAQBreaking ChangesSupportChange Log

For MAC and Linux(with sail and docker)

There is an alternate installation procedure for linux and mac. You can follow below procedure to getting started with sail

Prerequisites

  • Docker

    NB: Move pickbazar-laravel folder from Pickbazar Laravel - React Next Rest & GraphQL Ecommerce With Multivendor folder

Installation Video

REST API

Follow this tutorial for install REST API

GraphQL API

Follow this tutorial for install GraphQL

  • Run Docker application first
  • Now go to your pickbazar-laravel root directory and run bash install.sh. It will guide you through some process. Follow those steps carefully and your app will be up and running
  • Navigate to api then sail down to stop the container. If you want to remove the volumes then sail down -v

NB: your frontend NEXT_PUBLIC_GRAPHQL_API_ENDPOINT env value will be localhost/graphql

NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT env value will be localhost/

For details api doc and requirements details you can go to Laravel API

Getting Started with Frontend

  1. After configuring API & running it successfully you can choose the directory where you need to work

NOTE: only for windows user ( if you want to use GraphQL version)

- Go to your specific project root and find `.graphql-let.yml`.
- To find the file go to `admin` => `graphql` => `.graphql-let-yml`
- Replace the env variable `${NEXT_PUBLIC_GRAPHQL_API_ENDPOINT}` in schema field manually
- Provide your API url in the schema field.
"schema: ${NEXT_PUBLIC_GRAPHQL_API_ENDPOINT}",
to
"schema: https://localhost:8000/graphql",
- Also change the dev command at `package.json`
- Go to `shop/package.json` file and change the scripts:
"codegen": "node -r dotenv/config $(yarn bin)/graphql-let",
to
"codegen": "graphql-let",

Below are the directories where you will choose to work for frontend stuffs

# For Admin GraphQL
cd admin/graphql
# For Admin REST
cd admin/rest
# For Shop GraphQL or REST
cd shop

After choosing your working directory Go to specific folder and rename the .env.template => .env and put your api endpoint here. You will find .env.template file at the root of your admin/{chosen-directory-name} or shop

  1. Run yarn at the root directory.
# on pickbazar/root directory
yarn
  1. Scripts To Run the fronted App

For Admin :

For starting the admin dashboard part with corresponding api data run below commands.

  • using workspace (At the root of the pickbazar directory, you can run the below commands)
# for dev mode run below command
# GraphQL
yarn dev:admin-gql
# REST
yarn dev:admin-rest

frontend script

  • without workspace(if you want to run the command within specific project root of admin/{chosen-directory-name})
# for dev mode run below command
# GraphQL
yarn dev
# REST
yarn dev

This command will run the app in development mode. Open the suggested url in your terminal. like => http://localhost:3000 .

Note:

  • The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.
  • If you saw any error while running make Sure you setup your API endpoint properly at .env file.

For Shop :

Shop config

From v4.0.0, we changed the structure of the shop directory. So if you're using v4.0.0 or later, then you've to do a little bit of customization of the shop directory.

At first open pickbazar -> shop,

  • For REST, copy tsconfig.rest.json content to tsconfig.json or
  • For GraphQL copy tsconfig.graphql.json content to tsconfig.json

Then open pickbazar -> shop -> .env and change FRAMEWORK_PROVIDER to rest for REST installation or graphql for Graphql Installation.

Then to starting the shop part with corresponding api run below commands.

  • using workspace (At the root of the pickbazar directory, you can run the below commands)
# for dev mode run below command
# GraphQL
yarn dev:shop-gql
# REST
yarn dev:shop-rest

shop script

  • without workspace(if you want to run the command within specific project root of shop)
# for dev mode run below command
# GraphQL
yarn dev
# REST
yarn dev

If you want to test your production build admin or shop in local environment then run the below commands.

Admin (At the root of the pickbazar directory, you can run the below commands)

# build admin for production
yarn build:admin-gql
#start admin in production mode
yarn start:admin-gql

Shop (At the root of the pickbazar directory, you can run the below commands)

# build shop for production
yarn build:shop-gql
# start shop in production mode
yarn start:shop-gql

build1 build2 start

Note : Please see package.json file for other builtin helper commands.

  1. For development purpose we use yarn workspace if you want to use it then see the package.json file at root, for various workspace specific command.
  • if you prefer single template then just copy the required template folder and separate them. you'll find their package.json file within them and follow the command for dev, build, start.
  1. For further development & customization check our Frontend Customization guide.

Available CLI command

We provide some CLI command for developer file easy. Please visit this link