NextJS TypeScript TailwindUI GraphQL Boilerplate
Demonstrates a NextJS application with TypeScript and TailwindUI with a ASP.Net Core GraphQL based API utilizing the Hot Chocolate GraphQL library.
The frontend utilizes code generation for the GraphQL schema and queries and also demonstrates the use of MobX to manage state.
Traefik is used to proxy the API to the frontend.
Getting Started:
Requires Git, Docker, a code editor such as Visual Studio Code.
- Clone the repository or preferrably, click the 'Use this Template' button above to create your own repository and clone from your repository.
- Run
docker-compose -f docker-compose.yml -f docker-compose.override.yml up -d - Open the browser and navigate to http://app.localhost
Changes to /App/**/* are watched and automatically reloaded.
To regenerate the GraphQL code for the frontent, within /App/ run ``yarn generate-gql```
The GraphQL endpoint and the Banana Cake Pop IDE are available at at http://app.localhost/graphql/
The traefik dashboard is exposed at http://app.localhost/traefik/dashboard/
Continuous Integration
Within this repository are Github Actions that demonstrate a CI process of building and pushing the docker images to the GitHub registry.
Pull requests welcome.
Continuous Deployment
Any cloud provider that supports containers can be used to deploy the application. Detailed below are instructions to do so for various cloud offerings.
Azure App Service for Containers
Via the Azure CLI, one can deploy this stack to an Azure App Service for Containers.
First, install and configure the Azure CLI - logging into the desired Azure account and subscription then running the following commands at the root folder of the cloned repository:
#/bin/bash
# Variables
resourceGroupName="nextjs-typescript-tailwindui-graphql-boilerplate"
aspName="AppServiceLinuxDockerPlan"
aspSku="F1"
appName="nextjs-typescript-tailwindui-graphql-boilerplate-$RANDOM"
location="CentralUS"
# Create a Resource Group
az group create --name $resourceGroupName --location $location
# Create an App Service Plan
az appservice plan create --name $aspName --resource-group $resourceGroupName --location $location --is-linux --sku $aspSku
# Create a multi-container app service
az webapp create --resource-group $resourceGroupName --plan $aspName --name $appName --multicontainer-config-type compose --multicontainer-config-file docker-compose-azure.yml
# Copy the result of the following command into a browser to see the web app.
echo http://$appName.azurewebsites.net
# Optional: Enable container CD - Copy the value of CI_CD_URL into a Github Secret and update GH Actions workflow to use that secret. If testing the webhook url at the command line, remember to escape the $ sign with \$.
# az webapp deployment container config --enable-cd --name $appName --resource-group $resourceGroupName
Azure Container Apps
TODO: Add a configuration to deploy the application to Azure Container Apps
Digital Ocean K8s Cluster
TODO: Add a configuration to deploy the application to a Digital Ocean K8s cluster
AWS EKS
TODO: Add a configuration to deploy the application to AWS EKS
Azure Kubernetes Service (AKS) via Terraform
TODO: Add a terraform configuration
Local K8s/K3s cluster via helm
TODO: Add a helm chart
9 Dec 8, 2022
0 Jan 17, 2022
15 Dec 20, 2022
7 Nov 21, 2022
10 Aug 14, 2022
2 Sep 21, 2021
4 Feb 22, 2022
17 Nov 18, 2022
8 Oct 24, 2022
9.8k Jan 3, 2023
12 May 12, 2021
43 Dec 19, 2022
3 Sep 24, 2021
272 Dec 30, 2022
42 Nov 10, 2022
7 Nov 12, 2022
51 Jan 8, 2023
1 Feb 11, 2022
11 Dec 13, 2022