Skip to content

Latest commit

 

History

History
188 lines (133 loc) · 7.08 KB

README.md

File metadata and controls

188 lines (133 loc) · 7.08 KB
Raw

hrwg.de

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.

Table of Contents

Pre-requisites

Before starting development, ensure the pre-requisites are met.

Mandatory:

Recommended:

  • nx (>= 17.0.0)

Optional:

Workflow

The following steps outline the workflow from project setup to deployment.

Setup

Install the dependencies.

pnpm install

Development

Start the development server.

pnpm serve

You can now access the website at localhost:4200. The source code is located in the apps/website directory.

Test

After adding a feature, run the tests to ensure everything is working as expected.

pnpm test

Build

Build the website for production.

pnpm build
# or (if nx is installed globally)
nx build website

The 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.

Deployment

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:latest

In 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:latest

Deploying 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 init

Then, the application can be deployed using the following command.

docker stack deploy -c docker-compose.production.yml hrwg-stack

Stack

The website is built with the following technologies.

Node.js

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.

Mono-repository

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.

Frontend

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.

Code Quality

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.

Bundling

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.

Testing

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.

Deployment

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.

Contributing

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.

License

This project is licensed under the MIT License.