This is the mono-repository housing hrwg.de.
It is my personal website, which contains information about me and my work. I also use it to experiment with new technologies and frameworks.
To learn more about the technologies used, check out the Stack section.
Before starting development, ensure the pre-requisites are met.
Mandatory:
Recommended:
- nx (>= 17.0.0)
Optional:
- Docker (>= 20.0.0)
The following steps outline the workflow from project setup to deployment.
Install the dependencies.
pnpm installStart the development server.
pnpm serveYou can now access the website at localhost:4200.
The source code is located in the apps/website directory.
After adding a feature, run the tests to ensure everything is working as expected.
pnpm testBuild the website for production.
pnpm build
# or (if nx is installed globally)
nx build websiteThe resulting build can be run with pnpm serve:dist.
Building the project locally is not required, as the project is built automatically on the server.
The website is automatically deployed to the server when a new GitHub release is created.
The release must be tagged with a version number, e.g. 1.0.0.
To create the Docker image manually, run the following command.
docker build -f apps/website/Dockerfile -t rherwig/hrwg-website:latest .
# Push the image to Docker Hub (in case of deployment)
docker push rherwig/hrwg-website:latestIn case the proxy needs to be rebuilt, run the following command.
docker build -t rherwig/hrwg-proxy:latest infrastructure/proxy
# Push the image to Docker Hub (in case of deployment)
docker push rherwig/hrwg-proxy:latestDeploying the image to the production server requires a Docker Swarm to be set up. To do this, run the following commands on the server or via a Docker context.
docker swarm initThen, the application can be deployed using the following command.
docker stack deploy -c docker-compose.production.yml hrwg-stackThe website is built with the following technologies.
Node.js - A JavaScript runtime built on Chrome's V8 JavaScript engine.
Since I am a JavaScript developer, I chose Node.js for the entire stack so far. Paired with TypeScript, it makes for a smooth development experience across backend and frontend. I decided on pnpm as the package manager, because of its speed and its seamless integration for nx and mono-repositories via workspaces.
In the future, bun might be a suitable alternative to speed up the application and get rid of some boilerplate configuration.
nx - A set of extensible dev tools for monorepos.
Nx is used to manage the mono-repository and to run all the scripts that would usually be run by the package manager. It provides a lot of useful features, such as dependency graph visualization, code generation and caching to cut down on build times.
I chose a mono-repository over a multi-repository setup, because it allows me to manage all the projects in one place. At the moment, there is only one project, but I plan to add more in the future, such as a blog or a portfolio, which I will use a CMS for.
qwik - A modern web framework using the concept of resumability paired with React-like components.
Qwik is a relatively new framework, which looks a lot like React. It tries to solve the problems of hydration and rehydration by serializing the application state in the DOM.
I am using it to experiment with this new concept and to see if it is a viable alternative to React. Since this is a smaller-scale project, the comparison does focus more on developer experience than on scalability.
ESLint - A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
ESLint is used to ensure code quality and consistency across the project. The configuration is custom-made and based on the recommended ESLint ruleset.
The configuration can be found in the packages/eslint-config directory.
Prettier - An opinionated code formatter.
Since prettier has proven to be faster and more reliable than ESLint for code formatting, it is used for that purpose.
The configuration can be found in the .prettierrc file inside the root directory.
Vite - A fast frontend build tool.
Vite is used to bundle the application for production and to serve it during development. It is quite fast and easy to set up, which is why I chose it.
I plan on experimenting with other bundlers in the future, such as the upcoming turbopack.
Vitest - A Vite-native testing framework.
Vitest is used to run the tests across the project, since it is native to the bundler in use (Vite) and is easy to set up.
Test files will be located side-by-side with the source files, e.g. src/app.component.ts and src/app.component.test.ts,
to make it easier to find them.
Docker - A set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.
The website is shipped using Docker. The Dockerfile is located in the apps/website directory.
There is also a docker-compose.yml file in the root directory, which can be used to build and run the website locally (mostly for testing purposes).
GitHub Actions - A CI/CD tool provided by GitHub.
The website is automatically deployed to the server when a new GitHub release is created. I chose GitHub Actions over other CI/CD tools, because it is easy to use, well-documented and free for public repositories. It also limits the amount of tools I have to use, since I am already using GitHub for version control.
Contributions to this project are always welcome, but I somehow doubt that anyone would want to contribute to a personal website. In case you DO want to do that, have any questions or suggestions, feel free to open an issue.
This project is licensed under the MIT License.