Development

New modules can be developed using the Alokai CLI (@vsf-enterprise/storefront-cli) tool. Writing new modules or modifying existing modules is possible with dev mode in CLI.

Usage

In order to start working with CLI in development mode, a new project has to be created, this can be achieved using the command.

npx @vsf-enterprise/storefront-cli create

Once the project is set up, we can then use our locally existing module with CLI add-module. Command add-module has a dev flag that is used to provide your module directory path, it can be either a relative path to your project or an absolute directory path.

Possible CLI flags can be listed using the --help flag within a specific command, e.g., npx @vsf-enterprise/storefront-cli add-module --help.

The CLI tool requires you to provide a GITHUB_PAT environmental variable, which is a GitHub token with read accessibility priviligies, more information can be found in Github documentation. Please add GITHUB_PAT as export GITHUB_PAT=github-token before using the add-module command.

We can start by using the add-module command and provide the module directory path with the --dev flag.

npx @vsf-enterprise/storefront-cli add-module quick-order --dev=../Modules/quick-order

For example, structure:

|-- NewProject // created via `npx @vsf-enterprise/storefront-cli create` command
`-- Modules    // directory with existing or new modules to be developed
    |-- quick-order
    |   |-- middleware
    |   |-- nextjs
    |   `-- nuxt
    |-- re-order
    `-- asm

The CLI then will copy all files the same as it would be done usually with modules taken from the Alokai modules GitHub repository, however, this time files will be taken from /Modules directory and copied respectively to nuxt/next/middleware directories based on modify scripts for those modules.

Copied files will be watched and mirrored in real-time from your /Modules/quick-order directory to every place in the created project based on installation scripts.

Now, you can safely run yarn dev in a separate terminal instance and work on your application! All changes to the module's code should be done in the Modules directory you've provided in the command above.

Requirements

The module has to have:

the correct directory and file structure
a configuration module.json file with correct properties such as name, supportedEcommerces, nuxt.dependencies etc. Further reading can be found on file structure - module.json section description page.

Difference between dev and non-dev mode

There are a couple of differences between the usage of CLI and modules from GitHub repository modules and the development dev flag and modules from your hard drive.

In dev mode, files are watched, and the CLI never stops its work unless you exit CLI manually, while in non-dev mode, files are just copied from the GitHub repository.