Deploying a Front End to S3

This is a guide meant to help you deploy any front end project or static files like (html, js, css) to an S3 bucket. For example if you have a node.js module you created with Vite. You can deploy updates quickly this way without having to log into AWS console. This guide assumes you are working with Visual Studio Code.

Install AWS CLI

Use the following command to install the AWS command line interface on your development environment. Follow this guide for more information. You will also need to set up your credentials afterwards and may need to install some more python packages.

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

Deploy your project

Just add the following "deploy" line to your package.json file to deploy your files to S3. The rest you see are some Vite default commands. Be sure to update the name of your bucket and project.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "aws s3 sync dist s3://bucket-name/project-name --delete"
  },

Now you can deploy with just one command.

npm run deploy

That's it!