In this guide, I will walk you through how to do a basic deployment for your **RedwoodJS** server to **Azure Web App Service**. This is a follow-up guide to **[Deploying RedwoodJS Web to Azure Static Web App](https://www.codingzeal.com/posts/deploying-redwoo-js-web-to-azure-static-web-app)** where I take you through the step necessary you deploy your **RedwoodJS** front-end.

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

### Sign in to Azure portal

Sign in to the Azure portal at [https://portal.azure.com](https://portal.azure.com/).

### Create **App Service**

1. Type **app services** in the search. Under **Services**, select **App Services**.
2. On the **App Services** page, select **Create**.
   

   
3. In the **Basics** tab,

    a. Under **Project details**, ensure the correct subscription is selected
    
    b. Select the resource group we created in the last guide in the drop down ***redwood-apps,*** if you don't have one created yet, select the **Create New**.
   
    c. Name your app whatever you like.
  
    d. Under **Instance details**, type a globally unique name for your web app and select **Code**. Select *Node LTS* **Runtime stack**, an **Operating System**, and a **Region** you want to serve your app from.
   
    e. Under **App Service Plan**, select **Create new** App Service Plan. Type redwood-sever-plan  for the name. To change to the Free tier, select **Change size**, select **Dev/Test** tab, select **F1**, and select the **Apply** button at the bottom of the page.
   

   
4. Select the **Review + create** button at the bottom of the page.
5. After validation runs, select the **Create** button at the bottom of the page.
6. After deployment is complete, select **Go to resource**.

Now, your Web App Service is created and ready to receive our code. Let’s dive into the process to deploy our code from GitHub.

### Use the Deployment Center

In this next section, I will walk you through how to deploy your **RedwoodJS** server side to your brand new **Azure Web App Service** using **GitHub Actions**.

You can quickly get started with **GitHub Actions** by using the **App
Service Deployment Center**. This will automatically generate a workflow
file based on your application stack and commit it to your GitHub
repository in the correct directory. Afterward, we will be doing some custom configurations to the deployment process that helps ensure a successful deployment.

1. From your brand new web app
2. On the left side, click **Deployment Center**
3. Under **Continuous Deployment (CI / CD)**, select **GitHub**
4. Next, select **GitHub Actions**
5. Use the dropdowns to select your GitHub repository, branch, and application stack
   - If the selected branch is protected, you can still continue to add
   the workflow file. Be sure to review your branch protections before
   continuing.
6. On the final screen, you can review your selections and preview the
workflow file that will be committed to the repository. If the
selections are correct, click **Finish**

This will commit the workflow file to the repository. The workflow to build and deploy your app will start immediately. But the deployment will fail because **RedwoodJS** requires us to customize the deployment process.

### Why do we need to customize the deployment process?

By default the GitHub Action **azure/webapps-deploy**, it will try to auto-build your application by running **yarn workspace**, which will result in failure. If you somehow could get it past the **yarn install**, it would automatically run **yarn build** but we actually need to run **yarn rw build api** instead.
Customizing the deployment script is the best approach I have found to succeed. App Service uses a preconfigured Kudu build process to build your application, but you can generate and customize this file. And that was the route I took.

### Customizing Deployment Process

When building and deploying Azure Web App Service it will use a default Kudu script for all **node.js** applications. Since we need to customize this build process we will need to generate the script and then modify it to suit our needs.

1. Install the [kuduscript](https://github.com/projectkudu/KuduScript) tool: `npm install kuduscript -g`
2. Go to the root of your **RedwoodJS** project.
3. Generate the deployment script: `kuduscript -y --node`
   
    a. This command will generate the files required to deploy your site.
       - **.deployment** - Contains the command to run for deploying your site.
       - **deploy.sh** - Contains the deployment script (or **deploy.cmd** if running on Windows)
4. Modify the **deploy.sh** file (I am working on the Mac) and update step 3, **Install npm packages**
 
    a. Replace the install step with `eval yarn install`
 
    b. Add the **RedwoodJS CLI** build command after installing `eval yarn rw build api`
 
     c. The end result of the section should look like the following.
   
   ```jsx
   # 3. Install npm packages
   if [ -e "$DEPLOYMENT_TARGET/package.json" ]; then
     cd "$DEPLOYMENT_TARGET"
   
     echo "Running yarn install"
     eval yarn install
     echo "Build!"
     eval yarn rw build api
     exitWithMessageOnError "yarn failed"
     cd - > /dev/null
   fi
   ```
   

After Kudu runs that custom deployment it will start the server automatically using **yarn start**, but nothing will happen since **RedwoodJS** has a CLI tool for running server side.  

Update the **package.json** and add a script to run **yarn rw serve api** using **start** command is the next thing to do.

```json
{
 "private": true,
 "scripts": {
   "start": "yarn rw serve api"
 },
 ...
}
```

Now you need to update the GitHub Action workflow that was automatically generated. Since we are leaning on our **deploy.sh** script to do all the work, all of the **build** steps will be striped out.

```yaml
# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

# name: Build and deploy Node.js app to Azure Web App - redwood-goose

on:
 push:
   branches:
     - main
 workflow_dispatch:

jobs:
 build:
   runs-on: ubuntu-latest

   steps:
     - uses: actions/checkout@v2

     - name: Upload artifact for deployment job
       uses: actions/upload-artifact@v2
       with:
         name: node-app
         path: .

 deploy:
   runs-on: ubuntu-latest
# ... rest of deployment steps
```

‍

### Update RedwoodJS Configuration

The last setup step is to configure **RedwoodJS** to use the PORT that our App Service would like to run the application. Open your **redwood.toml** file and update the api sections port so it can use the PORT specific by **App Service.**

```yaml
...
[api]
 port = "${PORT:8911}"
[browser]
...
```

‍

### Summary

Following the guide, you should hopefully have a fully deployed **RedwoodJS** server side that your frond-end can now communicate with. If you haven't yet deployed your front end and would like to deploy it to Azure, then check out my guide on Deploying RedwoodJS Web to Azure Static Web app. Hopefully, in the future, the **RedwoodJS** community can come up with a better production deployment process using either Azure’s serverless functions implementation or scalable serverful runtime. But till then this should get you bootstrapped and ready to challenge the next problem.

‍

Photo by Nail Gilfanov on Unsplash