Deploy a Docusaurus App on Azure Static Web Apps
Tags: azure, javascript, showdev, staticwebapps
Published: 2020-08-15 13:04:44

In this article, we are going to build a simple app using [Docusaurus](https://docusaurus.io/en/) and deploying the application to [Azure Static Web App](https://azure.microsoft.com/en-in/services/app-service/static/). So please grab a cup of coffee and start learning.

#### Table of Content
1. What is Docusaurus?
1. What is Azure Static Web App?
1. Build a simple app using Docusaurus
1. Deploy app into Azure Static Web App


# What is Docusaurus?

Do you want to create great documentation for your project then Docusaurus is best option for building a documentation websites.  It uses Markdown for documentation. Docusaurus is built using React so you can always customize the website as you want. It also supports Localization and document versioning. 

# What is Azure Static Web App?

[Azure Static Web App](https://docs.microsoft.com/en-in/azure/static-web-apps/) is first launched as a preview in [Microsoft Build 2020](https://mybuild.microsoft.com/home).

According to Azure Static Web App [doc](https://docs.microsoft.com/en-in/azure/static-web-apps/overview):

> Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository.

With Azure Static Web App you can deploy any static application which is build using any Javascript framework or library or SSG. It uses Github actions to do the deployment out of the box. We can also host Azure function with the same application. Microsoft has created very good documentation so you can read more about Azure Static Web App [here](https://docs.microsoft.com/en-in/azure/static-web-apps/overview).  Currently, Azure Static Web Apps are in preview. We can learn how to create Azure Static web app resources and how to configure our app deployed later in the article.

The azure static web app uses Github actions to do a deployment of the application. We have to just create Azure static web app resource and set up our application such as the location of the folder after prod build of our app, default app directory,  if you any custom build command then you can also specify. Once you provide all the data and create resource then Azure static web app create a github action workflow into our repository and deploy our application. So after that every time you push commits or accept pull requests into the watched branch, the GitHub Action automatically builds and deploys your app and its API to Azure.



## Features 
1. Free SSL certificates
1. It has the support of Azure Functions for adding some dynamic content into our app.
1. All the static content is globally distributed 
1. It also provides 1 pre-production i.e. staging environment to preview our changes before pushing to production. 

You can read more features [here](https://docs.microsoft.com/en-in/azure/static-web-apps/overview#key-features).

# Build a simple app using Docusaurus

#### Prerequisites
*You need to have installed the latest stable version of Node JS and NPM. You can also install Yarn as well.*

Install Docusaurus cli using below command:

```
npm install --global docusaurus-init
```
or

```
yarn global add docusaurus-init
```

Now create a folder for our app `docusaurus-swa-app` and navigate inside that into folder.

```
 mkdir docusaurus-swa-app
 cd docusaurus-swa-app
```

Now run the below command to create Docusaurus app

```
docusaurus-init
```

After completion of the above step, the docusaurus installation script creates two new directories: docs and website.

To run the app navigate to `website` folder and run below command.

```
npm start
```
or 
```
yarn start
```
Open `http://localhost:3000` to see the basic app.


![docusaurus-local-1.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1597428239559/KQ__7VjTu.png)

Open the `package.json` file under website folder add dependencies section as below:

```
{
  "scripts": {
    "examples": "docusaurus-examples",
    "start": "docusaurus-start",
    "build": "docusaurus-build",
    "publish-gh-pages": "docusaurus-publish",
    "write-translations": "docusaurus-write-translations",
    "version": "docusaurus-version",
    "rename-version": "docusaurus-rename-version"
  },
 "dependencies": {
    "docusaurus": "^1.14.6"
  }
}
```

So we have created our app successfully, next step is to push the code to Github.

Login to [Github](https://github.com/) and create new repository.


![github-2.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1597472750496/-ZL5M2EQ-.png)

Follow the below steps for commit and push the project into Git.

```
git init
git add .
git commit -m "first commit"
git remote add origin <your repo address>
git push -u origin master
```

# Deploy app into Azure Static Web App

#### Prerequisites
*An Azure account with an active subscription. If you don't have one, you can [create an account for free](https://azure.microsoft.com/free/).*

1. Navigate to the [Azure portal](https://portal.azure.com)
1. Click **Create a Resource**
1. Search for **Static Web Apps**
1. Click **Static Web Apps (Preview)**
1. Click **Create**
1. For _Subscription_, accept the subscription that is listed or select a new one from the drop-down list.

1. In _Resource group_, select **New**. In _New resource group name_, enter **docusaurus-swa-app** and select **OK**.

1. Next, a name for your app in the **Name** box. Valid characters include `a-z`, `A-Z`, `0-9` and `-`.

1. For _Region_, select an available region close to you.

1. For _SKU_, select **Free**.


![basic-app-details.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1597432908008/58eWzhNGA.png)

1. Click the **Sign in with GitHub** button.

1. Select the **Organization** under which you created the repository.

1. Select the **docusaurus-swa-app** as the _Repository_ .

1. For the _Branch_ select **master**.


![completed-github-info.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1597433812120/enpPzLimK.png)

Next, add configuration settings that the build process uses to build your app.

1. Click the **Next: Build >** button to edit the build configuration

1. To configure the settings of the step in GitHub Actions, set the _App location_ to **/website**.

1. Set _App artifact location_ to **build/test-site**.

   A value for _API location_ isn't necessary as you aren't deploying an API at the moment.


![build-details-new.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1597470064531/Wbux5hLgS.png)

1. Click the **Review + Create** button to verify the details are all correct.

1. Click **Create** to start the creation of the App Service Static Web App and provision a GitHub Action for deployment.

1. Once the deployment completes click, **Go to resource**.

1. On the resource screen, click the _URL_ link to open your deployed application. You may need to wait a minute or two for the GitHub Action to complete.


![portal-final-view.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1597470341120/02ymAC1Q8.png)

![deployed-app.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1597470201263/vseNMigpB.png)

That's it. We have successfully deployed our **Docusaurus** on **Azure Static Web App**.

# Conclusion

In this article, We have created a basic app using **Docusaurus**. We have also deployed the same application on **Azure Static Web App**.

I really hope that you enjoyed this article, share it with friends and please do not hesitate to send me your thoughts or comments.

You can reach out to me on twitter [@sumitkharche01](https://twitter.com/sumitkharche01).

Happy Coding!!