emse-ui v1.2.2
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
- Storybook
- React
- TypeScript
- TailwindCSS
- Cypress
- Prettier
Pre-requisites
- Node.js
- You need to have installed NodeJS version
16.17.0
or higher and18.1.0
or lower to run this project. You can check your version by runningnode -v
in your terminal.
- You need to have installed NodeJS version
- 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
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago