Vite JS Tutorial: Deploying to AWS S3

Welcome to the Vite JS Deployment to AWS S3 tutorial! In this guide, we'll walk you through the process of deploying your Vite project to Amazon Web Services (AWS) S3. Let's get started!

📝 Prerequisites

Before we dive in, make sure you have the following prerequisites:

Node.js (>=14.x) installed on your machine
An AWS account with access to S3
A Vite project set up (if you don't have one, follow Vite Getting Started)

🎯 Project Structure

A Vite project follows a specific structure. Here's a brief overview:

my-vite-project
|- node_modules
|- public
|- src
|- vite.config.js

💡 Why Vite?

Vite is a modern front-end build tool that offers faster development and production-like build times. It's a great choice for building scalable and efficient web projects.

📝 Setting Up AWS S3

Sign in to your AWS Management Console.
Navigate to the S3 service.
Click Create bucket, provide a unique name, and click Create.
In the bucket properties, find the Bucket policy section and update it with the following JSON policy:

json

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:GetObject"
      ],
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}

Replace YOUR_BUCKET_NAME with the name of your S3 bucket.

🎯 Building Vite Project for Production

Install necessary dependencies:

bash

npm install vite-plugin-react-refresh @vitejs/plugin-react @vitejs/plugin-vue

Update vite.config.js:

javascript

import { createVuePlugin } from '@vitejs/plugin-vue'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default ({ command }) => {
  return {
    plugins: command === 'build'
      ? [reactRefresh(), createVuePlugin()]
      : [reactRefresh()]
  }
}

Build your Vite project for production:

bash

npm run build

💡 Production Build Explanation

The production build process includes minification, source mapping, and optimizations to improve the efficiency and size of the output files.

🎯 Deploying to AWS S3

Install aws-s3 package:

bash

npm install aws-sdk

Create a new file named deploy.js in the root of your project:

javascript

const { S3Manager, Uploader } = require('aws-s3');
const path = require('path');
const fs = require('fs');
const { viteStaticCopy } = require('vite-static-copy');

const bucketName = 'YOUR_BUCKET_NAME';
const region = 'us-west-2';
const accessKeyId = 'YOUR_ACCESS_KEY_ID';
const secretAccessKey = 'YOUR_SECRET_ACCESS_KEY';

const s3 = new S3Manager({
  region,
  accessKeyId,
  secretAccessKey,
});

async function sync() {
  const { distDir } = await viteStaticCopy({
    root: path.resolve(__dirname, 'dist'),
    outDir: path.resolve(__dirname, 'build'),
    copyPublicDir: false,
  });

  const uploader = new Uploader({ s3 });

  const promises = fs.readdirSync(distDir).map((file) => {
    const filePath = path.join(distDir, file);
    const s3Params = {
      Bucket: bucketName,
      Key: file,
      Body: fs.readFileSync(filePath),
    };

    return uploader.upload(s3Params).promise();
  });

  await Promise.all(promises);
  console.log('Deployment complete!');
}

sync();

Replace YOUR_BUCKET_NAME, us-west-2, YOUR_ACCESS_KEY_ID, and YOUR_SECRET_ACCESS_KEY with your AWS S3 bucket details.

Run the deployment script:

bash

node deploy.js

Your Vite project should now be deployed to AWS S3.

💡 Deployment Script Explanation

The deployment script uses the vite-static-copy package to copy the production-built files to a temporary directory (build) and then uploads those files to your S3 bucket.

🎯 Testing Deployment

Check the S3 bucket contents in the AWS Management Console.
Copy the URL of an index file (e.g., index.html) from the bucket properties.
Open the URL in your browser.

If everything went well, you should see your Vite project live!

💡 Quiz

That's it! You've successfully deployed your Vite project to AWS S3. Happy coding! 🎉