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 application
• Deployed your first shop inside PlentyONE

Before you begin, you need a 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 application repository.

Fork

We recommend working with a fork of the app 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 application

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

Input	Value
Application name	Display name of the app in PlentyONE
Select client	Client to connect to the app
Select app 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 application

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

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 application 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 de or 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 app

To start the development server run the following command:

npm run dev

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

Deployment

Activate preview

This step builds your application 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 ▶️ Build and activate application.

The build process downloads your GitHub repository, using the Personal Access Token you provided during setup. If the build is successful, the application 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 application 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 application running, you can begin customizing 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.