Skip to content

Commit

Permalink
chore: devcontainer setup
Browse files Browse the repository at this point in the history
  • Loading branch information
valeriocomo authored Feb 26, 2024
1 parent 3c9ad47 commit 7f5f4da
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 0 deletions.
7 changes: 7 additions & 0 deletions .devcontainer/Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
FROM mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
&& apt-get -y install --no-install-recommends chromium

# Unit test only
ENV CHROME_BIN=/usr/bin/chromium
38 changes: 38 additions & 0 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
"name": "design-angular-kit",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
// "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bookworm",
"build": {
"dockerfile": "Dockerfile"
},
// Features to add to the dev container. More info: https://containers.dev/features.
"features": {
"ghcr.io/devcontainers-contrib/features/angular-cli:2": {
"version": "17.1.2"
},
"ghcr.io/devcontainers-contrib/features/cz-cli:1": {}
},
"mounts": [
"source=design-angular-kit-bundle-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume" // deps volume
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
"postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh",
// Configure tool-specific properties.
"customizations": {
"vscode": {
"extensions": [
"angular.ng-template",
"cyrilletuzi.angular-schematics",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"vivaxy.vscode-conventional-commits"
]
}
}
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}
9 changes: 9 additions & 0 deletions .devcontainer/scripts/postCreateCommand.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
#/bin/bash

echo "Set node_modules permission"
sudo chown -R node:node node_modules
echo "Set node_modules permission: done"

echo "Installing deps"
npm i
echo "Installing deps: done"
12 changes: 12 additions & 0 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for more information:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
# https://containers.dev/guide/dependabot

version: 2
updates:
- package-ecosystem: "devcontainers"
directory: "/"
schedule:
interval: weekly
36 changes: 36 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,42 @@ npm run start
npm run test
```

### Impostare l'ambiente locale con Devcontainer

I requisiti minimi del tuo ambiente locale per lavorare con i Devcontainer devono essere:

- Visual Studio Code
- Docker
- git

Avvia Visual Studio Code e installa l'estensione Dev Containers di Microsoft (ms-vscode-remote.remote-containers).

A questo punto, è necessario impostare seguire i seguenti step:

1. Clonare il progetto

```
git clone https://github.com/italia/design-angular-kit.git
```

2. Aprire la cartella di progetto con Visual Studio Code

3. Al caricamento, Visual Studio Code riconoscerà la presenta della configurazione di un Devcontainer. Aprire il progetto con il devcontainer. Altre info [qui](https://code.visualstudio.com/docs/devcontainers/create-dev-container).

4. Visual Studio Code effettuerà il setup del container, andando ad installare la corretta versione di NodeJs, di npm e delle estensioni dell'IDE. Le dipendenze di progetto saranno installate nel processo di creazione del container. L'ambiente di sviuppo sarà pronto a setup ultimato.

5. Lanciare l'applicazione in locale

```
npm run start
```

6. Per eseguire i test di unità eseguire il comando

```
npm run test
```

## Link utili

- [Playground Angular Kit](https://github.com/italia/design-angular-kit-playground)
Expand Down

0 comments on commit 7f5f4da

Please sign in to comment.