1. Introduction

Goal of the Tutorial

This tutorial aims to guide you through the process of deploying a JavaScript application built with Vite.

Learning Outcomes

By the end of this tutorial, you will be able to:
- Build your application for production using Vite
- Deploy your application on a server

Prerequisites

You should have basic knowledge of JavaScript and some experience with Vite.

2. Step-by-Step Guide

Building your Application for Production

First, you'll need to build your application for production. This can be done by running the following command in your project's root directory:

npm run build

This command will create a dist directory with your compiled project.

Deploying your Application

To deploy your application, you'll need to host the dist directory on a server. This can be done using various hosting providers such as Netlify, Vercel, or even on a custom server.

3. Code Examples

Building your Application

Here's what your package.json scripts might look like before running the build command:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

Once you run npm run build, Vite will create a dist directory in your project root.

Deploying your Application

Here's an example of how to deploy your application on Netlify:

1. Install the Netlify CLI:

   bash npm install netlify-cli -g

2. Navigate to your project directory and run the following command to deploy:

   bash netlify deploy

3. Follow the prompts to authorize Netlify and choose your build settings. For the build directory, specify dist.

4. Summary

In this tutorial, we've covered how to build a JavaScript application for production using Vite and how to deploy it on a server.

To continue learning, you can explore different hosting providers and how they might be used to serve your Vite applications.

5. Practice Exercises

1. Exercise 1: Create a new Vite project and build it for production.

   Solution: Here's a step-by-step solution:

   1. Create a new Vite project:

      bash npm init vite@latest

   2. Navigate to your new project directory:

      bash cd my-vite-project

   3. Install the dependencies:

      bash npm install

   4. Build your application for production:

      bash npm run build

2. Exercise 2: Deploy your Vite project on a different hosting provider, like Vercel.

   Solution: Here's a step-by-step solution:

   1. Install the Vercel CLI:

      bash npm install -g vercel

   2. Navigate to your project directory and run the following command to deploy:

      bash vercel

   3. Follow the prompts to authorize Vercel and specify your build settings. For the build directory, specify dist.

Remember to keep exploring and experimenting with different tools and technologies to continue improving your web development skills.