React / Vue, S3 and GoDaddy

So this is the first of my 90 day attempt to write a blog every day for my ventures into running my own software consultancy.

So I’ll structure the blogs based on my learnings for each day so that it’s not more of a story but something everyone can learn from technically

So starting this off with hosting your static website on Amazon S3, now this isn’t a standard html page with css and js. What if you had a React or a Vue application that you wanted hosted on a server, sure there’s heroku, but thats really slow, and the paid version isn’t worth it to some extent!

I’ll be using Vue as an example because of the easily usable and accessible Nuxt.js framework available which almost makes development as easy as life can get. You have your index.vue which is your main page and then the rest of the views can simply be imported in and you can use a simple html, <style> and <script> tag structure to build your applications through! I encourage you to read up the docs, its minimal coding, and you get to learn Vue JS !

Alright so you built your app in Nuxt, now what you do is simply execute the following code

npm run generate

This generates a static dist file containing an html file, favicon, and _nuxt folder which has your app broken down in chunks as well as any images/videos/assets!

Alright so you have your code now what, two things —

Create a AWS account and log into your aws console, select S3 as the service you’d like to use. Create a bucket, make sure you name the bucket the same as your website domain you bought/will buy on GoDaddy or where ever. So if you want to call your website www.xyz.com, then name your bucket www.xyz.com. Alright just follow through the instructions and boom you’ve made your bucket, but not just done yet.

Jump into the “Properties” tab and select the Static Web Hosting tab, that should open up a modal, type in the name of your html file you want to host, most likely it’ll be index.html, do the same for the 404 routing, as if you have a front end router set up, that should take care of it for you! Save it and onto the last AWS step.

You need to set your policies, which you can do in the “Permissions” tab and in the “Bucket Policy” sub-tab, there’s heaps of documentations for this, but if anything you can use the policy generator at the bottom of the page to get you started.

Second, you need a domain name, domain name being whatever you want to call your website, lets go with www.five2one.com.au. So, I’ve used GoDaddy for my domain registration. Once you’ve bought a domain, go your homepage, click on your user name, from the dropdown — select manage my domains, select your domain name, scroll to the bottom and select Manage DNS.

This opens a new page with a whole bunch of things with A, CNAME etc etc, add a new WWW CNAME — check the image below. Notice that this does not include the name of the bucket as in the URL generated by the S3 static page bucket hosting. Yours might be different based on the region you’re based in. Make sure to get rid of the name of your bucket; just have the part similar to below.

Next and last thing you need to do is forward your website in situations where people visit five2one.com.au to go to www.five2one.com.au. For that, what you need to do is forward your website in situations where people visit five2one.com.au to go to www.five2one.com.au

And give this a save, wait for at least 30 minutes and everything should be working fine!

www.Five2One.com.au is a software consultancy based in Sydney, we’ve built products for start ups and large tech firms. We’ve worked with global startups and multi-national companies ranging from the Insurance, Aviation, Law, Car Manufacturing all the way to the Betting industry. Get in touch and lets make software development collaborative, sensible and great!