Getting Started with PrestaShop Next.Js Storefront

Let's get started with the Next.js / React.js storefront integrated with PrestaShop platform.

Custom Integration

If you want to integrate the storefront into other platforms and E-Commerce API, you can check the Custom Integration section.

Requirements

• NPM/Yarn/pnpm installed
• Node.js version 18.17 and higher

Starting a new project

This section is intended for those who want to set up the project for production or development. If you just want to see a quick demo check this section.

You already have a PrestaShop website

1. First you need to expose PrestaShop REST API endpoints. Download and install PrestaShop REST API just like any other PrestaShop module. (no additional configurations needed)
2. Clone the React storefront repository:

git clone git@github.com:binshops/react-storefront.git

3. Change the API endpoint by opening the .env file and modifying the base URL::

NEXT_PUBLIC_API_BASE_URL='https://rest.binshops.com/rest'

4. CD to the cloned directory and install dependencies:

npm install
# or
yarn install

5. Then, run the project:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Handling CORS

Be sure that you have used the REST API module for storefront, because it handles CORS. If you see this error in your console, it's normal, read this section to know more why we get this.

You want to set it up from scratch

First, you need to install the PrestaShop open-source PHP e-commerce platform. You have two options for installing the stack:

• Install using docker compose: https://github.com/binshops/e-commerce-docker-compose
• Install using the zip file:
  • You need to set up the LAMP stack on your system, or a shared host
  • Download PrestaShop zip file from GitHub
  • Unzip the zip file into your webserver root directory and proceed with installation
• Once you installed the PrestaShop follow the above steps to run the storefront.

Need more help?

If you need more help you can read the following articles that shows how you can set up a fresh PrestaShop installation:

• How to install PrestaShop
• Getting started with PrestaShop
• Step by step PrestaShop installation on shared host
• Need community help to install PrestaShop back-end? join the PrestaShop Slack channel and get help.

Info

If you just want to see a demo and experience how smooth the storefront is, you can set the demo up on your local machine.

Demo the project

Demo quickly the project locally by following these steps:

1. Clone the React storefront repository:

git clone git@github.com:binshops/react-storefront.git

2. CD to the cloned directory and install dependencies:

npm install
# or
yarn install

3. CD to the cloned directory and run:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

4. Now you can reach the demo at localhost:8000. The storefront has been configured to use the demo API to populate the data.