Using Route53 for aliasing Cloudfront distributions

  • Amazon Route 53 to help you get a website or web application up and running.
  • Hope you have followed my previous blog posts for deploying Serverless React Applications for deploying the application into s3 and pointing a custom domain in cloudfront with ssl.
  • copy the domain name for the created distribution from the previous blog post.
  • Login to your AWS Console

Continue reading “Using Route53 for aliasing Cloudfront distributions”

Advertisements

Adding SSL and custom domain to serverless react application with cloudfront

  • For deploying a server-less react application read my previous blog post.
  • This post explains to setup SSL and custom domain for your react application.
  • Login into AWS Console
  •  Go to services and search ‘cloudfront’ and select the ‘Cloudfront’.8-cf

Continue reading “Adding SSL and custom domain to serverless react application with cloudfront”

Deploying serverless React application using s3

Hello! Have you ever thought of deploying a react app without server? Well in this blog I will walk you through the steps for doing it using AWS s3.

  • Login into your aws console with your credentials.
  • In the services menu search s3 and choose the S3.1-s3-1.png
  • Click on the ‘Create bucket’ button.

Continue reading “Deploying serverless React application using s3”

Using ES6 in nodeJS

Are you getting bored writing the ES5 code in nodeJS, then this is time to move to ES6. However node 6 has built in support for ES6, this post is meant for people using older versions of node.

  • Install babel-cli in your project
    npm install --save babel-cli
  • Install ES2015 presets for babel
    npm install --save babel-preset-es2015
  • If you want to compile your entire server code to distribution then you can use
    babel server/index.js -d output.js
    and then run
    node output.js
  • Else if you just want to run your code then use
    babel-node server/index.js
    This will automatically compile and run the es6 code for you.

Enjoy programming in ES6.

Contributing packages to npm

If you are a open source developer then you may feel to contribute to open source as well. This post helps you to get started with contributing to open source especially npm (Since I am a javascript lover).

Prerequisites:

  • Install node
  • Install npm

Creating the package:

  • Create a directory

$ mkdir <your project name>

  • Create a npm project

$ cd <your project name>
$ npm init

  • Give details as required.
  • Create your project files
    $ vi somefile.js
  • In your file start writing your functions
    yourFunction = function () { .... };
  • Dont forget to export your function at the end of the file.
    exports.default = yourFunction

Publishing:

  • Once your package is ready then you need to publish it to npm
  • To publish to npm you first need an account in npm
  • Then add your account to your machine

$ npm adduser

  • Give your username and password.
  • Now, ready to publish

$ npm publish

Yay!! your package is published and you are a open source contributor.

Javascript rocks!!!

Getting started with Redux

Redux is yet another framework for React web Apps. Today’s web applications are getting more into single page applications which requires lot of states to be known by the app like the cache data, local data, which tab to open, what content should be put in which tab etc.,  if we fail to know clearly about the states we are using in the app then it becomes difficult to find the error in case of bug. In order to facilitate this we use Redux which provides a nice way of dealing with states. Also Flux, is another framework which does this.

I have made a codepen to get started with Redux. In this code pen you can find a counter made with Redux.

Redux provides a method createStore which has three functions getState(), dispatch(), subscribe().

getState()

The getState function will return the current state of the app

dispatch()

By this function we can call the action to be dispatched. In this example I call dispatch({type:’INCREMENT’}) , because the action that I need to perform is INCREMENT.

subscribe()

The subscribe method will keep listening to the state change and if the state changes then the method in subscribe will be executed. Generally we put render() in the subscribe to display the state changes in the UI.

Feel free to fork the pen and play around with it!! Happy Redux!!