josuemb/swa-nextjs-example

Description

This is an example of an Azure Static Web App with next features:

• Web Application:
  • Made with Next.js version 12.X as the framework.
  • Rest frameworks uses React JS version 17.X under the hood.
  • It has been created with Create Next App.
  • It uses Type Script as language.
  • Components created as tsx files and lambda functions instead of classes.
• REST API:
  • It uses Type Script as language.
  • It runs in /api route thanks to the built-in proxy features of Azure Static Web App.
  • It is using route variables.
• Other:
  • Using YARN as the default package manager for improved performance.
  • Custom configuration to debug full stack (REST API and Client React components) with Visual Studio Code.
  • Using GitHub Actions to deploy application to an Azure Static Web App.

Getting Started

1. Clone this repository: https://github.com/josuemb/swa-nextjs-example.git.
   It could be done with:
   git clone https://github.com/josuemb/swa-nextjs-example.git
2. Install Node.JS last LTS version (16.14.0 at the moment I am writing this).
   See instructions in: https://nodejs.dev/learn/how-to-install-nodejs.
3. Install Yarn as package manager.
   See instructions in: https://yarnpkg.com/getting-started/install.
   Important: Starting from Node.JS ver >=16.10, the preferred way to manage Yarn is through Corepack.
   See more information in: https://nodejs.org/dist/latest/docs/api/corepack.html.
   See instructions to enable on: https://nodejs.org/dist/latest/docs/api/corepack.html#enabling-the-feature.
4. Install Azure Functions Core Tools.
   See: https://github.com/Azure/azure-functions-core-tools/blob/master/README.md#windows.
   Please install as a global tool using Yarn with command:
   yarn global add azure-functions-core-tools@3.
   Important: The last version available at the moment I am writing this is version 3.
5. Install Azure Static Web Apps CLI. See: https://github.com/Azure/static-web-apps-cli.
   Please install as a global tool using Yarn with command:
   yarn global add @azure/static-web-apps-cli.
   Important: The last version available at the moment I am writing this is version 0.8.2. This version still as preview and it is essential to run and debug the application locally.
6. Install Visual Studio Code if you want to debug the application.
   See: https://code.visualstudio.com/docs/setup/setup-overview.

Debugging

Once you have cloned the repository there is all ready to debug on Visual Studio code. You can just press F5 key or go to Run > Start Debugging menu.
It will debug both: Client and Server. If you want to see how it could be done.
See launch.json

Deploying

See how to deploy the Azure Static Web Application in: https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript.
Use next parameters:
App Location: /src/webapp
Api Location: /src/api
Artifact location: out
See how I did it in: azure-static-web-apps-jolly-bush-0b2d76f10.yaml
See running example in: https://jolly-bush-0b2d76f10.1.azurestaticapps.net/