With Front-Commerce comes a CLI tool ("front-commerce") that helps you launch the tasks needed to develop, build and launch your application. This reference documentation explains how to use it in a project.
These commands should be launched from your project's root directory. This can be done by:
- Using npm scripts (just like front-commerce-skeleton/package.json)
- Prefixing the commands with
npxwhich will call the
front-commercebin in your project
Displays a message referencing the different commands available.
This command ensures that your project is correctly linted. This means that it will:
- format your code with prettier
- prevent errors by using eslint rules
In order to configure the rules, please refer to the
eslintConfig key in your
A basic config could be :
"extends": ["eslint:recommended", "react-app"],
"plugins": ["prettier", "security"],
"allow": ["warn", "error"]
The files linted are the files within the modules you have defined in
.front-commerce.js. However, the
modules that are in
node_modules won't be linted.
Please note that the errors and warnings that this tool will log are also
displayed when using
front-commerce start in development mode. The
front-commerce lint command is mainly useful when you want to ensure that your
code is correctly linted before committing it to your repository.
This command will generate all the files needed to launch a Front-Commerce
application. It will use the
.front-commerce.js configuration file
to know what to generate.
The generated files will be located in the
.front-commerce folder in the root
of your project.
Before running this command, please make sure to run
This command will generate all the compiled files needed to launch your
application in a production environment. The generated files will be located in
build folder in the root of your project.
Once it is generated, you can launch the application by using
NODE_ENV=production front-commerce start.
This command will launch the Front-Commerce application. There are two modes available:
NODE_ENV=development front-commerce start: launches Front-Commerce application in development mode (hot reloading, linting, etc.). Please make sure to have launched
NODE_ENV=production front-commerce start: launches Front-Commerce application in production mode (using precompiled code). Please make sure to have launched
This command lets you view your Front-Commerce's components in Storybook.
There are two modes available:
NODE_ENV=development front-commerce styleguide: launches Storybook in development mode (hot reloading, linting, etc.).
NODE_ENV=production front-commerce styleguide: builds the assets of Storybook in
build/styleguide. The generated files could then be served on any hosting solution supporting static websites.
This command checks your translations and adds the missing one to
translations/[lang].json in the root of your application. See
Translate what's in your components
for more information.
If some translations are missing, the script will throw an error. This lets you ensure that everything is correctly translated in your CI.
--ignore-build: By default, this command will build your application to make sure that no translation is forgotten. However, if you've just run
front-commerce build, this step is not necessary.
--ignore-buildoption is what makes it possible not to build the application during the translation.
-m): scope translations to a specific module registered in your
.front-commerce.jsconfiguration file. Translation files will be written in the
/path/to/module/translationsdirectory instead of your application's one.
This command allows to launch tests using Jest already configured to work properly with a Front-Commerce codebase.
By default this command will launch all the tests available. These tests can be categorized in three scopes (which are jest projects internally):
server: it runs all the unit tests in
pact: it runs all the Pact tests in
server/**/__pacts__folders. Its specificity is that it boots a pact server that will allow you to mock interactions with external APIs. Its main usage is for testing loaders in GraphQL modules.
client: it runs all the tests in
web/**/__tests__folders. Its specificity is that it boots under a jsdom environment allowing you to use a mocked DOM environment. It is necessary to use when testing React components.
You can only parts of the tests by setting the scope when executing the command:
front-commerce test <scope>. If no scope is defined all the scopes will be
After the scope, you can use any Jest option. For instance if you want to run
the tests in watch mode, you should add
--watch at the end of your command.
If you are abstracting the
front-commerce CLI with
npm scripts, please note that you can
pass any option(s) to your npm script by using this syntax:
npm run test -- <option1> <option2>.
Codemods generally help with breaking changes, and code clean up. They are also used to migrate your codebase to the latest version of Front-Commerce.
|Outputs all the available options.|
|List all the available codemods|
|The type of codemod you would like to run|
|Do a dry run, this will not save the changes|
|Automatically answer yes to all questions|
|Force the codemod to run|
|Show more information about the transform process|