sivadass

Node.js Deployment

Steps to deploy a Node.js app to DigitalOcean using PM2, NGINX as a reverse proxy and an SSL from LetsEncrypt

1. Sign up for Digital Ocean

If you use the referal link below, you get $10 free (1 or 2 months) https://m.do.co/c/5424d440c63a

2. Create a droplet and log in via ssh

I will be using the root user, but would suggest creating a new user

sivadass

React Basics

What is JSX?

JSX is a form of markup used in React. It looks very similar to HTML, but is converted to JavaScript behind the scenes. You are not required to use JSX, but JSX makes it easier to write React applications.

With JSX

const welcomeElement = Hey man!;

sivadass

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        },
        "debug": true
      }

sivadass

import request from 'superagent';
export const GET_LOGGED_USER = 'GET_LOGGED_USER';
export const SET_LOGGED_USER = 'SET_LOGGED_USER';

export const login = (response) => ({
  type: SET_LOGGED_USER,
  logged: true,
  payload: response
})
export const getLoggedUser = () => ({

sivadass

// There are three possible states for our login
// process and we need actions for each of them
export const LOGIN_REQUEST = 'LOGIN_REQUEST'
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
export const LOGIN_FAILURE = 'LOGIN_FAILURE'

function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,

sivadass

<tr>
  <td style='text-align:center;vertical-align:top;padding:.6em;'>1</td>
  <td style='text-align:left;vertical-align:top;padding:.6em;'>
    #123459 <br/>
    <span style='color:#777;'>billed on &nbsp;</span>
    31/05/1992
  </td>
  <td style='text-align:center;vertical-align:top;padding:.6em;'>Unpaid</td>
  <td style='text-align:center;vertical-align:top;padding:.6em;'>31/05/1992</td>
  <td style='text-align:right;vertical-align:top;padding:.6em;'>₹5000</td>

sivadass

// 1.Bind in constructor
class A extends React.Component {
  constructor(props) {
    super(props)
    this._eventHandler = this._eventHandler.bind(this)
  }

  _eventHandler() {
    // ...
  }

sivadass

const path = require('path');

const express = require('express');

const app = express();

// DEFINES A FOLDER FOR THE STATIC FILES
app.use(express.static('public'));

// DEFINES THE MAIN ENTRY POINT

sivadass

// @codekit-prepend "/vendor/hammer-2.0.8.js";

$( document ).ready(function() {

  // DOMMouseScroll included for firefox support
  var canScroll = true,
      scrollController = null;
  $(this).on('mousewheel DOMMouseScroll', function(e){

    if (!($('.outer-nav').hasClass('is-vis'))) {

sivadass

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var wait = require('gulp-wait');

gulp.task('bundleCSS', function(){
  return gulp.src('./sass/style.scss')
    .pipe(wait(500))