Introduction

In the ever-evolving landscape of web development, choosing the right tools and platforms for your projects is crucial. Vite, a fast and opinionated front-end build tool, has gained popularity for its speed and simplicity. If you've developed a React application using Vite and are ready to take it to the next level by deploying it to the cloud, Azure App Service is an excellent choice. In this guide, we'll walk you through the process of deploying a Vite React app to Azure App Service.

Prerequisites

Before we dive into the deployment process, make sure you have the following prerequisites in place:

1. Azure Account: You'll need an active Azure account. If you don't have one, you can sign up here.
2. Node.js and npm: Ensure that you have Node.js and npm installed on your local machine. You can download them from Node.js official website.
3. Vite React App: Develop a React application using Vite. If you haven't created one yet, you can initialize a new Vite React app with the following command:

>npx create-vite@latest my-vite-react-app --template reactCopy

Steps to Deploy

1. Build Your Vite React App: Navigate to your Vite React app's root directory in the terminal and build the project using the following command:

>npm run buildCopy

This command generates a dist folder containing the optimized and production-ready version of your application.

2. Create an Azure App Service:

1. Log in to the Azure Portal.
2. Click on "Create a resource" and search for "App Service."
3. Select "App Service" from the results and click on the "Create" button.
4. Fill in the required information such as App Name, Subscription, Resource Group, and choose the runtime stack (Node.js).
5. Click on "Review + create" and then "Create" to provision the App Service.

3. Configure Deployment Settings:

1. In the Azure Portal, navigate to your App Service.
2. In the left menu, go to "Deployment Center."
3. Choose a source for your deployment, such as GitHub, Azure Repos, or local Git. Follow the prompts to connect to your repository.
4. Configure the branch you want to deploy.

4. Deploy Your Vite React App:

1. Once the deployment source is configured, click on "Sync" to initiate the deployment.
2. Azure App Service will automatically detect the Node.js application and set up the necessary environment.
3. Monitor the deployment process in the Deployment Center.

5. Access Your Deployed Vite React App:

Once the deployment is complete, you can access your Vite React app by navigating to the URL provided in the Azure App Service overview.

Note for Mac users:

Naviate to Settings > Configuration > General Settings > Startup Command and enter in this command:
>pm2 serve /home/site/wwwroot/dis --no-daemon --spaCopy

Conclusion

Congratulations! You have successfully deployed your Vite React app to Azure App Service. This scalable and reliable hosting solution allows you to showcase your application to the world effortlessly. As you continue to enhance your app, Azure App Service provides easy integration with CI/CD pipelines, custom domains, and more, giving you the flexibility to meet your project's evolving needs. Happy coding!