My Life in Dev

I’m back to this blog/development/writing endeavour. Let’s have a quick review of what I did previously:

• Created hosted zone on Route 53;
• Created an S3 bucket and made it Public available;
• Configured the S3 bucket to serve as an HTTP static content;
• Uploaded a good looking/one of a kind index.html and made it public readable

I’m not a designer so I’ll use some libraries to help me to start. First of all, I need to choose a frontend library, nowadays no one works with just HTML and javascript.
I’ll use VueJS because I want to try it out and I know it is pretty fast and I do want a fast blog.
I won’t write much about coding at this moment, but I’ll leave links to all the documentation.

Ok, I have a frontend library defined, but how am I suppose to control my source code version? AWS offers a managed service to do it.  It’s called AWS CodeCommit, and it's free.
To set up a new repository you can open your AWS Console management:

• Click on Services
• Type CodeCommit and hit Enter
• Click on Create Repository
• Specify the repository name ‘blog-frontend’
• Click on 'Create’
  

Your new repository is created, let’s begin and push some code.

Wait a minute, I need a git credential to clone the repository, I tried the clone command with my IAM credentials and it failed:

To fix this I need to create a specific git credential, this is how we can do it:

• Open https://console.aws.amazon.com/iam/home#/users
• Select the user you want to create the Git Credential
• Click on ‘Security Credentials’
• Scroll down to ‘HTTPS Git credentials for AWS CodeCommit’ and click on Generate
• Download the Generated credential and store it in a safe place.

Now I’ll use this recently generated credential to try to clone the repo again.
*If you are running windows as I am, you will need to delete or update the credentials that were used before. You can do it by opening the Credential Manager and clicking on Windows Credentials. If you are running Linux/Mac you probably know how to do it.

git clone https://git-codecommit.eu-west-1.amazonaws.com/v1/repos/blog-frontend

From an empty folder to a VueJS app in simple steps.
First install Yarn (https://yarnpkg.com/lang/en/docs/install/#windows-stable), in my case I use Chocolatey to manage windows packages, just because I’m lazy.

choco install yarn

Now let’s install Vue CLI (https://vuetifyjs.com/en/getting-started/quick-start) using our recent installed Yarn:

yarn global add @vue/cli

To create the App and install Vuetify we need to follow simple steps:
1º Create the VueApp:

vue create blog-frontend

2º Add Vuetify to the app:

cd blog-frontend && vue add vuetify

3º Run the app:

yarn serve

At this point you should have the same page I got:

I’ll edit this page to have a basic text with links for this and the previous post and I'll run a VueJS build.

yarn build

The command above generates a dist folder, which contains all the static generated files. The last step now is to upload all the content from the Dist folder to my S3 bucket and grant public read access.

You should be able to check it out at http://blog.wolf.srv.br/

• Developing a highly scalable blog from scratch - Part I