LITTIL website

This project contains the sourcecode of the LITTIL website.

Setup your local environment

For more information about setting up your local development environment, please read set up your development environment.

Project files organization

The project files are split into two main folders: 'components' and 'pages'.

• Components: re-useable UI-components
• Pages: page level components

Styling rules with TailwindCSS

We are using TailwindCSS to style our application. Keep these few rules in mind when styling:

1. Tailwind classes first: use tailwind classes for all the styling. If you are missing something in tailwind: try to use arbitrary values (example) or check the config file for missing colors etc.
2. HTMl first: use as much as tailwind classes in the html. Do not add your own classes to add tailwind classes in the .scss.
3. Use @apply: if styling in the .scss is nesseccary, add ALL classes to the .scss. Tailwind classes can be added by using @apply:

body {
    @apply w-10;
}

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Open api generator

Run npm run openapi to generate API servicees and models

Manual deployment to a staging environment

Note that production-grade deployments should happen from a pipeline so that one single build (artifact) can be tested on staging, then deployed production, and persisted in the pipeline (for at least some time).

To do a manual deployment to staging though, run npm run build to produce the compiled application in ./dist. Deploy this application by copying all files in ./dist/littil-org-website/ to a static web server file-system (such as the S3 bucket used in AWS). Finally, copy the local config.staging.js to config.js in the target.

Environment-specific configuration

To enable environment-specific configuration without having to create a separate artifact per environment or resort to running a dedicated node server or container, a config.js file is used.

This config.js is loaded in index.html using a regular Githubissues.