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”

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!!

Creating a personalized server for development

We know that most of the web servers for open source languages run on linux. So in order to get the feel of developing in server even in local machine is very important for a new developer. But installing linux server directly on personal machines may be difficult, since full stack developers need access to designing tools available on Windows. This post guides you to setup a personalized server.

Prerequisites:

  1. Download Virtual box (Open source) for your windows machine.
  2. Download ubuntu server (Note: Don’t use ubuntu desktop), because Ubuntu server will not have GUI and will give a good feel of using a server.

Installing Ubuntu Server on Virtual Box:

  • Create a new Virtual Machine, select Ubuntu from the dropdown.
  • Allocate atleast 30GB of disk space.
  • Allocate 1GB of RAM space
  • Start the Virtual Machine, and it asks for boot device, select the ISO
  • Select install ‘Ubuntu Server’
  • Then follow the instructions for selecting keyboard, encryption of drive etc.,
  • When it asks for installing other tools, select ‘DNS server’, ‘LAMP server'(if you want PHP), ‘Open SSH’ (Must select for doing an SSH), ‘Samba Server’ (Must select for mounting drive on windows machine).
  • Setup users, root password with the instructions on the screen.
  • Now your Ubuntu Server is ready

Mounting a drive from Ubuntu Server to Windows:

  • Login into your Ubuntu Server

$ sudo nano /etc/samba/smb.conf

  • Change the Workgroup to your workgroup as per your windows machine (To see workgroup in windows Goto Explorer -> right click and select properties -> There you can seee WORKGROUP). Put the same name here else you cannot see the server as part of your workgroup
  • Then save and exit file.
  • Now create a user for samba

smbpasswd -a mohithg

  • Give it a password.
  • Next create a directory if you want to share that particular directory alone
  • Again, go to the smb.conf file , and add below text in the Share Definitions (below Printers)

[share]
       comment = Shared
       browseable = yes
       path = /home/mohithg
       read only = no
       guest ok = yes
       writeable = yes

  • You can change the path to your home directory or you home directory
  • If you want a password protection for your shared drive then use guest ok = no
  • Restart your server

Mounting the Shared drive on Windows

Option 1:

  • You can goto run (Windows Key + r) and type \\HOSTNAME and see your shared server
  • The host name is the one that you gave when installing your ubuntu server

Option 2:

  • You can goto explorer and click on Network
  • There you can see your server with the hostname, double click on it to open and you can see your shared files.

SSH into Ubuntu Server

  • Download putty
  • Give the ip-address of your ubuntu server
  • Enter your username, password and connect
  • You should be able to access your server

Conclusion:

By this you can keep all your development on server, and you will get a good feel of using server and developing things as you learn. Happy Coding!!!

 

Git Commands for branch removing, renaming

Remove a branch locally:

To remove a branch locally the command is:

$ git branch -D <branch-name>

Rename a branch:

Rename your local branch. If you are on the branch you want to rename:

     $ git branch -m <new-name>

Delete the old-name remote branch and push the new-name local branch:

     $ git push origin :old-name new-name

Reset the upstream branch for the new-name local branch  Switch to the branch and then:

     $ git push origin -u new-name.

*Refer my old post for switching between branches

Remove branches that are not in remote:

You might have some branches locally that other members of your team have remote it remote. To get rid of those branches run:

     $ git remote prune origin

Rebasing two branches Git

Rebasing is necessary in Git if your team is working on multiple branches. To merge code from remote branch to your working branch these commands are necessary:

First checkout to your remote branch and fetch all files

$ git checkout -b remote-branch

$ git fetch

Then give rebase from your working branch

$ git checkout working-branch

$ git rebase -i remote-branch

Then see the conflicts using

$ git status

Resolve all the conflicts then do

$ git add .

$ git rebase --continue