When working with Single Page Application (SPA), we usually host it on AWS S3 or Vercel or VPS. AWS S3 seems to be a popular hosting for SPA because we can benefit from all other AWS features.
 
In this article, we will learn how to serve SPA using S3 Static website hosting.
 

Host on S3

 
After build our SPA, we need to setup S3 to serve our website.
 
First, access to S3 page and click Create bucket button.
 

 
Next, input bucket name
 

Bucket name should be our domain so we can configurate DNS later

 

Our website needs to be public so our users can access to the website at any place and any time
 

 
Click Create bucket to create this bucket to upload our SPA built code.
After this one is created, access to the bucket and go to tab Properties. Scroll down to the section Static website hosting, click Edit
 

At this step, we will enable static website hosting and point the index file when accessing using S3 url and click Save changes
 

Set Error document to index.html if you have problem with routing

 

Next, go to tab Permissions and click Edit at section Bucket policy and then add this to its content
 

Remember to change the resource to your bucket ARN

 

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

 

After enabling the static website hosting, S3 will generate an url for us to access our website
 

Now, upload our build and use that url to see our website.
 

Great! Our website is live now.
 

Wrap up

 
We already go through all the steps to host a SPA on AWS S3. With S3, we can easily host our website on it. And it also provides us a domain to access to it instead of using IP like we self-host on VPS and haven't bought any domain yet.
 
Besides AWS S3, we also can easily host our SPA on Vercel - a popular free hosting for SPA recently. This is the best choice for personal projects.