CLI
With Front-Commerce comes a CLI tool (front-commerce
) that helps you launch the tasks needed to develop, build and launch your application.
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
npx
which will call thefront-commerce
bin in your project
front-commerce help
Displays a message referencing the different commands available.
front-commerce lint
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 package.json
.
A basic config could be :
{
"extends": [
"eslint:recommended",
"react-app"
],
"plugins": [
"prettier",
"security"
],
"rules": {
"no-console": [
"warn",
{
"allow": [
"warn",
"error"
]
}
],
"prettier/prettier": "warn"
}
}
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. Thefront-commerce lint
command is mainly useful when you want to ensure that your code is correctly linted before commiting it to your repository.
front-commerce prepare
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.
front-commerce build
Before running this command, please make sure to run front-commerce prepare
.
This command will generate all the compiled files needed to launch your application in a production environment. The generated files will be located in the 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
.
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 launchedfront-commerce prepare
beforehand.NODE_ENV=production front-commerce start
: launches Front-Commerce application in production mode (using precompiled code).
Please make sure to have launchedfront-commerce build
beforehand.
front-commerce styleguide
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 inbuild/styleguide
. The generated files could then be served on any hosting solution supporting static websites.
front-commerce translate
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.
Options:
--ignore-build
: By default, this command will build your application to make sure that no translation is forgotten. However, if you’ve just runfront-commerce build
, this step is not necessary.--ignore-build
option is what makes it possible not to build the application during the translation.