A web application example using Vite, React, TypeScript, GraphQL and hosted on Azure Static Web Apps.
You can see the running app here: https://green-island-0e0ec2900.1.azurestaticapps.net/.
This app uses:
- Azure Static Web Apps
- TypeScript
- Vite
- React
- GraphQL
- Apollo Server
- GraphQL Code Generator
- React Query
- React Router
- Chakra UI
Run the following command.
dev/setupYou can set environment variables read from Azure Functions in local.settings.json. Copy and edit the file as the following command.
cp api/local.settings.json.example api/local.settings.jsonUseful VS Code extension for developing Azure Static Web Apps: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps
The following command will start both API and frontend application.
dev/start- You can open http://localhost:4280/ in your browser.
dev/startruns alsographql-codegen --watchto generate GraphQL types implementations when you modify GraphQL schema.- Frontend app hot-reloads by Vite dev server and API app restarts by nodemon when the code generation occurs or you modify some codes.
Run only API app by the following command.
cd api
yarn dev- Open http://localhost:7071/api/graphql in your browser to launch GraphQL Playground.
- API app restarts by
nodemonwhen you modify some codes.
Example app: https://green-island-0e0ec2900.1.azurestaticapps.net/
You can deploy your own app as Azure Static Web Apps.
- Clone this repository, run setup, and remove
.githubdirectory including an example azure app info. - Create Azure Static Web App. See https://docs.microsoft.com/en-US/azure/static-web-apps/getting-started?tabs=vanilla-javascript.
- Specify
/as an app location anddistas an output location.
- Specify
- Auto-generated GitHub Actions deploy this app when codes are pushed to
mainbranch 🚀
MIT