Deploying our production-ready React app to S3

In part 1, we have set up a simple react app with all the components that you typically find in a high quality, production-ready react app such as unit test, git pre-commit hooks, flow type, etc… All that is left is to deploy our app and set up a robust continuous integration / deploy system. One of the main design goal for vudo app is to only pay for hosting when the app is being used, therefore we’ll use S3 to host our app and cloudfront CDN to make it fast.


  1. Sign up for AWS account. Get IAM access key & secret key. For detail instructions, see https://docs.aws.amazon.com/rekognition/latest/dg/setting-up.html
  2. Download aws-cli and configure authentication, https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html

Read more

From zero to production-ready React app

What is a production-ready react app?

This is the first tutorial as a result of me developing Vudo. This article will go through setting up the most production-ready react app that simply says Hello world. This article will not go into much detail about react itself but more about all the tooling and process to go from an empty folder to production-ready react app. By production-ready react app, I mean the following that you usually don’t find with a react tutorial

  1. Linting with eslint: Linting is essential in catching anything from minor style problem to potential bugs with a misplaced ;
  2. Tests with Jest: Jest was a testing framework created by Facebook and it works well with React so that what we’ll be using here
  3. Type checked with flow
  4. Git pre commit and push hooks: To prevent developers from committing bad code, we use pre-commit and pre-push hooks that will run lint & test script before every commit and every push
  5. Packaged by webpack

We can’t call our app a production-ready react app if it’s not in production. The follow up article will go through setting up continuous integration and deploying to S3

  1. Continuous integration and deploy using CircleCI: All commits are automatically built and deployed to S3 using CircleCI.
  2. Hosted by S3 with Cloudfront CDN: Instead of hosting our static files on an web server, we will host them on S3 which will drastically reduce our hosting cost. To make it even faster for our end users, we’ll also setup a cloudfront CDN that will serve our javascript files from a cache that is closest to our end users.

Read more

Technologies used in vudo

Here are technologies that I will be using to build Vudo. To maximize my learning effort, I have selected either popular technologies that I’m not good at like react, redux or up and coming technologies like graphql, serverless.


API backend

GraphQL API running on AWS Lambda, DynamoDB and other AWS technologies. My goal is to make it insanely cheap to host this API therefore Lambda and DynamoDB make perfect sense because their free tiers are more than enough for a light traffic site and best of all, they don’t expire after one year

Web frontend

React web application hosted on S3, accessed via cloudfront. Again, I don’t want to pay for hosting so S3 is a good option. Most of the cost will probably come from traffic & request since storing html & javascript file won’t cost as much

Mobile application

React native. Since I already developed a web frontend on React, using React Native for iOS and Android is the way to go. I think the ability to reuse code more than make up for potential shortcoming

That’s it for now. Stay tune for the introduction article with a walkthrough of the initial setup

Vudo, a open source todo app or how I learn react, serverless and graphql

Introducing my newest project an open source todo app called vudo written in Javascript running on AWS lambda. Obligatory keywords for recruiter. It also uses graphql, dynamodb, react and redux

A little background

One of my goals for this year is to get serious about my productivity. Over the years, I have read enough books on productivity to learn that being productive is to figure out what the most important thing to work on and work on it effectively. It’s very easy to work hard on the wrong things, for example, checking and replying to email can seem like real work but you are much more productive working on your core competency.

Another goal is to launch something and learn some new technologies during the process. I’ve wanted to (re)learn react, graphql, serverless and css. Yes, I’m one of the full stack developer that are more 90% stack because I don’t understand CSS. This would be the year that I learn CSS. Throw in react native to the mix to get some mobile development exposure and the list seems really daunting. Surely, I need something to track my to do, project, goals, etc.. in order to accomplish this, right?

Then it dawns on me. I will create a to do app.

Read more