Skip to content

Commit 7558cb1

Browse files
peacepiloupeacepilou
committed
Initial commit
0 parents  commit 7558cb1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+22635
-0
lines changed

‎.github/workflows/main.yml‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
name: CI/CD Pipeline
2+
3+
on:
4+
push:
5+
branches:
6+
- '**'
7+
branches-ignore:
8+
- development
9+
- staging
10+
- production
11+
12+
pull_request:
13+
branches:
14+
- development
15+
- staging
16+
- production
17+
18+
jobs:
19+
lint:
20+
runs-on: ubuntu-latest
21+
steps:
22+
- name: Checkout code
23+
uses: actions/checkout@v3
24+
25+
- name: Setup Node.js
26+
uses: actions/setup-node@v3
27+
with:
28+
node-version: '20'
29+
30+
- name: Cache node modules
31+
uses: actions/cache@v3
32+
with:
33+
path: node_modules
34+
key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
35+
restore-keys: |
36+
${{ runner.os }}-node-modules-
37+
38+
- name: Install dependencies
39+
run: npm install
40+
41+
- name: Run ESLint
42+
run: npm run lint
43+
44+
test:
45+
runs-on: ubuntu-latest
46+
steps:
47+
- name: Checkout code
48+
uses: actions/checkout@v3
49+
50+
- name: Setup Node.js
51+
uses: actions/setup-node@v3
52+
with:
53+
node-version: '18'
54+
55+
- name: Install dependencies
56+
run: npm install
57+
58+
- name: Run tests with increased memory
59+
run: node --max-old-space-size=4096 ./node_modules/.bin/jest --verbose
60+
61+
- name: Run unit tests
62+
run: npm test
63+
64+
e2e:
65+
runs-on: ubuntu-latest
66+
if: github.event_name == 'pull_request' && (github.base_ref == 'staging' || github.base_ref == 'production')
67+
steps:
68+
- name: Checkout code
69+
uses: actions/checkout@v3
70+
71+
- name: Setup Node.js
72+
uses: actions/setup-node@v3
73+
with:
74+
node-version: '20'
75+
76+
- name: Cache node modules
77+
uses: actions/cache@v3
78+
with:
79+
path: node_modules
80+
key: ${{ runner.os }}-node-modules-${{ hashFiles('**/package-lock.json') }}
81+
restore-keys: |
82+
${{ runner.os }}-node-modules-
83+
84+
- name: Install dependencies
85+
run: npm ci
86+
87+
- name: Run Cypress tests for the target branch
88+
run: |
89+
if [ "${{ github.base_ref }}" == "staging" ]; then
90+
echo "Running e2e tests for staging"
91+
npm run e2e:ci:staging
92+
elif [ "${{ github.base_ref }}" == "production" ]; then
93+
echo "Running e2e tests for production"
94+
npm run e2e:ci:production
95+
else
96+
echo "Branch not recognized for e2e tests"
97+
exit 1
98+
fi

