Store Launchpad for B2B Next.js Starter

ℹ️ Full documentation can be found Here

This is a commercetools Launchpad project that uses Next.js

Getting Started With Frontend:

1- Start the development environment

Running locally in development mode

yarn install
yarn dev

Building and deploying in production

yarn install
yarn build
yarn start

Running storybook

yarn storybook

Build a production storybook

yarn storybook:build

Running tests

yarn test

2- Create a basic component

export default function MyComponent(props) {
  return <h1>{props.headline}</h1>;
}

3- Create a tastic for your component

Under /packages/frontend/frontastic/tastics/{{MyComponent}}

• Create a schema.json

{
  "tasticType": "my-component",
  "name": "My Component",
  "icon": "favorite",
  "category": "Content",
  "schema": [
    {
      "name": "Basic Options",
      "fields": [
        {
          "label": "Headline",
          "field": "headline",
          "type": "string",
          "required": true
        }
      ]
    }
  ]
}

• Create an index.tsx

export default function MyComponentTastic(props) {
  return <MyComponent headline={props.data.headline} />;
}

You can find more about tastics Here

4- Register your tastic

Under /packages/frontend/frontastic/tastics/index.tsx

export const tastics = {
    ...
    'my-component': MyComponentTastic
}

5- Finally upload your component to studio

That's it.. Now you're all set and can start using your new component in any page you like!

---

Linting

This project uses linting rules that improve the Core Web Vitals of the storefront which are also the recommended rules by Next.js in addition to some other rules for react hooks, typescript, jest, etc...

If you want more fine-grained configuration, feel free to configure the eslint rules by deactivating and/or extending them in the .eslintrc.json in the frontend folder.

To run the linter, just run

yarn lint

To fix erros that can be automatically fixed, run

yarn lint:fix

We recommend to add linting directly to your code editor or development environment, to get immediate feedback.

Linting in vim

There are a variety of extensions that can add linting support to vim and Neovim. If you're using vim, we recommend either ALE or CoC and if you use Neovim you can use the integrated Language Server Protocol to run eslint_d in the background. Here's a handy guide on how to do that

Linting in Visual Studio Code

To integrate ESLint into Visual Studio Code, you will need to install the ESLint extension for Visual Studio Code. Search for ESLint in the Extensions tab and click Install once you have located the extension. Once ESLint is installed in Visual Studio Code, you’ll notice colorful underlining in your JS/TS files highlighting errors. These markers are color-coded based on severity. If you hover over your underlined code, you will see a message that explains the error to you.

Prettier / Code formatting

Prettier is integrated with the linter so when running yarn lint:fix you'll have your code auto formatted as well.

We also recommend to setup your editor to use prettier to format a document on save.