SWA-CLI https://azure.github.io/static-web-apps-cli/
I created a basic next js app on my machine using
npx create-next-app@latest
After installing the SWA-cli, I run
swa init
I enter my configuration name when prompted. It shows me the following detected configuration for my app.
Detected configuration for your app:
- Framework(s): React, Next.js
- App location: .
- Output location: .
- API location:
- App build command: npm run build
- API build command:
- App dev server command: npm dev
- App dev server URL: http://localhost:3000
? Are these settings correct? › (Y/n)
I say Yes
Then I run
swa build
This will build my project and give me the following output
Welcome to Azure Static Web Apps CLI (1.0.2)
Using configuration "my-next-app" from file:
/Users/bob/workspace/my-next-app/swa-cli.config.json
Build configuration:
- App location: .
- API location:
- Output location: .
- App build command: npm run build
- API build command:
Found package.json in .
Installing dependencies with "npm install"...
up to date, audited 229 packages in 757ms
77 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Building app with npm run build in . ...
> my-next-app@0.1.0 build
> next build
info - Loaded env from /Users/bob/workspace/my-next-app/.env
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Route (pages) Size First Load JS
┌ ○ / 5.35 kB 83.4 kB
├ └ css/ae0e3e027412e072.css 707 B
├ /_app 0 B 78 kB
├ ○ /404 182 B 78.2 kB
└ λ /api/hello 0 B 78 kB
+ First Load JS shared by all 78.3 kB
├ chunks/framework-09a2284fdc01dc36.js 45.5 kB
├ chunks/main-017a64f48d901a37.js 31.2 kB
├ chunks/pages/_app-620102ba3a9296b8.js 497 B
├ chunks/webpack-cc9c69bc14c8e1bc.js 750 B
└ css/ab44ce7add5c3d11.css 247 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
Then I run
swa deploy
I select the subscription in my Azure account when prompted. I then select the Azure Static App in the portal within that subscription when prompted
This is the error I get
Checking project settings...
✔ Choose your Static Web App › Test-SWA/Test-SWA
✔ Successfully setup project!
Deploying to environment: preview
Deploying project to Azure Static Web Apps...
✖ Failed to find a default file in the app artifacts folder (/). Valid default files: index.html,Index.html.
✖ If your application contains purely static content, please verify that the variable 'app_location' in your deployment configuration file points to the root of your application.
✖ If your application requires build steps, please validate that a default file exists in the build output directory.
I am new to next.js Now I understand that it cant find index.html, but that is because it does not exist. Since this is all js it will all get rendered when the project is being run. So I think the issue is that my configuration is incorrect when i run 'swa init' but because of my knowledge gaps of next.js I cannot figure out the right configuration. I have gotten this to work for a normal react app since that contains the index.html file.
