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

1. Navigate to the Azure portal.
2. Select Create a Resource.
3. In the top search bar, search for Static Web Apps.
4. Select Static Web Apps.
5. Select Create.
6. On the Basics tab, enter the following values.
   
   <table>
      <tr>
        <th>Property</th>
        <th>Value</th>
      </tr>
      <tr>
        <td>Subscription</td>
        <td>Your Azure subscription name.</td>
      </tr>
      <tr>
        <td>Resource group (Create new)</td>
        <td>redwood-apps</td>
      </tr>
      <tr>
          <td>Name</td>
          <td>my-redwood-app</td>
      </tr>
      <tr>
          <td>Plan Type</td>
          <td>Free</td>
      </tr>
      <tr>
          <td>Region for Azure Functions API and staging environments</td>
          <td>Select a region closest to you.</td>
      </tr>
      <tr>
          <td>Source</td>
          <td>GitHub</td>
      </tr>
    </table>
   ‍
   7. Select Sign in with GitHub and authenticate with GitHub.
   8. Enter the following GitHub values.
   ‍
   <table>
      <tr>
        <th>Property</th>
        <th>Value</th>
      </tr>
      <tr>
        <td>Organization</td>
        <td>Select the appropriate GitHub organization.</td>
      </tr>
      <tr>
        <td>Repository</td>
        <td>Select your RedwoodJS repository.</td>
      </tr>
      <tr>
          <td>Branch</td>
          <td>Select the branch you will use for production.</td>
        </tr>
    </table>
   ‍
   9. To properly build and deploy your Redwood.js app’s web side, it will require a custom configuration. In the Build Details section, select Custom from the Build Presets. Add the following values for the build configuration.
   ‍
   <table>
      <tr>
        <th>Property</th>
        <th>Value</th>
      </tr>
      <tr>
        <td>App location</td>
        <td>Enter/ in the box.</td>
      </tr>
      <tr>
        <td>Api location</td>
        <td>Leave this box empty.</td>
      </tr>
      <tr>
          <td>Output location</td>
          <td>Enter <strong>web/dist</strong> in the box.</td>
        </tr>
    </table>

### 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.

```yaml
app_location: "/" # App source code path
output_location: "web/dist" # Built app content directory - optional
app_build_command: "yarn rw build web"
skip_api_build: true
```

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:

```html
<https://github.com/><YOUR_GITHUB_USERNAME>/<YOUR_REPO_NAME>/actions

```

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.

1. Create a file called staticwebapp.config.json in the root of your RedwoodJS project directory
2. Copy and paste the following code inside.

```json
{
 "navigationFallback": {
     "rewrite": "/index.html"
 }
}
```
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

```javascript
# 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:
# <https://redwoodjs.com/docs/app-configuration-redwood-toml>

[web]
 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>
[api]
 port = 8911
[browser]
 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.

### Summary

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.

‍

Photo by Roberto Nickson on Unsplash