feat(adaptors): add adaptor for Azure Static Web Apps #2384
Conversation
|
|
|
There is a working demo running here: https://salmon-dune-02a16c603.2.azurestaticapps.net/ Code for the demo is here: https://github.com/derkoe/qwik-swa-demo This uses a pre-released version of qwik-city in my namespace: https://www.npmjs.com/package/@derkoe/qwik-city |
This will add an adaptor, a middleware and a starter for Azure Static Web Apps. It also includes documentation how to use the adaptor.
|
This is amazing, thanks for putting this together! Would you be able to fix up the build with and linting, then we can get it merged and shipped. Thanks! |
|
@adamdbradley sorry for the Prettier issue The Build should run now without issues. |
| { | ||
| "route": "/*", | ||
| "rewrite": "/api/server" | ||
| } |
There was a problem hiding this comment.
Thanks @derkoe! I successfully got an Azure Static Web app working with this configuration. I would recommend removing the rewrite on this wildcard route. This allows files in the public directory to load properly, like images, and the service-worker to load properly:
{
"route": "/*"
}
There was a problem hiding this comment.
With that the route to "/" (and "/flower") is not going to the function - it only serves the static index.html.
You can see that here in my demo - the random number is always the same (the one created at build-time): https://salmon-dune-02a16c603-3.westeurope.2.azurestaticapps.net/ (here is the change for that derkoe/qwik-swa-demo#3).
We have to define all routes that have to go to static files - otherwise Azure will serve the index.html.
I have no other idea for that - here are the docs for that https://learn.microsoft.com/en-us/azure/static-web-apps/configuration#routes
There was a problem hiding this comment.
Adding the /service-worker.js to the routes fixes this issues. I have added that to the starter 46dc606
Here in the example: derkoe/qwik-swa-demo#4
There was a problem hiding this comment.
Yes, I see, that makes sense. I hadn't taken into account the flower page, thanks for adding the /service-worker.js to the routes.
| "apiBuildCommand": "npm run build.server" | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
In addition to this file, it may be helpful to scaffold out an example azure-static-web-apps.yml file, like this one:
https://github.com/derkoe/qwik-swa-demo/blob/main/.github/workflows/azure-static-web-apps-salmon-dune-02a16c603.yml
Without it, I wouldn't have found the right combination of the build configuration values.
There was a problem hiding this comment.
I'm not sure about that because then the GitHub action will fail as soon as a developer pushes the repo. The setup via the Azure portal is pretty easy and will create the necessary file for you. (Azure exports may create their own pipelines).
But if you want to have I can add it - should I?
There was a problem hiding this comment.
Good point, perhaps not. Having the Github action fail immediately isn't desirable behavior, might be more confusing.
| You can deploy your application via GitHub. Create a Git repository, commit all your code and then publish your branch to GitHub. | ||
| When setting up an Azure Static Webapp via the Azure Portal you can choose the GitHub repository to deploy. | ||
| This will setup a GitHub workflow deploying your application automatically. Read the [Azure Static Web Apps quickstart](https://learn.microsoft.com/azure/static-web-apps/get-started-portal?pivots=github) for more information. | ||
|
|
There was a problem hiding this comment.
Or perhaps adding the configuration lines in the workflow that matter most here in a few more detailed steps under deploy from github would be helpful. Something like:
| Add a github workflow document and use the following build configuration values: | |
| app_build_command: "npm run build" | |
| app_location: "." # App source code path | |
| api_location: "." # Api source code path - optional | |
| skip_api_build: true | |
| output_location: "./dist" # Built app content directory - optional |
There was a problem hiding this comment.
@derkoe, this might be the best way to call out just the specific lines that would need to be changed in the Azure generated Github action. Could also be added as follow-up to update just the docs
There was a problem hiding this comment.
Thanks again @derkoe, helped me get my site up and running in Azure. Much appreciated!
|
Awesome work!!! |
What is it?
Description
This adds an adaptor, a middleware and a starter for Azure Static Web Apps. It also includes documentation how to use the adaptor. Closes #2053
Use cases and why
Checklist: