The following guide will show you how I went about deploying my own RedwoodJS web frontend to Azure Static Web App. I will assume you have your API side deployed else where like Azure Web App or similar service. If you have yet to deploy the API side of your application. I will also create a guide to deploy your API to Azure Web App service in the future so stay tuned. Let’s get into it.
## Deploying to Azure
There are several ways to set up and deploy your Web App but to be as generic as possible, we will do the configuration through the **Azure Portal**.
### Create a static app
### Review and create
1. Select the **Review + Create** button to verify the details are all correct.
2. Select **Create** to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.
3. Once the deployment completes, select **Go to resource**.
4. On the *Overview* window, select the **Edit workflow** link to open the GitHub Action that will build and deploy your web frontend.
By default, the GitHub Action **Azure/static-web-apps-deploy** will build your **RedwoodJS** using **npm run build** or **yarn run build**, which is correct. **RedwoodJS** requires you to build your web frontend using **yarn rw build web**.
1. Select the **pencil icon** in the top right section of your source code to edit the file on GitHub. You can also make the edits locally by syncing to get the latest changes.
2. Under **Build And Deploy** find the section with the configuration for **app_location** and **output_location**.
3. Update the configuration to provide a build command override and to avoid building any API code. Your code should like similar to the following.
app_location: "/" # App source code path
output_location: "web/dist" # Built app content directory - optional
app_build_command: "yarn rw build web"
Once you have committed and synced your changes (if you made them locally). Github Action will build you application again.
To check the status of the Actions workflow, navigate to the Actions dashboard for your repository:
Once the workflow is complete, you can refresh the browser to view your web app.
Any changes to the `main` branch start a new build and deployment of your website.
### Fixing Navigation Issue
After deploying your application initially, everything will appear to be working properly. But if you attempt to load any pages other than your root `/` route you will be given a 404 page created by **Azure Static Web App** and not your **RedwoodJS** app.
👉 Suppose you are not sure where to find the URL for your Static Web App. Navigate to the Overview, and you should see a field labeled URL containing your app's URL.
To fix this problem, you have to configure Azure Static Web App to fall back all requests back to **index.html** so our **RedwoodJS** frontend can handle them.
Once you commit and sync your changes. GitHub Action will build your application again, and when complete, your application should now function properly.
### Configure Your RedwoodJS Frontend API URL
Since your **Redwood.js** API will be hosted elsewhere, you will need to update your web frontend API URL so that your request is sent to the correct location.
1. Open **redwood.toml** found in the root of your RedwoodJS application directory
2. Update the **apiURL** configuration found under **[web]** to be the base URL of your API server
# This file contains the configuration settings for your Redwood app.
# This file is also what makes your Redwood app a Redwood app.
# If you remove it and try to run `yarn rw dev`, you'll get an error.
# For the full list of options, see the "App Configuration: redwood.toml" doc:
title = "Redwood App"
port = 8910
apiUrl = "<https://my-redwood-js-api-server.com>" # you can customise graphql and dbauth urls individually too: see <https://redwoodjs.com/docs/app-configuration-redwood-toml#api-paths>
includeEnvironmentVariables =  # any ENV vars that should be available to the web side, see <https://redwoodjs.com/docs/environment-variables#web>
port = 8911
open = true
Once you commit and sync your changes. GitHub Action will build your application again, and when complete, your application should now be making API requests to the correct server.
I would like to take a moment to go over the steps you need to follow to create an **Azure Static Web App** to host your **RedwoodJS** application and explain why it was necessary.
1. Creating a Resource, aka Creating our **Static Web App**
When you created the **Static Web App**, you also created a new resource group called **redwood-apps**. When you create other resources for Redwood you can add them to this group to make it easier to organize your projects.
2. Application configuration
Depending on your application, you will need to take extra steps to support its deployment workflow. In this case, **RedwoodJS** has a custom CLI command that needs to be invoked to build an application that requires us to modify the default KUDU configuration.
If have yet deployed your **RedwoodJS** server side to a hosting provider, then stay tuned for a follow-up article on a guide on how to host your **RedwoodJS** server on Azure.
Are you curious how to deploy a RedwoodJS Server to Azure Web App Service? Read all about it in my next blog.