EMSE UI

A modern Component Library used by the Asynchrous Learning Management Portal and other EMSE applications that are used by the Async project.

• EMSE UI -
  • Technologies
  • Pre-requisites
  • Local Development
  • Development using Docker
    • Building
    • Running
      • Running services individually
      • Running services with flags
    • Stopping
      • Stopping services individually
    • Restarting
      • Restarting services individually
    • Logs
    • List containers
    • Enter a container
      • Enter a specific service container
  • Testing
    • Testing using the Cypress GUI
  • Build a production bundle of the component library
  • Building a production bundle of Storybook

Technologies

• Storybook
• React
• TypeScript
• TailwindCSS
• Cypress
• Prettier

Pre-requisites

• Node.js
  • You need to have installed NodeJS version 16.17.0 or higher and 18.1.0 or lower to run this project. You can check your version by running node -v in your terminal.
• Yarn
• Git
• Docker
• Make

Local Development

To run the source code in development on your local environment, you first need to ensure that you have installed the pre-requisite pieces of software. If you do not wish to install them, you can utilize Docker to run the application.

yarn start

Development using Docker

If you do not wish to install the pre-requisite pieces of software, you can utilize Docker to run the application. You will need to have Docker installed on your machine.

Building

This commands builds the image for all 3 services that are used by the application.

make build

Running

There are multiple options to running the Docker services. You can run them all at once, or you can run them individually. The following commands will run all 3 services at once.

make up

Running services individually

The following commands will run each service individually.

• Running the Component Library in a storybook instance:

  make up-ui

• Running prettier for code formatting:

  make up-prettier

• Compiling Tailwind CSS for styling:

  make up-tailwind

Running services with flags

You can also run the services with flags. The following commands will run the services with flags.

• Running all services in detached mode:

  make up-detached

• Running a clean build of all services:

  make up-clean

Stopping

The following commands will stop all 3 services.

make down

Restarting

The following commands will restart all 3 services.

make restart

Restarting services individually

The following commands will restart each service individually.

• Restarting the storybook instance:

  make restart-ui

• Restarting prettier:

  make restart-prettier

• Restarting Tailwind CSS compilation:

  make restart-tailwind

Logs

The following command will show the logs for all 3 services in one terminal session.

Note that running this command is only successful if the application is running, as the logs window will attempt to attach to the docker instance.

make logs

List containers

The following command lists all your currently running containers.

make ps

Enter a container

The following command will enter the storybook container and spin up a terminal session using bash. You can use this to run commands inside the container.

Note that you cannot enter all containers at once, you will have to do it individually. Due to this limitation, the default service container to enter is the storybook instance.

make shell

Enter a specific service container

The following commands will enter a specific service container. You can use this to run commands inside the container.

• Entering the prettier instance:

  make shell-prettier

• Entering the Tailwind CSS instance:

  make shell-tailwind

Testing

To run the tests for the application, you can run the following command. This will run all the test cases using the Cypress framework, in the terminal window.

yarn test

Testing using the Cypress GUI

If you would like to run the test cases using the Cypress GUI, you can run the following command. This will open the Cypress GUI in your browser, where you can run the test cases.

yarn test:open

Build a production bundle of the component library

To bundle the components into a library that can be used externally, you can run the following command. This will create a production bundle of the components in the dist folder.

yarn build

After running the above command, you can also pack the bundle into a .tgz file. This will create a .tgz file in the root folder. This is useful to troubleshoot build systems that are set up. If the command completes successfully, you can use the .tgz file to see what is included in your production bundle.

yarn pack

Building a production bundle of Storybook

This command build the storybook application using your local installation of Node.js.

yarn build-storybook