- Stack and Dependencies
- Running the project locally
- Testing the code
- How to ship it
The webclient uses 11ty as its static site generator, jest as it testing framework and prettier for enforcing cohesive code formatting throughout the project.
The UI elements are custom web components made with no external library or framework, and are organized following the Atomic Design methodology - those components can be found in the directory /src/components.
The code that represents the logic of the system - which hidrates the interface with content and communicates with the server - is located in scr/app and is written in TypeScript.
After installing all the dependencies with the command npm install, you can run the project on your device with npm start. The default port for running the client locally is 8080, so the site can be accessed from the url http://localhost:8080.
The static site, resultant from the built process, will be found on the folder /_site. When running locally, the project by default will not connect to real servers and, instead will run from locally sourced mock files, that can be edited in /src/mock-local.
FYI: As of this writing, Firefox did not had support for ECMAScript modules on service workers, hence the mocks will not work locally when using this browser.
The test files are found on the /test directory.
Attention: The test suite runs on the transpiled JS expected result from the TypeScript code, so before running npm run test you should run either npm start or npm run build.
The files that results from the build process of the project are by default saved at the directory _site. You can populate it either using npm run build or npm start.
Note: Although running npm start will also populate the _site folder, it will also generate the mock files in there, so it is recommended to use npm run build in production.
Remember! The global configuration file should be editted before deploying your client. You can find the global configuration file at /src/app/GLOBAL, it is important to change at least the domain variable to point to your production Lifeguard server.
To ship it manually, simply copy the data you generated at the _site directory to a simple storage service, such as Amazon S3. To make the deploy automatic, you can create a CI/CD pipeline that, after any Pull Request to main (or any other target branch) executes the command npm run build and targets the output folder _site as its publish directory.