DEV Community

Matthias Meyer
Matthias Meyer

Posted on • Updated on

 

Hacktoberfest2022 - React18 Website and Nginx Docker image to show your visitors maintenance informations

It's Hacktober πŸŽƒ and the Hacktoberfest πŸ§‘πŸ½β€πŸ’» has started. I wanted do contribute with a small React maintenance website you can show to your visitors when you are doing some maintenance work to your services.

Image of the maintenance website

For that i created a small template repository which you can easily clone and make it your own personal maintenance website.

GitHub logo thematchless / website-maintenance-container

A small custom website maintenance container.

website-maintenance-container

The idea of this website-maintenance-container is to have a fairly simple website that will display a friendly maintenance message whenever you update your services.

To customize the displayed texts, you only have to change the text strings inside the info.json file.

{
  "headline": "Website maintenance",
  "description": "We are back in a couple of minutes.",
  "favicon_url": "https://oflisback.github.io/react-favicon/img/github.ico"
}
Enter fullscreen mode Exit fullscreen mode

commands

command description
npm run start to start the local dev environment
npm run build to build the production version

dockerfile included

To build this Website use the included Dockerfile:

docker build -t website-maintenance-container:latest .

To test this Website use the following command:

docker run -p 8000:80 website-maintenance-container:latest

Now open your browser and navigate to 127.0.0.1:8000 to see the website.




If you only want to make basic adjustments, it is enough for you to adjust the texts strings inside the info.json file.

You can change the headline, the description and the favicon.

{
  "headline": "Website maintenance",
  "description": "We are back in a couple of minutes.",
  "favicon_url": "https://oflisback.github.io/react-favicon/img/github.ico"
}
Enter fullscreen mode Exit fullscreen mode

If you prefer to make some more adjustments you feel free to do it. It's a pretty basic React v18 Application with Prettier and ESLint. You can customize everything to your needs.

If you are done with your changes you can use the included Dockerfile to build a production ready image.

docker build -t website-maintenance-container:latest .
Enter fullscreen mode Exit fullscreen mode

To test your freshly created docker image use the following command:

docker run -p 8000:80 website-maintenance-container:latest
Enter fullscreen mode Exit fullscreen mode

Now open your browser and navigate to 127.0.0.1:8000 to see the website.

CI (Continues Integration)

This repository comes with a preconfigured GitHub action that checks your commit history for commits that conform to the Conventional Commits specification. When the workflow detects a new commit, it automatically determines the next version number and creates a freshly built Docker image of your maintenance application. This image is then transferred to the GitHub Container Registry and the Git version tags are automatically assigned based on the newly determined version number. πŸ₯³

If you want to use that GitHub action and the automatic push to the GitHub Container Repository you have to create a token for your action for your account. Name it PAT_TOKEN or change it to your needs inside the build.yml.

CD (Continues Deployment)

Now you have a nice little project with a working CI pipeline. You can easily extend the workflow with a CD statement inside the build.yml. For this I had built a small independent GitHub action last year. πŸŽ‰

GitHub logo thematchless / bump-image-version-action

GitHub action to bump up a docker image version deployed in a docker-compose file on a remote server via ssh

Build and publish Docker image

Bump docker image version on a remote host

This repository contains an GitHub action to bump up a docker image version specified in your docker-compose stack.

Requirements for this GitHub Action to work

  • your remote server must be accessible via ssh and is reachable
  • you have a ssh private and public key to authenticate via ssh
  • you have saved your private and public key to the GitHub project secrets

Configuration options for the action

required key example default description
βœ… remote_docker_host thematchless@fancyServer.de username@host
βœ… ssh_private_key -----BEGIN OPENSSH PRIVATE KEY----
UgAAAAtzc2gtZWQyNTUxOQAAACALBUg
UgAAAAtzc2gtZWQyNTUxOQAAACALBUg
UgAAAAtzc2gtZWQyNTUxOQAAACALBUg
-----END OPENSSH PRIVATE KEY-----
private key in PEM format
βœ… ssh_public_key ssh-ed25519 ABCDABCDu027374972309 public key of the PEM
βœ… service_name super-fancy-react-app name of the service inside of the compose file
βœ… deploy_path /home/thematchless/stack-1 path which contains your compose file on the remote host
βœ… args up -d arguments how to start your service
❌ stack_file_name docker-compose.yaml docker-compose.yml name
…

I hope you enjoyed this little idea of my maintenance container 😎

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.