The frontend for Austin's Dev, powered by Next.js, React, GraphQL with graphql-request and SWR, and Bootstrap.
The goal of this project is to abstract the frontend away from WordPress, improve performance (such as time to first byte), eliminate the usage of frontend plugins that slow down WordPress, and allow further customization for the intended website.
Pages are statically generated at build-time except for certain dynamic pages (search, preview, RSS feed, server sitemap). They may be server-side rendered during revalidation or if a requested page doesn't exist. This app is required to be rebuilt when the code is updated. Content changed in the WordPress backend relies on Incremental Static Regeneration.
- Node.js (LTS v16.13.1 is the minimum version necessary)
- A backend powered by WordPress with these plugins at the minimum:
- Create a
.env.localfile (see the provided example file) with the required environment variables set. - Run the development server:
npm run dev - Open http://localhost:3000 in your browser.
Preferably, configure your IDE to run eslint --fix on save for file extensions: {**/*,*}.{js,ts,jsx,tsx} and prettier on code reformat and save for file extensions: {**/*,*}.{js,ts,jsx,tsx,json,css,scss}.
For a self-hosted server, it should be configured with Linux, Docker, and webhook. Docker must be configured as a swarm with a service for this app to handle rolling updates without build conflicts and load balancing.
The service must have three environment variables configured: NEXT_PUBLIC_SITE_URL, NEXT_PUBLIC_API_GRAPHQL_URL, and NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID. Optionally, a bind mount targeting /app/.next/cache can be added to persist cached images.
In this repo, a GitHub Actions workflow builds a Docker image, pushes it to a private registry, and posts to a webhook on the server that pulls the latest image and updates the Docker service. This process allows for continuous deployment.
See LICENSE file in this repo.
This app has been developed by Austin S.
You may contribute code to this app. You may fork, modify, and use this app as a basis for your own project. You may not use the name and content of Austin's Dev for any derivatives of this project.