Setting up a development environment

  • Litium 7
How to set up a development environment for Litium Accelerator, including front end.

This article explains how to set up a development environment for Litium Accelerator. It also covers the front end, where React, SASS and webpack are included.

If you want to set up an empty Litium solution or multi-server installation, please check this article.

To install Litium Accelerator, please go here. 

Please make sure that the required Developer tools are installed. Visual Studio 2017 is recommended for back-end development.

Front-end development

A number of Integrated Developer Environments (IDE) can be used for front-end development. You can also use Visual Studio 2017 but Visual Studio Code is a lighter and better code editor. After downloading the editor, open a folder in Windows Explorer, for example Litium.Accelerator.Mvc. Right-click and select Open with Code, which will open the project in Visual Studio Code.

OpenInVS.png

How to build a client project using Visual Studio Code

1. Make sure you have NPM or Yarn installed. We prefer Yarn.

2. In Visual Studio Code, select Menu > View > Terminal, which will open the terminal panel

VScodeTerminal.png

3. Type yarn install, then press Enter to install all dependent packages.

4. Type yarn run build:w then press Enter to do the development build and enable the watch mode to monitor changes in .js or .scss file to rebuild. If you don't want to use watch mode, execute yarn run build.

When the build is completed, output files are produced. Each project has its own output folder:

  • Litium.Accelerator.Mvc: /UI folder
  • Litium.Accelerator.FieldTypes: /dist folder
  • Litium.Accelerator.Email: /dist folder.

The target file ConfirmationEmail.html is copied to the MVC project to be consumed by the MVC controller. To modify this logic, update the copy() function in gulpfile.babel.js.

Build commands

In package.json file, you can find a list of the available commands under scripts property. Each command serves a different purpose. To execute a command, append its name to the yarn run command.

  1. yarn run prod: build the project in production mode. The build configuration webpack.prod.js will be used. Output files are optimized for production use.
  2. yarn run build: build the project in development mode. The build configuration webpack.dev.js is used. Output files are not minified or optimized for production use. Developers should use this mode when developing or debugging.
  3. yarn run build:w: identical to build command, but also enables the watch mode. This will automatically build the project whenever a file is saved and webpack sees that the package needs to be updated.

Debug tools

  • Chrome DevTools: when using Google Chrome we can use its DevTools to debug HTML, Javascript and Network. There are similar tools for Firefox.
  • Redux DevTools: for debugging an application's state. There is a similar plug-in for Firefox.
  • React Developer Tools for Chrome

Related articles
Is this page helpful?
Thank you for your feedback!