Quickstart

This guide will walk you through setting up your development environment for PlentyONE shop. Your development environment will be a minimum setup. To access all capabilities of the shop, you need to complete additional setup steps. For details, refer to the Next steps section at the end.

By the end of this guide, you will have:

• A running local shop
• Deployed your first shop inside PlentyONE

Before you begin, you need a PlentyONE system. If you don't have one yet, you can book a 30-day trial on our website.

GitHub setup

First, you'll prepare your code by creating a personal copy of the shop repository.

Fork

We recommend working with a fork of the shop repository. A fork allows you to easily incorporate updates from this boilerplate into your own codebase.

1. Create a fork.
2. Clone the forked repository.

⚠️ Repository visibility

GitHub forks are always publicy visible. If you want to maintain a private repository that's still connected to the main project, refer to our guide on update strategies.

GitHub PAT

Create a Personal Access Token with repo scope. You need this token to authenticate your repository in PlentyONE.

PlentyONE setup

Now that your GitHub repository is ready, you'll connect it to PlentyONE.

Create shop

1. Log into your PlentyONE system.
2. Go to Shop » Management.
3. Click on (➕) Add shop.
4. Enter the information according to the table below.
5. Click on Create.

Input	Value
Shop name	Display name of the shop in PlentyONE
Select client	Client to connect to the shop
Select shop source	GitHub Integration
GitHub HTTPS URL	URL of your repository
GitHub token	Your Personal Access Token
GitHub branch	Name of the branch you want to deploy, usually main

💡 Edit shop

You can edit shop details by opening the additional actions in the Actions column and clicking on 🖊️ Edit shop.

Retrieve API credentials

1. In the Actions column, open the additional actions.
2. Click on ℹ️ Display environment information.
3. In the Development environment section, click on Copy to clipboard.

You need the environment information to set up your local development environment. This information, including your API endpoint and security token, allows your local shop to communicate with your PlentyONE system.

Local development

Create environment

1. Open your project.
2. In the apps/web directory, create a .env file.
3. Paste the environment information into your .env file.
4. Add the default language of your shop, for example DEFAULTLANGUAGE='de' or DEFAULTLANGUAGE='en'.

Your environment file should look like this:

# apps/web/.env

API_ENDPOINT='https://my-shop.com'
API_SECURITY_TOKEN='ABC123'
CONFIG_ID='1'
FETCH_REMOTE_CONFIG='0'
DEFAULTLANGUAGE='de'

Install dependencies

The project uses Node.js. We recommend using the latest LTS version. Either download it from Node.js or follow the installation instructions below.

# Download and install the version manager fnm:
curl -o- https://fnm.vercel.app/install | bash

# Download and install Node.js:
fnm install

# Verify the Node.js version:
node -v

# Verify npm version:
npm -v

Run the following command in the project's root directory to install all necessary packages:

npm install

Start the shop

To start the development server run the following command:

npm run dev

The shop will be served with hot reload at localhost:3000.

Deployment

⚠️ SSL Certificate

To build and deploy a PlentyONE shop and to use the shop editor, you need a valid SSL certificate.

Activate preview

This step builds your shop and deploys it to a private preview URL. This allows you to review your changes and use the shop editor before making the site public.

1. Log into your PlentyONE system.
2. Go to Shop » Management.
3. Click on ▶️ Deploy the shop and activate preview mode.

The build process downloads your GitHub repository, using the Personal Access Token you provided during setup. If the build is successful, the shop becomes available on your client's domain in preview mode.

To access the preview and shop editor, click on (📏) Open editor.

Go live

For the go-live option to become available, the shop has to run in preview mode.

1. In the Actions column, open the additional actions.
2. Click on 👁️‍🗨️ Activate live mode.

Next steps

Once you have your shop running, you can begin customising it. Here are a few places to start:

• Theme customization: Customize the look and feel look and feel of your shop.
• Advanced PlentyONE setup: Complete the setup journey in PlentyONE to enable additional payment and shipping providers, bot protection, and more.
• Project updates: Learn about different strategies for managing updates from the main project.