‎.gitignore‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Frontend gitignore configuration
2+
3+
## Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
/documentation
9+
/coverage
10+
11+
## Node
12+
node_modules
13+
npm-debug.log
14+
yarn-error.log
15+
16+
## IDEs and editors
17+
.idea
18+
.editorconfig
19+
.project
20+
.classpath
21+
.c9/
22+
*.launch
23+
.settings/
24+
*.sublime-workspace
25+
26+
## Visual Studio Code
27+
.vscode/*
28+
!.vscode/settings.json
29+
!.vscode/tasks.json
30+
!.vscode/launch.json
31+
!.vscode/extensions.json
32+
.history/*
33+
34+
## Miscellaneous
35+
/.angular/cache
36+
.sass-cache/
37+
/connect.lock
38+
/coverage
39+
/libpeerconnection.log
40+
testem.log
41+
/typings
42+
43+
## System files
44+
.DS_Store
45+
Thumbs.db

‎.husky/pre-commit‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#!/bin/bash
2+
3+
./scripts/husky-scripts/pre-commit/start-message.sh
4+
./scripts/husky-scripts/pre-commit/validate-config-files.sh
5+
./scripts/husky-scripts/pre-commit/validate-branch-name.sh
6+
./scripts/husky-scripts/pre-commit/run-prettier-and-linter.sh
7+
./scripts/husky-scripts/pre-commit/run-tests.sh
8+
./scripts/husky-scripts/final-success-message.sh

‎.prettierignore‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Ignorer tous les fichiers à la racine du projet
2+
/*.*
3+
/*.json
4+
/*.md
5+
/*.js
6+
7+
# Exclure tous les fichiers de test TypeScript
8+
*.spec.ts
9+
10+
# Exclure les tests e2e
11+
cypress/**
12+
coverage/**
13+
14+
# Ignorer les dossiers spécifiques
15+
/dist
16+
/node_modules

‎.prettierrc.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 150,
3+
"bracketSpacing": true,
4+
"bracketSameLine": true,
5+
"semi": true,
6+
"tabWidth": 2,
7+
"useTabs": false,
8+
"singleQuote": true,
9+
"arrowParens": "avoid",
10+
"trailingComma": "es5"
11+
}

‎.vscode/extensions.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3+
"recommendations": ["angular.ng-template"]
4+
}

‎.vscode/launch.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3+
"version": "0.2.0",
4+
"configurations": [
5+
{
6+
"name": "ng serve",
7+
"type": "chrome",
8+
"request": "launch",
9+
"preLaunchTask": "npm: start",
10+
"url": "http://localhost:4200/"
11+
},
12+
{
13+
"name": "ng test",
14+
"type": "chrome",
15+
"request": "launch",
16+
"preLaunchTask": "npm: test",
17+
"url": "http://localhost:9876/debug.html"
18+
}
19+
]
20+
}

‎.vscode/tasks.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3+
"version": "2.0.0",
4+
"tasks": [
5+
{
6+
"type": "npm",
7+
"script": "start",
8+
"isBackground": true,
9+
"problemMatcher": {
10+
"owner": "typescript",
11+
"pattern": "$tsc",
12+
"background": {
13+
"activeOnStart": true,
14+
"beginsPattern": {
15+
"regexp": "(.*?)"
16+
},
17+
"endsPattern": {
18+
"regexp": "bundle generation complete"
19+
}
20+
}
21+
}
22+
},
23+
{
24+
"type": "npm",
25+
"script": "test",
26+
"isBackground": true,
27+
"problemMatcher": {
28+
"owner": "typescript",
29+
"pattern": "$tsc",
30+
"background": {
31+
"activeOnStart": true,
32+
"beginsPattern": {
33+
"regexp": "(.*?)"
34+
},
35+
"endsPattern": {
36+
"regexp": "bundle generation complete"
37+
}
38+
}
39+
}
40+
}
41+
]
42+
}

‎Dockerfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# This file is empty. It will be completed with the build process.

‎README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Frontend project template : Angular 🛡️
2+
3+
This repository is a Angular project template shipped with a base configuration in order to have a clean base to work with, for you and your teammates.
4+
5+
This project has been initialized from Angular CLI version 18.2.
6+
7+
🔥 To properly understand the structure of this project, open the `package.json` file and take your time reviewing it.
8+
9+
## Same code format : Prettier
10+
- This project uses Prettier.
11+
- Prettier makes sure that everyone has the same code format and standardize it. It helps developers to be focused on creating feature, not formatting. The same format for everyone also means easier code reviews.
12+
- The configuration file is in the `source directory` > `.prettierrc.json`.
13+
- You can install Prettier plugin on your IDE if you want, it would help you to configure when prettier should run. For instance, you can choose to let it run after every file save. But you are not forced to install the plugin because **Prettier will run every time after you are trying to commit**.
14+
- You can run Prettier at any time with the following command: `npm run prettier`
15+
16+
⚠️ You cannot edit Prettier config file. Otherwise your commit won't pass.
17+
18+
19+
## Same code rules : Eslint
20+
- This project uses Eslint. The configuration file is in the `source directory` > `eslint.config.js`.
21+
- Eslint prevent a lot of typo mistakes & future bugs to come. It enforces code rules & conventions.
22+
- It uses all recommanded configurations from Eslint, Tslint and Nglint. It has a few more custom configurations specific for this project.
23+
- You can run Eslint at any time with the following command: ng lint
24+
25+
⚠️ You cannot edit Eslint config file. Otherwise your commit won't pass.
26+
27+
## Clean git workflow : Husky
28+
This project uses Husky. It enforces rules to keep your git workflow clean & consistent. It mainly uses the pre-commit git hook. Before each commit, Husky:
29+
- Makes sure you did not modify Prettier, Eslint or Husky configuration files ;
30+
- Run Prettier and Eslint automatically ;
31+
- Validate branch name and help you to rename it with good practices if test fails.
32+
- You need to enable it once after cloning the project by running the `npm run prepare` command to set up your local instance.
33+
- Since all tests run locally with Husky are also executed on CI after every push, not enabling Husky upfront will result in slower feedback on your Git practices, as you’ll have to wait for CI to complete the checks 🙈.
34+
35+
## Automatic documentation : compodoc
36+
- This project uses compodoc : a dynamic documentation of your whole application.
37+
- It builds a clean documentation on your localhost and gives you a nice overview of your application.
38+
- It needs to be rebuilt after each code modification. You can run it with the following command: `npm run doc`
39+
40+
41+
## Environments
42+
- This application is creates around 3 environments : `development`, `staging` and `production`.
43+
- Npm scripts about serving, building and e2e testing the application allow you to easily swap between them.
44+
- Some checks are made to make sure that anyone can't add a new environement in a snap.
45+
- These environments are fundamentals ; be sure to know what you do when you manipulate them.
46+
47+
## Tests
48+
1. Unit & Integration tests
49+
- Jest is used for both **unit** and **integration** tests.
50+
- To test the application, run the following command: `npm run test`.
51+
52+
53+
2. End to End tests
54+
- Cypress is used for End to End tests.
55+
- To test the application, run any command starting with `e2e`.
56+
- You will choose the right command based on the environment you want to test.
57+
- `e2e:ui` related commands will trigger Cypress with its user interface.
58+
- `e2e:ci` related commands will trigger Cypress in command line interface.
59+
- It's not anticipated to run your e2e tests in the development environment since e2e is designed for build & production purposes.
60+
61+
## CI/CD
62+
- This project has a Dockerfile to build an image of the application
63+
- This project has a CI/CD pipeline in `source directory` > `.github` > `workflows`.
64+
65+
Flow details:
66+
- When a push is triggered on any branch (except staging or prod), the CI is triggered and run unit tests & integration tests.
67+
- When a push is triggered on staging, the CI is triggered and run unit tests, integration tests **and E2E tests**.
68+
- If it fails, details can be found on the github repository > actions tab.
69+
- If everything is fine, then the CD is triggered and an image of the application is built with Docker and then deployed on DockerHub.
70+
- The VPS is configured to listen successfull pushes on staging branch by a webhook, and then pull the docker image from DockerHub, stops the current running docker container & start the new one.
71+
- User only need to refresh its browser & taadaa : the frontend application on staging environnement is now successfully deployed 🎉
72+
73+
👉 The pipeline is the same with the production branch.
74+
75+
## Happy coding 🔥🔥🔥

0 commit comments

Comments
 (0)