Verified Commit 3b456ed9 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Add devcontainer

parent 41ee28d5
# [Choice] Node.js version: 14, 12, 10
ARG VARIANT=14
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
# [Optional] Uncomment this section to install additional OS packages.
# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
# && apt-get -y install --no-install-recommends <your-package-list-here>
# [Optional] Uncomment if you want to install an additional version of node using nvm
# ARG EXTRA_NODE_VERSION=10
# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
# [Optional] Uncomment if you want to install more global node modules
RUN sudo -u node yarn global add gatsby-cli
EXPOSE 8000
{
"name": "amiv-website",
"build": {
"dockerfile": "Dockerfile",
"args": {
"VARIANT": "14"
}
},
// Container specific settings only.
"settings": {
"terminal.integrated.shell.linux": "/bin/bash"
},
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"eamodio.gitlens"
],
"forwardPorts": [8000],
"postCreateCommand": "yarn install",
"containerEnv": {
"GATSBY_TELEMETRY_DISABLED": "1"
},
"remoteUser": "node"
}
FROM node:13.8
WORKDIR /app
# Copy dependency list
ADD ./package.json /app/
ADD ./package-lock.json /app/
# Install dependencies
RUN npm install -g gatsby-cli
RUN npm install
# Clean up app directory
RUN rm /app/package.json /app/package-lock.json
VOLUME [ "/app" ]
EXPOSE 8000
CMD [ "gatsby", "develop", "--host=0.0.0.0" ]
......@@ -6,55 +6,58 @@ This is the home of the amiv website.
1. **Development**
Navigate into the project directory, install all dependencies and run the development server using the following commands:
Navigate into the project directory, install all dependencies and run the development server using the following commands:
_Please note that the parameter `-g` is optional. It is being used to install the package `gatsby-cli` globally on the system._
_Please note that the parameter `-g` is optional. It is being used to install the package `gatsby-cli` globally on the system._
```shell
npm install -g gatsby-cli
npm install
gatsby develop
```
```shell
npm install -g gatsby-cli
npm install
gatsby develop
```
You can visit the website now at http://localhost:8000
You can visit the website now at http://localhost:8000
2. **Development with Docker**
2. **Development with Devcontainer (VSCode)**
You can run the development server completely with docker.
You can run the prepared development environment with docker and VSCode without the need to install anything project-specific on your system.
Build local development image
Requirements:
```shell
docker build -t amiv-website-local-dev -f Dockerfile.development .
```
* *(Windows only)* [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/)
* [Docker Engine](https://docs.docker.com/engine/install/)
* [Visual Studio Code](https://code.visualstudio.com/)(VSCode)
* [Remote Development Extension Pack for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
Run development server with
Open the project directory with the prepared devcontainer by clicking the green button in the left button corner of the VSCode window and select `Remote-Containers: Open Folder in Container...`.
```shell
docker run --rm -it -p 8000:8000 -v ${PWD}:/app amiv-website-local-dev
```
On startup, `yarn install` is run automatically. You can start the gatsby development process with `gatsby develop`.
You can visit the website now at http://localhost:8000
**IMPORTANT:** You also have to run the backend project on your machine! It is not possible to use an externally hosted backend.
3. **Linting & Formatting**
We use `eslint` and `prettier` for linting and formatting of the javascript code. You can use the following commands:
We use `eslint` and `prettier` for linting and formatting of the javascript code. You can use the following commands:
```shell
npm run eslint
npm run format
```
```shell
npm run eslint
npm run format
```
4. **Production Build**
You can prepare a production build manually and serve it using gatsby's built-in webserver. This will run the server-side rendering part.
You can prepare a production build manually and serve it using gatsby's built-in webserver. This will run the server-side rendering part.
It is very possible, that some things do not work correctly when ssr is used, so you should definitively test this one before deploying a new version!
It is very possible, that some things do not work correctly when ssr is used, so you should definitively test this one before deploying a new version!
```shell
gatsby build
gatsby serve
```
```shell
gatsby build
gatsby serve
```
For more information about deployment, read the section about deployment below.
For more information about deployment, read the section about deployment below.
## 🧐 What's inside?
......@@ -93,20 +96,20 @@ A quick look at the most important files and directories of the project.
6. **`/src`**: This directory contains all source code.
1. **`/src/components`**: Contains all components used somewhere on the website.
2. **`/src/content`**: All content only files (e.g. board or teams portraits or static texts)
3. **`/src/context`**: Custom [React Context](https://reactjs.org/docs/context.html)
4. **`/src/hooks`**: Custom React hooks.
5. **`/src/images`**: Static images.
6. **`/src/intl`**: Translation files used by `react-intl`.
7. **`/src/pages`**: Every `js` file represents a page which path is exactly like the folder structure and filename.
1. **`/src/components`**: Contains all components used somewhere on the website.
2. **`/src/content`**: All content only files (e.g. board or teams portraits or static texts)
3. **`/src/context`**: Custom [React Context](https://reactjs.org/docs/context.html)
4. **`/src/hooks`**: Custom React hooks.
5. **`/src/images`**: Static images.
6. **`/src/intl`**: Translation files used by `react-intl`.
7. **`/src/pages`**: Every `js` file represents a page which path is exactly like the folder structure and filename.
**Note**: Every file starting with an underscore (`_`) in the pages directory is ignored. Those pages are mostly being used for client-only routes. Therefore no page route is created and no server-side rendering performed.
**Note**: Every file starting with an underscore (`_`) in the pages directory is ignored. Those pages are mostly being used for client-only routes. Therefore no page route is created and no server-side rendering performed.
_Example: The file `/src/pages/amiv/about.js` will serve the component defined in that file as a page at the path `/amiv/about`._
_Example: The file `/src/pages/amiv/about.js` will serve the component defined in that file as a page at the path `/amiv/about`._
8. **`/src/store`**: This directory contains all files related to data handling using `react-redux`.
9. **`/src/utils`**: Collection of utility functions.
8. **`/src/store`**: This directory contains all files related to data handling using `react-redux`.
9. **`/src/utils`**: Collection of utility functions.
10. **`/src/theme.js`**: Theme definition for light/dark mode (dimensions, colors, etc.)
## 💫 Deployment
......@@ -117,23 +120,23 @@ TODO: Add information about the deployment process of the project.
### Frontend Frameworks & Libraries
* [Gatsby](https://www.gatsbyjs.org)
* [React](https://reactjs.org/)
* [react-intl](https://github.com/formatjs/react-intl)
* [React-Redux](https://react-redux.js.org/)
- [Gatsby](https://www.gatsbyjs.org)
- [React](https://reactjs.org/)
- [react-intl](https://github.com/formatjs/react-intl)
- [React-Redux](https://react-redux.js.org/)
### Backend
* [AMIV API](https://github.com/amiv-eth/amivapi)
- [AMIV API](https://github.com/amiv-eth/amivapi)
### Build Tools
* [NPM](https://www.npmjs.com/)
* [gatsby-cli](https://www.npmjs.com/package/gatsby-cli)
- [NPM](https://www.npmjs.com/)
- [gatsby-cli](https://www.npmjs.com/package/gatsby-cli)
### Development Tools
* [ESlint](https://github.com/eslint/eslint)
* [Prettier](https://github.com/prettier/prettier)
- [ESlint](https://github.com/eslint/eslint)
- [Prettier](https://github.com/prettier/prettier)
Most IDEs have plugins for those tools. VS Code is the recommended IDE.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment