Installing NodeJS will automatically install the compatible NPM version.
Tip: use NVM (Node Version Manager) to easily install NodeJS and switch between different NodeJS versions.
If you have Homebrew installed, run brew install nvm.
Run npm install to install all dependencies.
Run npm start for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run npm test to execute the unit tests via Karma.
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.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
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.
Feel free to improve our website's texts and translations.
They are located in src/assets/i18n.
Most of the time, translations are loaded from the code as follows:
<p>
{{ "main.intro" | translate }}
</p>However, if you want to space a translated text over multiple paragraphs, or include breaklines, then the translation must be loaded differently:
<div class="alert alert-primary" role="alert" [innerHTML]="'main.searchRange' | translate"></div>We are currently hosting our website on https://watdoetdepolitiek.be using the static web hosting of Github Pages.
Just commit and push your work on git. As soon as your work reaches the main branch, the updated version of the website will get deployed automatically. Your latest changes will then be visible at https://watdoetdepolitiek.be (and actually also at https://transparentdemocracy.github.io/website/, the corresponding domain name served by Github Pages).
If you need to warn users about back-end maintenance, which breaks the website's functionality in some way, you can do so by setting the maintenanceModeEnabled flag to true in environment.prod.ts.
If you want to edit the text for the maintenance announcement or the explanation of the impact, you can do so in the JSON files in the assets/i18n folder. Look for the maintenance.announcement and maintenance.impact keys.
The maintenance messages are displayed on the app.component.
We've configured a Github action for this, which deploys to Github Pages. See website/.github/workflows/gh-pages.yml.
The npm run build:prod and npm run test:headless commands triggered in it are defined in package.json.
This approach is based on https://github.com/rodrigokamada/angular-github-actions?tab=readme-ov-file, with some updates of the dependencies in the gh-pages.yml, and tweaks to make it work for our Angular application.
A pre-requisite that was needed for the Github action to work, was that we created a new gh-pages branch from main.
The Github action now automatically commits and pushes the latest production build of the website to that gh-pages branch.
The linking of the watdoetdepolitiek.be domain and the Github Pages was done according to the instructions at https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages. Our DNS records configuration is done in Cloudflare.
You can skip this step if the server infrastructure has been set up already. Then go immediately to the next section, to deploy.
Setting up our server infrastructure is done manually for now in AWS, no Terraform implemented currently.
This section documents the steps we took to create the server infrastructure, so it is easily set-up again on different cloud provider later, or such that we have a reference of what was set up when we want to write the Terraform for this.
Follow these steps: https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-custom-domain-walkthrough.html#upload-website-content
If your domain name is unable to display the website after following these steps, check in your mailbox if you first still need to verify your identity before the DNS registrar makes the domain name resolvable in user's browsers.
For other domain name troubleshooting, for example if we would need to transfer our domain names and run into troubles: https://www.domain.com/help/article/dns-troubleshooting.
npm install -g @angular/cling build --configuration=productionThis will set the proper environment file, so that we go to the proper backend.
When uploading the contents of the dist folder to the S3 bucket, make sure you upload dist/website/browser, such that index.html lives at root level in the S3 bucket, so they will be found when AWS displays the static website living in the S3 bucket, on a user's request.