Using Yarn

Our package manager for JavaScript packages is Yarn. For multi-project support, we're using Yarn Workspaces and you'll find their documentation here.

Yarn takes care of installing our dependencies. In this article, we'll go through some commands that you can use with Yarn and Frontastic in dev mode.

yarn install installs all the packages you need.

If you have issues with installing, you can try running help: yarn install --mutex network --network-concurrency 1

We also use Yarn as a runner. Below are some commands that'll execute certain processes that are mentioned in the package.json:

  • yarn run start – responsible for bringing up the frontend in development mode (webpack watches for changes on js files -> compiles the JavaScript and serves it - auto-reload enabled on changes)
  • yarn run test – executes the tests
  • yarn run lint – will check the JavaScript files for syntax errors
  • yarn run server:watch – executes webpack for Server Side Rendering (SSR) and watches for changes in the js files. If a change is detected, webpack compiles the SSR version of the code - the devServer.js binary.
  • yarn run server:start – watches for changes in the devServer.js (see server:watch) and restarts it after compile
  • yarn run storybook – executes Storybook

If you're having SSR issues and you don't want to look at the ELK logs (for Staging or Production) or ssr.log, you can try debugging these SSR issues locally on your machine. To do this:

  • Stop supervisor running SSR by executing sudo supervisorctl stop customer-project:customer-project-server-run-00 (for example, sudo supervisorctl stop demo-english:demo-english-server-run-00)
  • Run Yarn manually from your project directory (for example, demo_english/) and execute yarn run server:start
  • Once it's started and given you a command line output and will exit when you hit CTRL + C
  • Reload the page where you were seeing the SSR errors and watch the output on the CLI to see where the issues could be

You can also add dependencies to your project using Yarn by running the below inside your project directory:

yarn add <package-name>

Did this page help you?