Fix seeing azure default deploy page and access env to env file

Many developers have chosen to use Vite instead of the conventional cra (create react app) mainly because of its lightweight nature. However, there have been complaints as to the deployment of Vite or React projects on Azure. One of the challenges faced after deploying on Azure is that the default Azure deploy page remains visible when accessing your website URL and the deployed project does not have access to env files, stay put I am here to help.

Prerequisites

1. An account with Azure

2. An active web app service on Azure

3. Knowledge and use of react-router in your Vite project

4. Knowledge of GitHub

Let's start the process by creating a vite project using npm or yarn.

npm create vite@latest
yarn create vite

To prepare your Vite project for deployment and utilize a .env file specifically for production, follow these steps.

1. Create a .env.production File:

In the root directory of your Vite project, create a new file named ".env.production". This file will hold the key-value pairs specific to your production environment

2. Add Key-Value Pairs:

Open the .env.production file and add the key-value pairs that correspond to your production environment configuration. Ensure that your env file keys start with VITE_APP_

Step 1: Install env–cmd package

To ensure that your project have access to your .env file and its values in production, follow the step below after creating a .env.production file.

npm install env-cmd

Step 2: Add a custom build script to your configuration file

After installing the above package, you will need to add a custom build script to your package.json file under the scripts section.

1. In your package.json, under the script section, add the script “build-production” as a key and the value should as “env-cmd -f .env.production vite build”.

2. After adding the above custom build script, run the custom build script in your terminal to generate a production dist folder.

npm run build-production

A dist folder will be created in your root directory after a successful run.

Step 3: Deploying your project using Github Action

Go to your web app portal, in the overview section under general settings, ensure that your Azure web app runtime stack is Node and not .NET/ASP.NET.

Push your code to a GitHub repository.
Go back to your Azure web app portal and click on the deployment center, you can use the search bar for easy access.
Select your project source as Github and connect your Github account.
Select the project repository and the branch you want to deploy from.
A GitHub action work file will be generated for you. You can click on the preview file button to see it.
Ensure you save before exiting.
Go back to your GitHub repository, and a .GitHub/workflows folder will be generated for you. You can view the work file generated by Azure in this folder.
Navigate to your actions tab on your GitHub repository and run the generated workflow file. Wait for your project to be deployed.

Step 4: Verify Deployment Completion.

After deploying your project, to ensure that it was actually deployed, follow the steps below.

Go to your web app project portal and search for “advanced tools”
Click on the “Go” or arrow button.

You will be directed to a Kudu page that looks like what you can see below, click on the “Bash” tab and follow the steps below:
Change the directory to “site” by typing “cd site” and hit Enter in the terminal provided.
```
 cd site
```
Change the directory to “wwwroot” by typing “cd wwwroot” and hit Enter in the terminal.
```
 cd wwwroot
```
View the content of the current directly by typing ls in the terminal and hit Enter.

If you see the dist folder in your wwwroot directory, it means that your project was successfully deployed.

Step 5: Start-up Command to the configuration.

Despite completing the aforementioned steps, if you navigate to your website's URL, you will continue to see the default Azure deploy page instead of your expected content.

You need to add a command to our Azure web app start-up section. This is to redirect incoming requests to the index.html file in your dist folder.

Got to your web app portal, click on Configuration.
Under the general settings tab, locate the startup command section

Add the command to your startup Command section

  pm2 serve /home/site/wwwroot/dist --no-daemon

Click on save, to save your edit.
Restart your web application on Azure.
Go back to your website URL and your custom homepage will be visible.

Conclusion

In summary, if you have successfully completed the steps provided, your custom homepage should be visible. Additionally, your project will have the capability to access the .env.production file seamlessly. By following the instructions carefully, you have ensured that your customizations are visible and your project functions properly. Take a moment to appreciate your achievement in successfully configuring the deployment of your Vite project on Azure.

Troubleshooting the Azure Default Deploy Page and Enabling Env File Access for Vite Projects on Azure.