Skip to main content
Version: 3.x

Installation

This guide will help you get started with Front-Commerce by installing it.

Preparation​

This guide will walk you through the steps to configure your system for installing Front-Commerce packages from our private npm package repository using a global .npmrc file.

Prerequisites​

caution

Front-Commerce is a closed source product. This documentation supposes that you have access to our private repositories.

Access is granted to teams that have signed the relevant legal contracts, either as a Partner, a Customer or for a Time-Limited Trial. Please contact us if you need help or further information.

Before you begin, ensure that you have the following:

Step 1: Create a Blackswift Gitlab Personal Access Token​

  1. Log in to your Blackswift Gitlab account.
  2. Navigate to your Profile and click on Access Tokens.
  3. Click on the Add new token button.
  4. Enter a name for your token and select the read_api scope.
  5. Click on the Create personal access token button.
  6. Copy the token value as you will need it in the next step.

Step 2: Create a .npmrc file​

  1. Create a .npmrc file on your system (see npm documentation for more information), with the following content:
~/.npmrc (for example)
//gitlab.blackswift.cloud/api/v4/projects/24/packages/npm/:_authToken=<your_token_value>
@front-commerce:registry=https://gitlab.blackswift.cloud/api/v4/projects/24/packages/npm/
  1. Replace <your_token_value> with the token value you copied in Step 1.

Conclusion​

Congratulations! You should now be able to install Front-Commerce packages. If you encounter any issues during the installation process or are looking for alternatives, please refer to the official Gitlab documentation or contact our support team for assistance.

Installation​

This is the recommended way to start a new Front-Commerce project.

  1. Open your terminal and run the following command (it uses pnpm, but you can use npx if you prefer):
NPM_CONFIG_LEGACY_PEER_DEPS=true pnpm dlx create-remix@latest hello-v3 --template https://new.front-commerce.app/ -y
  1. Wait for the installation process to complete and follow the prompts
  2. Create another .npmrc in the project root with the following content:
.npmrc
legacy-peer-deps=true
About NPM_CONFIG_LEGACY_PEER_DEPS

This option (or legacy-peer-deps=true in .npmrc) is currently required when using @front-commerce/compat. This is due to the Apollo version used in 2.x being incompatible with the latest version graphql versions used now.

When not using @front-commerce/compat, it is not required. We still have some usages in Front-Commerce core in the current stable version. Please bare with us!

Configure your project​

You must now configure your project to use Front-Commerce's extensions adapted to your context. Edit the front-commerce-config.ts file to configure your project, and create a .env file with essential configurations. Here are some examples:

Use Front-Commerce without any extension: only the default theme with static data. Useful for evaluation purposes, but quickly limited.

front-commerce.config.js
import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import storesConfig from "./app/config/stores";
import cacheConfig from "./app/config/caching";

export default defineConfig({
  extensions: [themeChocolatine()],
  stores: storesConfig,
  cache: cacheConfig,
  configuration: {
    providers: [],
  },
  v2_compat: {
    useApolloClientQueries: true,
    useFormsy: true,
  },
});

Finally, create a .env file with the following content:

.env
# Front-Commerce configuration
FRONT_COMMERCE_ENV=development
FRONT_COMMERCE_URL=http://localhost:4000
FRONT_COMMERCE_HOST=localhost
FRONT_COMMERCE_PORT=4000
FRONT_COMMERCE_COOKIE_PASS=cookie-secret
FRONT_COMMERCE_SITEMAP_TOKEN=sitemap-secret
FRONT_COMMERCE_CACHE_API_TOKEN=cache-api-secret

Start the application​

You should now be able to start the application without errors by running the dev command using your favorite package manager (we recommend pnpm):

pnpm dev

🎉 Congrats, you should now see this screen when opening http://localhost:4000/!

Front-Commerce&#39;s default home page screen