My blog's RSS Feed

test

Underline

this

word

Primary text

Some long success message

Some long success message Some long success message Some long success message

Duis ut dolore aliqua proident deserunt Lorem laborum magna magna elit proident. Non culpa exercitation proident pariatur exercitation ad occaecat qui culpa commodo. Nisi cillum quis cupidatat nostrud consequat qui laborum eiusmod culpa irure sunt qui anim do. Cupidatat non dolor ipsum elit tempor occaecat sit magna. Ullamco incididunt labore cillum dolor aliquip labore. Consectetur laboris reprehenderit proident reprehenderit dolore aliquip duis aliquip. Minim sit nostrud nisi velit amet duis nisi irure.

const onClick = () => {
  alert("You opened me!!")
}
render(<button onClick={onClick}>Alohomora!</button>)

const onClick = () => {
  alert("You opened me!!")
}
render(<button onClick={onClick}>Alohomora!</button>)

JSX

const onClick = () => {
  alert("You opened me!!")
}
render(<button onClick={onClick}>Alohomora!</button>) render(<button onClick={onClick}>Alohomora!</button>) render(<button onClick={onClick}>Alohomora!</button>)

const highlighted = 10;
const highlighted = 10;
const highlighted = 10;

var highlight = 200; 
var highlight = 200;

var highlight = 200;
var highlight = 200;

TEXT

long textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong text

About

My name is Dongbin Min (Ellis)
You can get in touch with me via e-mail
Feel free to send any question or comments.

Education

University of Wisconsin - Madison
Bachelor of Science - Double majored in Computer Science and Economics

Personal Projects

Link to projects

stale

Thu, 02 Dec 2021 00:00:00 GMT

[Project]: Game Code Share

Thu, 19 Nov 2020 00:00:00 GMT

Back to Portfolio

Motivation

[Project]: Ramen Kid

Tue, 10 Nov 2020 00:00:00 GMT

Back to Portfolio

Ramen Kid Website

Features

This project had a huge focus on functionalities of admin who is authorized to change most of the contents on the website. You can click any image to zoom.

Responsive design

Setting announcement

Admin has an option to set custom announcement that displays on the top of the page

Admin can add, edit, delete menu items. Also one can mark particular item sold out or available.

Drag & Drop to change order

Admin can use drag & drop to change order of menu items using react-beautiful-dnd

Dynamically generate PDF

Based on the menu item stored in database, it automatically creates menu in PDF format using react-pdf

Editing other pages

Admin can modify images in Home page, and edit texts in About and Hours & Location

Subscription

User can opt in/out for emailing list, and admin is able to sent out bulk emails to subscribers via Sendgrid API. Subscriber data below is fake.

Contact form

Customers of the restaurant can send the message to the client using a contact form and via Sendgrid API

Analytics

Inside admin panel, admin can view the number of visitors and page hits of each pages

Authentication

Uses json web token to sign in user and allows to change email & password

Edit header links

Admin can turn/off each link in the header. i.e. one can disable contact page such that it won't be shown to the public

QR Code

Custom QR code that's linked to the menu page.

[SSH]: Remote SSH to a Raspberry Pi without password (macOS, Linux)

Fri, 25 Sep 2020 00:00:00 GMT

Overview

This post will show you how to establish SSH remote connection to a Raspberry Pi or other devices without using password via ssh-keygen

1. Connect to Raspberry Pi on terminal

BASH

ssh pi@192.168.0.111

Refer to this page if you need to find out local ip address of pi

2. Generate authentication key on pi

BASH

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

-t rsa defines encryption type
-b 4096 uses 4096 bits
-C provides a comment (in this example, email)

This will prompt you to enter directory and passphrase of the key. Feel free to press enter to skip these prompts. The default directory is ~/.ssh where the two keys will be saved: id_rsa and id_rsa.pub

id_rsa.pub vs id_rsa

id_rsa is a private key, used to sign into a remote host

id_rsa.pub is a public key that needs to be supplied to the remote host via authorized_key file

3. Add generated key to authorized key

BASH

cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_key

This will generate authorized_key that contains the public key

4. Set permissions for authorized key

BASH

chmod go= ~/.ssh/authorized_key
chmod u=r ~/.ssh/authorized_key

go= adds other users for permission. g indicates other uses in the file's group, and o indicates other users not in the file's group.
u=r gives the owner of the file, u, permission to read

5. Move generated key to your device

Logout from pi machine to go back to your device that you wish to use to connect to pi. You'll need the private key, ~/.ssh/id_rsa, on your device in order to sign into the remote host, pi.

Example

BASH

cd ~/Documents
# Copies the private key from pi to the current directory of your device
scp pi@192.168.0.111:/home/pi/.ssh/id_rsa .

6. Connect without typing in password

Finally, use the below command to connect to pi without password

Example

BASH

ssh -i ~/Documents/id_rsa pi@192.168.0.111

[React]: 리액트로 카카오톡 공유 버튼 구현하기

Wed, 09 Sep 2020 00:00:00 GMT

1. 어플리케이션 등록하기

아직 어플리케이션이 kakao developers에 등록이 되어있지 않으면 kakao developers에서 앱을 등록해 줍니다.

2. JavaScript키

리액트로 카카오톡 공유를 구현하기 위해선 JavaScript 키가 필요합니다. 어플 등록 이후에 요약정보 탭에서 자바스크립트 키를 메모해 둡니다. 예: 52ke87d146ek29e688e39dkfn8b0ef28

.env

자바스크립트 키를 .env 에 저장해둡니다

/.env

TEXT

REACT_APP_KAKAO_KEY=52ke87d146ek29e688e39dkfn8b0ef28 
REACT_FETCH_URL=https://yourSite.com

3. Include script

리액트 앱에 <script>를 사용하려면 일반적으로 두가지 방법이 있습니다

1. Helmet 패키지 사용

.../components/Layout/index.js

import React from 'react'
import { Helmet } from 'react-helmet'
import KakaoShareButton from '../KakaoShareButton'

const Layout = () => {
  return (
    <div className="layout">
      {/* Include Kakao sdk */}
      <Helmet>
        <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
      </Helmet>
      <KakaoShareButton />
    </div>
  )
}

export default Layout

2. 마운트 시 include

.../components/Layout/index.js

import React, { useEffect } from 'react'
import KakaoShareButton from '../KakaoShareButton'

const Layout = () => {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://developers.kakao.com/sdk/js/kakao.js'
    script.async = true

    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [])

  return (
    <div className="layout">
      <KakaoShareButton />
    </div>
  )
}

export default Layout

script 사용을 여려군데서 사용해야할 경우엔 custom hook을 이용할 수 있습니다

hooks/use-script.js

import { useEffect } from 'react'

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script')

    script.src = url
    script.async = true

    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [url])
}

export default useScript

사용법은 다음과 같습니다:

.../components/Layout/index.js

import useScript from '../../hooks/use-script'

const Layout = () => {
  useScript('https://developers.kakao.com/sdk/js/kakao.js')

  return (
    <div className="layout">
      <KakaoShareButton />
    </div>
  )
}

export default Layout

Kakao SDK를 마운트 시킨 이후에 windows.Kakao로 접근이 가능합니다. 이를 위해 상위 component (예: Layout)에서 스크립트를 미리 불러와 주세요.

이후에 공유하는 컨텐트 정보는 하위 컴포넌트 KakaoShareButton에서 구현합니다

4. 하위 컴포넌트 KakaoShareButton

.../components/KakaoShareButton/index.js

import React, { useEffect } from 'react'

const KakaoShareButton = () => {
  useEffect(() => {
    createKakaoButton()
  }, [])

  const createKakaoButton = () => {
    // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
    if (window.Kakao) {
      const kakao = window.Kakao

      // 중복 initialization 방지
      if (!kakao.isInitialized()) {
        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
        kakao.init(process.env.REACT_APP_KAKAO_KEY)
      }

      kakao.Link.createDefaultButton({
        // Render 부분 id=kakao-link-btn 을 찾아 그부분에 렌더링을 합니다
        container: '#kakao-link-btn',
        objectType: 'feed',
        content: {
          title: '타이틀',
          description: '#리액트 #카카오 #공유버튼',
          imageUrl: 'IMAGE_URL', // i.e. process.env.FETCH_URL + '/logo.png'
          link: {
            mobileWebUrl: window.location.href,
            webUrl: window.location.href,
          },
        },
        social: {
          likeCount: 77,
          commentCount: 55,
          sharedCount: 333,
        },
        buttons: [
          {
            title: '웹으로 보기',
            link: {
              mobileWebUrl: window.location.href,
              webUrl: window.location.href,
            },
          },
          {
            title: '앱으로 보기',
            link: {
              mobileWebUrl: window.location.href,
              webUrl: window.location.href,
            },
          },
        ],
      })
    }
  }

  return (
    <div className="kakao-share-button">
      {/* Kakao share button */}
      <button id="kakao-link-btn">
        <img src="/icons/kakao.png" alt="kakao-share-icon" />
      </button>
    </div>
  )
}

export default KakaoShareButton

[VSCode]: Settings

Tue, 19 May 2020 00:00:00 GMT

VS Code Tips

Enable `code .` inside terminal

Open command pallette with (cmd + shift + P)
Type in shell command to find Shell Command: Install 'code' command in PATH

Shortcuts

Navigation
- Cmd + shift + E: Open Explorer
- Ctrl + shift + G: Open GitHub GUI
- Cmd + B: Open/close sidebar
- Ctrl + Shift + ->/<- Expand selection
- Creating a new file: Open explorer with cmd + shirt + E. Select folder. Open pallet with cmd + shift + p. Type New file or New folder
- Cmd + J: Open/close bottom navigation panel
- Cmd + `: Open/close terminal & focus
- Cmd + 1: Focus on Editor
- Cmd + 2: Focus on 2nd Editor (or open it)
Moving around
- Jumpy: need to set shortcut. Shift + Enter to start jumpy mode. Space bar to exit jumpy mode
- command + d to select other words
- Multi Line Tricks plugin
  - Cmd + shift + L
- Cmd + X to delete the whole line
Shortcuts
- type clg to show auto complete for console.log
- command pallet: cmd + shift + p. Type Fold level 2 to display function names only

Plugins

Auto Close Tag
Babel JavaScript
Bittersweet Theme
Code Spell Checker
Color Highlight
Community Material Theme
ES7 React/Redux/Graphql Snippets
ESLint
Highlight Matching Tag
Live Server
Lorem ipsum
Markdown Preview Enhanced
Material Icon Theme
Material Theme
Material Theme Icons
Path Intellisense
Prettier - Code formatter
pug formatter
Python
Rainbow Brackets
Reactjs code snippets
Snazzy Operaotr (theme)
Spirited Away Color Theme
TODO Highlight
vscode-styled-components
Git lens
Project manager

Setting

To change the setting, open the vs code setting with cmd + , then search for json. Click edit in setting.json under Launch panel.

Enable emmet

JSON

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Changing colors of terminal

When using snazzy operator theme, undefined keyword doesn't show unless you tweak the terminal color with

JSON

"workbench.colorCustomizations": {
    "terminal.ansiBrightBlack": "#b57575"
  },

Personal setting

JSON

{
  "update.mode": "none",
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": true,
  "workbench.editor.enablePreview": false,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorCustomizations": {
    "terminal.ansiBrightBlack": "#b57575"
    // "terminal.background":"#000",
    // "terminal.foreground":"#E0E0E0",
    // "terminalCursor.background":"#E0E0E0",
    // "terminalCursor.foreground":"#E0E0E0",
    // "terminal.ansiBlack":"#000000",
    // "terminal.ansiBlue":"#6FB3D2",
    // "terminal.ansiBrightBlue":"#6FB3D2",
    // "terminal.ansiBrightCyan":"#76C7B7",
    // "terminal.ansiBrightGreen":"#A1C659",
    // "terminal.ansiBrightMagenta":"#D381C3",
    // "terminal.ansiBrightRed":"#FB0120",
    // "terminal.ansiBrightWhite":"#FFFFFF",
    // "terminal.ansiBrightYellow":"#FDA331",
    // "terminal.ansiCyan":"#76C7B7",
    // "terminal.ansiGreen":"#A1C659",
    // "terminal.ansiMagenta":"#D381C3",
    // "terminal.ansiRed":"#FB0120",
    // "terminal.ansiWhite":"#E0E0E0",
    // "terminal.ansiYellow":"#FDA331"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "cSpell.userWords": [
    "add",
    "afterbegin",
    "beforeend",
    "boxshadow",
    "btns",
    "btwn",
    "captcha",
    "cart",
    "chmod",
    "codepen",
    "collapsable",
    "component",
    "csrf",
    "deauthenticate",
    "destructured",
    "dmin",
    "dropdown",
    "droppable",
    "ellismin",
    "elmt",
    "emin",
    "frontmatter",
    "geoip",
    "graphiql",
    "hacky",
    "ingred",
    "iphone",
    "kakao",
    "launchd",
    "linkedin",
    "mern",
    "metastring",
    "middlewares",
    "minimalistic",
    "mkdir",
    "mult",
    "noopener",
    "noreferrer",
    "nums",
    "originalname",
    "page",
    "pageview",
    "personalizations",
    "polyfill",
    "predeploy",
    "ramenkid",
    "recaptcha",
    "resave",
    "result",
    "sendgrid",
    "signin",
    "signup",
    "sitekey",
    "staatliches",
    "steelblue",
    "templating",
    "uncategorized",
    "uniqid",
    "unmount",
    "unmounting",
    "unsubscription",
    "upsert",
    "will"
  ],
  "window.zoomLevel": 1,
  "liveServer.settings.donotShowInfoMsg": true,
  "terminal.integrated.shell.osx": "/bin/zsh",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "material-icon-theme",

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "liveServer.settings.donotVerifyTags": true,
  "workbench.colorTheme": "Snazzy Operator",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.associations": {
    // "*.ejs": "html"
    // "*.md": "mdx"
    "*.mdx": "markdown"
  }
}

Secondary vscode setting

JSON

{
  "workbench.colorTheme": "Snazzy Operator",
  "workbench.colorCustomizations": {
    "terminal.ansiBrightBlack": "#b57575"
  },
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.zoomLevel": 0,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "material-icon-theme",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.tabSize": 2,
  "launch": {
    "configurations": [],
    "compounds": []
  }
}

[Next.js]: Implementing infinite scroll in Next.js

Tue, 12 May 2020 00:00:00 GMT

Overview

This post will explain how to build infinite scrolling with server side rendering in Next.js.

Install packages

Unless you're using Next.js @^9.4, you need to install node-fetch

BASH

npm i node-fetch

getServerSideProps()

We define getServerSideProps() that is not much different from a regular fetch function, but the difference is that the server generates the page HTML upon each request, and it can exist only inside a page component.

Since we're building an infinite scroll, we're not going to fetch the whole data at once, but instead, we'll request a partial data from the server by using query parameter that contains which page to navigate to. It will later be passed from UserList component.

/pages/index.js

JSX

import fetch from "node-fetch"
import UserList from "../components/UserList"

const HomePage = ({ userData }) => {
  return (
    <div className="home-page">
      <UserList userData={userData} />
    </div>
  )
}

export const getServerSideProps = async ({ query }) => {
  // Fetch the first page as default
  const page = query.page || 1
  let userData = null

  // Fetch data from external API
  try {
    const res = await fetch(`${process.env.FETCH_URL}/users?page=${page}`)
    if (res.status !== 200) {
      throw new Error("Failed to fetch")
    }
    userData = await res.json()
  } catch (err) {
    userData = { error: { message: err.message } }
  }

  // Pass data to the page via props
  return { props: { userData } }
}

export default HomePage

Backend API

Let's take a look at server side API for retrieving user. It returns 30 users per load (perPage) along with current page (curPage) and maximum Page (maxPage).

const getUsers = async (req, res, next) => {
  const curPage = req.query.page || 1
  // Display 30 users per page load
  const perPage = 30

  try {
    // Fetch users based on current page * perPage
    const users = await User.find().limit(perPage * curPage)
    const totalUsers = await User.find().countDocuments()

    res.status(200).json({
      message: "Fetched users",
      users: users,
      curPage: curPage,
      maxPage: Math.ceil(totalUsers / perPage),
    })
  } catch (err) { // ... }
}

UserList component

UserList renders list of users, and scrolling to the last user triggers fetch for the new page with handleScroll

/components/UserList/index.js

JSX

import React, { useState, useEffect } from "react"
import { useRouter } from "next/router"

import "./styles.scss"

const UserList = ({ userData }) => {
  const [users, setUsers] = useState([])
  const router = useRouter()

  // Set users from userData
  useEffect(() => {
    if (userData) {
      if (userData.error) {
        // Handle error
      } else {
        setUsers(userData.users)
      }
    }
  }, [userData])

  // Listen to scroll positions for loading more data on scroll
  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  })

  const handleScroll = () => {
    // To get page offset of last user
    const lastUserLoaded = document.querySelector(
      ".user-list > .user:last-child"
    )
    if (lastUserLoaded) {
      const lastUserLoadedOffset =
        lastUserLoaded.offsetTop + lastUserLoaded.clientHeight
      const pageOffset = window.pageYOffset + window.innerHeight
      // Detects when user scrolls down till the last user
      if (pageOffset > lastUserLoadedOffset) {
        // Stops loading
        if (userData.curPage < userData.maxPage) {
          // Trigger fetch
          const query = router.query
          query.page = parseInt(userData.curPage) + 1
          router.push({
            pathname: router.pathname,
            query: query,
          })
        }
      }
    }
  }

  return (
    <>
      <ul className="user-list">
        {users.length > 0 &&
          users.map((user, i) => {
            return (
              <li className="user" key={i}>
                <span>{user.name}</span>
              </li>
            )
          })}
      </ul>
    </>
  )
}

export default UserList

Currently, scrolling down to the last user may trigger fetch multiple times!. You'll need to add a Router event to detect whether the fetch has ended to prevent multiple fetches.

/components/UserList/index.js

JSX

import React, { useState, useEffect } from "react"
import Router, { useRouter } from "next/router" 

import "./styles.scss"

const UserList = ({ userData }) => {
  const [users, setUsers] = useState([])
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const startLoading = () => setLoading(true)
  const stopLoading = () => setLoading(false)

  // Set up user data
  useEffect(() => {
    if (userData) {
      // Error check
      if (userData.error) {
        // Handle error
      } else {
        setUsers(userData.users)
      }
    }
  }, [userData])

  // Router event handler
  useEffect(() => {
    Router.events.on("routeChangeStart", startLoading)
    Router.events.on("routeChangeComplete", stopLoading)
    return () => {
      Router.events.off("routeChangeStart", startLoading)
      Router.events.off("routeChangeComplete", stopLoading)
    }
  }, [])

  // Listen to scroll positions for loading more data on scroll
  useEffect(() => {
    window.addEventListener("scroll", handleScroll)
    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  })

  const handleScroll = () => {
    // To get page offset of last user
    const lastUserLoaded = document.querySelector(
      ".user-list > .user:last-child"
    )
    if (lastUserLoaded) {
      const lastUserLoadedOffset =
        lastUserLoaded.offsetTop + lastUserLoaded.clientHeight
      const pageOffset = window.pageYOffset + window.innerHeight

      if (pageOffset > lastUserLoadedOffset) {
        // Stops loading
        /* IMPORTANT: Add !loading  */
        if (userData.curPage < userData.maxPage && !loading) {
          // Trigger fetch
          const query = router.query
          query.page = parseInt(userData.curPage) + 1
          router.push({
            pathname: router.pathname,
            query: query,
          })
        }
      }
    }
  }

  return (
    <>
      <ul className="user-list">
        {users.length > 0 &&
          users.map((user, i) => {
            return (
              <li className="user" key={i}>
                <span>{user.name}</span>
              </li>
            )
          })}
      </ul>
      {loading && <h1>Loading ...</h1>}
    </>
  )
}

export default UserList

Extra: Styling for user

/components/UserList/styles.scss

SCSS

.user {
  padding: 1rem;
}

.user-list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .user {
    padding: 2rem;
    margin: 1rem;
    background: #ccc;
  }
}

[Next.js]: Implementing pagination in Next.js

Mon, 11 May 2020 00:00:03 GMT

Overview

This post will explain how to build pagination with server side rendering in Next.js.

Install packages

Unless you're using Next.js @^9.4, you need to install node-fetch, and we'll use react-paginate for pagination component

BASH

npm i node-fetch react-paginate

getServerSideProps()

Since we're building a pagination, we're not going to fetch the whole data at once, but instead, we'll request a partial data from the server by using query parameter that contains which page to navigate to. It will later be passed from UserList component.

/pages/index.js

import fetch from "node-fetch"
import UserList from "../components/UserList"

const HomePage = ({ userData }) => {
  return (
    <div className="home-page">
      <UserList userData={userData} />
    </div>
  )
}

export const getServerSideProps = async ({ query }) => {
  // Fetch the first page as default
  const page = query.page || 1
  let userData = null

  // Fetch data from external API
  try {
    const res = await fetch(`${process.env.FETCH_URL}/users?page=${page}`)
    if (res.status !== 200) {
      throw new Error("Failed to fetch")
    }
    userData = await res.json()
  } catch (err) {
    userData = { error: { message: err.message } }
  }

  // Pass data to the page via props
  return { props: { userData } }
}

export default HomePage

Backend API

Let's take a look at server side API for retrieving user. It returns 10 users (defined in perPage) along with current page (curPage) and maximum Page (maxPage).

const getUsers = async (req, res, next) => {
  const curPage = req.query.page || 1
  // Display 10 users per page
  const perPage = 10

  try {
    // Fetch users based on current page * perPage
    const users = await User.find()
      .skip((curPage - 1) * perPage)
      .limit(perPage)
    const totalUsers = await User.find().countDocuments()

    res.status(200).json({
      message: "Fetched users",
      users: users,
      curPage: curPage,
      maxPage: Math.ceil(totalUsers / perPage),
    })
  } catch (err) { // ... }
}

UserList component

UserList renders list of users and pagination component which triggers fetch for the new page with handlePagination

/components/UserList/index.js

JSX

import React, { useState, useEffect } from "react"
import ReactPaginate from "react-paginate"
import { useRouter } from "next/router"

import "./styles.scss"

const UserList = ({ userData }) => {
  const [users, setUsers] = useState([])
  const router = useRouter()

  useEffect(() => {
    if (userData) {
      if (userData.error) {
        // Handle error
      } else {
        // Set users from userData
        setUsers(userData.users)
      }
    }
  }, [userData])

  // Triggers fetch for new page
  const handlePagination = page => {
    const path = router.pathname
    const query = router.query
    query.page = page.selected + 1
    router.push({
      pathname: path,
      query: query,
    })
  }

  return (
    <>
      <ul className="user-list">
        {users.length > 0 &&
          users.map((user, i) => {
            return (
              <li className="user" key={i}>
                <span>{user.name}</span>
              </li>
            )
          })}
      </ul>

      <ReactPaginate
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        previousLabel={"previous"}
        nextLabel={"next"}
        breakLabel={"..."}
        initialPage={userData.curPage - 1}
        pageCount={userData.maxPage}
        onPageChange={handlePagination}
      />
    </>
  )
}

export default UserList

Since navigating to different page requires re-fetch, you can add your custom loader with Router events.

/components/UserList/index.js

JSX

// ...
import Router, { useRouter } from "next/router" 

const UserList = ({ userData }) => {
  const [loading, setLoading] = useState(false)
  const startLoading = () => setLoading(true)
  const stopLoading = () => setLoading(false)

  useEffect(() => {
    // Router event handler
    Router.events.on("routeChangeStart", startLoading)
    Router.events.on("routeChangeComplete", stopLoading)
    return () => {
      Router.events.off("routeChangeStart", startLoading)
      Router.events.off("routeChangeComplete", stopLoading)
    }
  }, [])

  // ...

  return (
    <>
      {loading && <h1>Loading..</h1>}
      {/* ... */}
    </>
  )
}

export default UserList

scrollIntoView()

If your pagination component is placed below a long user list, scrolling up after clicking a page may be more user friendly. You can use useRef to assign a ref to a DOM element to scroll up with scrollIntoView()

/components/UserList/index.js

JSX

import React, { useState, useEffect, useRef } from "react" 

// ...

const UserList = ({ userData }) => {
  const userListRef = useRef(null) 

  // ...

  const handlePagination = page => {
    const path = router.pathname
    const query = router.query
    query.page = page.selected + 1
    router.push({
      pathname: path,
      query: query,
    })
    userListRef.current.scrollIntoView() 
  }

  return (
    <>
      <ul className="user-list" ref={userListRef}>
        {loading && <h1>Loading ...</h1>}
        {users.length > 0 &&
          users.map((user, i) => {
            return (
              <li className="user" key={i}>
                <span>{user.name}</span>
              </li>
            )
          })}
      </ul>
      {/* ... */}
    </>
  )
}

export default UserList

Extra: Styling for user & paginate component

/components/UserList/index.js

JSX

import "./styles.scss"

const UserList = ({ userData }) => {
  // ....
  return (
    <>
      {/* ... */}
      <ReactPaginate
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        previousLabel={"previous"}
        nextLabel={"next"}
        breakLabel={"..."}
        initialPage={userData.curPage - 1}
        pageCount={userData.maxPage}
        onPageChange={handlePagination}
        containerClassName={"paginate-wrap"}
        subContainerClassName={"paginate-inner"}
        pageClassName={"paginate-li"}
        pageLinkClassName={"paginate-a"}
        activeClassName={"paginate-active"}
        nextLinkClassName={"paginate-next-a"}
        previousLinkClassName={"paginate-prev-a"}
        breakLinkClassName={"paginate-break-a"}
      />
    </>
  )
}

export default UserList

/components/UserList/styles.scss

SCSS

$purple-color: #745788;
$purple-color-lighter: #d9c5e6;

.user {
  padding: 1rem;
}

.user-list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .user {
    padding: 2rem;
    margin: 1rem;
    background: #ccc;
  }
}

// Pagination styling
.paginate-wrap {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  max-width: 100%;
  flex-wrap: wrap;
  background: #ccc;

  body.light & {
    background: #fafafa;
  }

  .paginate-a,
  .paginate-next-a,
  .paginate-prev-a,
  .paginate-break-a {
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    &:focus {
      outline: 0;
    }

    &:hover {
      background: $purple-color;
      background: $purple-color-lighter;
    }
  }

  .paginate-li {
    margin: 0 0.2rem;
  }

  .paginate-next-a,
  .paginate-prev-a {
    color: $purple-color;
    margin: 0 0.3rem;
  }

  .paginate-active {
    border: 2px solid $purple-color-lighter;
    background: $purple-color-lighter;
  }

  .paginate-disabled > a {
    cursor: not-allowed;
    background: transparent;
    color: #666;
    body.light & {
      color: #ccc;
    }
    &:hover {
      background: transparent !important;
    }
  }
}

[Next.js]: Using environment(env) variables in Next.js

Mon, 11 May 2020 00:00:02 GMT

Overview

This post will show you how to set up env variables in Next.js dynamically. i.e. Using .env.development on development and .env.production on production.

.env

Create .env.development and .env.production for client side

/.env.development

TEXT

FETCH_URL=http://localhost:3000

/.env.production

TEXT

FETCH_URL=https://your-website.com

Install dotenv-webpack

BASH

npm i dotenv-webpack

next.config.js

Depending on how NODE_ENV is configured, your app will use .env.development or .env.production. Be sure to restart the server after changes.

/next.config.js

const Dotenv = require("dotenv-webpack")

const nextConfig = {
  webpack: config => {
    config.plugins.push(
      new Dotenv({
        path: `./.env.${
          process.env.NODE_ENV === "production" ? "production" : "development"
        }`,
      })
    )
    return config
  },
}

module.exports = nextConfig

/next.config.js

const withSass = require("@zeit/next-sass")
const Dotenv = require("dotenv-webpack")

const nextConfig = {
  webpack: config => {
    config.plugins.push(
      new Dotenv({
        path: `./.env.${
          process.env.NODE_ENV === "production" ? "production" : "development"
        }`,
      })
    )
    return config
  },
}
module.exports = withSass(nextConfig)

For example, you can define NODE_ENV as production inside package.son.

JSON

{
  "scripts": {
    "dev": "nodemon -w _server _server/server.js",
    "start": "NODE_ENV=production node _server/server.js", 
    "build": "next build"
  },
  "dependencies": {
    // ...
  }
}

[Next.js]: How to set up Express.js with Next.js

Mon, 11 May 2020 00:00:01 GMT

Install Express.js

BASH

npm i express

Creating server

/_server/server.js

const next = require("next")
const dev = process.env.NODE_ENV !== "production"
const nextApp = next({ dev })
const handle = nextApp.getRequestHandler()
const express = require("express")
// Router (Example)
const userRoutes = require("./routes/user")

nextApp.prepare().then(() => {
  const app = express()

  // Example: Register routes
  app.use(userRoutes)

  // Rendering page per request
  app.get("*", (req, res) => {
    return handle(req, res)
  })

  const port = process.env.PORT || 3000
  app.listen(port, () => {
    console.log(`Listening on port ${port}...`)
  })
})

package.json

Make the following changes to run the server.

/package.json

JSON

{
  "scripts": {
    "dev": "node _server/server.js", 
    "start": "node _server/server.js", 
    "build": "next build"
  },
  "dependencies": {
    // ...
    "express": "^4.17.1"
  }
}

If you have nodemon you can configure like this:

/package.json

JSON

{
  "scripts": {
    "dev": "nodemon -w _server _server/server.js", 
    "start": "node _server/server.js",
    "build": "next build"
  },
  "dependencies": {
    // ...
    "express": "^4.17.1"
  }
}

You can install nodemon, if not previously installed with npm i -D nodemon
nodemon -w _server _server/server.js watches for the changes in _server directory and starts _server/server.js file

Extra: Add CORS header & Error Handler & Mongoose connection to server

Install Mongoose

BASH

npm i mongoose

Configure Mongoose URI

/_server/config.js

module.exports = {
  MONGODB_URI: `mongodb+srv://<DB_USERNAME>:<PASSWORD>@cluster0-xc4db.mongodb.net/test`,
}

/_server/config.js

const express = require("express")
const next = require("next")
const dev = process.env.NODE_ENV !== "production"
const nextApp = next({ dev })
const handle = nextApp.getRequestHandler()
const mongoose = require("mongoose")
const { MONGODB_URI } = require("./config")
// Router (Example)
const userRoutes = require("./routes/user")

nextApp.prepare().then(() => {
  const app = express()
  app.use(express.json())

  // Set CORS header
  app.use((req, res, next) => {
    res.setHeader("Access-control-Allow-Origin", "*")
    res.setHeader(
      "Access-Control-Allow-Methods",
      "GET, POST, DELETE, PUT, OPTIONS"
    )
    // Allow client to set headers with Content-Type
    res.setHeader("Access-Control-Allow-Headers", "Content-Type")
    next()
  })

  // Example: Register routes
  app.use(userRoutes)

  // Rendering page per request
  app.get("*", (req, res) => {
    return handle(req, res)
  })

  // Error Handler
  app.use((error, req, res, next) => {
    const status = error.statusCode || 500
    const message = error.message
    const data = error.data // Passing original error data
    res.status(status).json({ message: message, data: data })
  })

  // DB connection
  mongoose
    .connect(MONGODB_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useFindAndModify: false,
    })
    .then(result => {
      const port = process.env.PORT || 3000
      const server = app.listen(port, () => {
        console.log(`Listening on port ${port}...`)
      })
    })
    .catch(err => {
      // Handle error
    })
})

[Next.js]: Build page transitions with React Transition Group in Next.js

Mon, 11 May 2020 00:00:00 GMT

Overview

In this post I'll show how to apply page transitions (a.k.a. route transitions or page animations) in Next.js with React Transition Group. I'll be using Layout component to target specific component to apply the animation.

Here is GitHub repo

Install react-transition-group

BASH

npm i react-transition-group

Layout

Start by creating Layout component. Header is a tag that won't animate, but later transition will be applied to main container.

/components/Layout/index.js

JSX

import React from "react"
import "./styles.scss"

const Layout = ({ children }) => {
  return (
    <div className="layout">
      {/* Header component that doesn't animate */}
      <header>
        <h1>Header</h1>
      </header>
      <main className="main">{children}</main>
    </div>
  )
}

export default Layout

Transition

This transition will fade out to the left and fade in from the right with the changes in opacity and translateX() values.

This component needs location prop to be used as key property, so it can keep track of which component is coming in and out. location will be passed down from Layout component that will use useRoute function provided by Next.js

/components/Transition/index.js

JSX

import {
  TransitionGroup,
  Transition as ReactTransition,
} from "react-transition-group"
const TIMEOUT = 200

const getTransitionStyles = {
  entering: {
    position: `absolute`,
    opacity: 0,
    transform: `translateX(50px)`,
  },
  entered: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 1,
    transform: `translateX(0px)`,
  },
  exiting: {
    transition: `opacity ${TIMEOUT}ms ease-in-out, transform ${TIMEOUT}ms ease-in-out`,
    opacity: 0,
    transform: `translateX(-50px)`,
  },
}

const Transition = ({ children, location }) => {
  return (
    <TransitionGroup style={{ position: "relative" }}>
      <ReactTransition
        key={location}
        timeout={{
          enter: TIMEOUT,
          exit: TIMEOUT,
        }}
      >
        {status => (
          <div
            style={{
              ...getTransitionStyles[status],
            }}
          >
            {children}
          </div>
        )}
      </ReactTransition>
    </TransitionGroup>
  )
}

export default Transition

Layout

With Transition component created, wrap the main container and pass down location with its pathname.

/components/Layout/index.js

JSX

import React from "react"
import { useRouter } from "next/router" 
import Transition from "../Transition" 
import "./styles.scss"

const Layout = ({ children }) => {
  const router = useRouter() 
  return (
    <div className="layout">
      {/* Header component that doesn't animate */}
      <header>
        <h1>Header</h1>
      </header>
      <Transition location={router.pathname}>
        <main className="main">{children}</main>
      </Transition>
    </div>
  )
}

export default Layout

Layout Styling

/components/Layout/styles.scss

SCSS

.layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 680px;
  margin: auto;
  padding: 1rem;
  background: #eaeaea;
  overflow: hidden;

  .main {
    padding: 1rem;
    border-radius: 10px;
    background: #ddd;
  }
}

Pages

In order to navigate to different pages, create HomePage and AboutPage as an example

/pages/index.js

JSX

import React from "react"
import Link from "next/link"

const HomePage = () => {
  return (
    <div>
      <h1>HomePage</h1>
      <Link href="about">
        <a>Link To About</a>
      </Link>
    </div>
  )
}

export default HomePage

/pages/about.js

JSX

import React from "react"
import Link from "next/link"

const AboutPage = () => {
  return (
    <div>
      <h1>AboutPage</h1>
      <Link href="/">
        <a>Link To Home</a>
      </Link>
    </div>
  )
}

export default AboutPage

_app.js

To apply Layout across different page, you need to wrap the Component (pages) inside _app.js

/pages/_app.js

JSX

import Layout from "../components/Layout"

const App = ({ Component, pageProps, router }) => {
  return (
    <Layout>
      <Component {...pageProps} key={router.route} />
    </Layout>
  )
}
export default App

That's it!

After making changes to _app.js, be sure to restart the server for it to take effect

[Next.js]: Set up Sass/Scss environment with Next.js

Sun, 10 May 2020 00:00:00 GMT

Install next-sass & node-sass

BASH

npm i @zeit/next-sass node-sass

Create `next.config.js` in the root directory & import

After saving the file, you need to restart the server

/next.config.js

const withSass = require("@zeit/next-sass")
module.exports = withSass()

Styling

/components/Button/styles.scss

SCSS

.custom-button {
  cursor: pointer;
  background: #333;
  color: #fff;
  padding: 1rem;
}

/components/Button/index.js

JSX

import React from "react"
import "./styles.scss" 

const Button = ({ children }) => {
  return <button className="custom-button">{children}</button>
}

export default Button

[React]: Use global state with React Hook and Context

Wed, 29 Apr 2020 00:00:00 GMT

TL;DR

Scroll down to 1. Set up Context for code snippets

Overview

In React, passing down state to child components can be tedious, especially when you have to share state with a "grand child" component i.e. performing a "prop drilling", or when you need to share a state with number of child components. This is when React Context may be handy. Context provides a way to pass data through component tree without having to pass them manually. This post will show how to pass it along with React hooks.

Why you might need global state: to avoid prop drilling

In case where GrandChild component needs a prop that needs to trickle all the way down from parent component, it'd be a bad practice to manually pass it down. It would be even worse if Child1 and Child2 don't need the "drilledProp"

JSX

import React from "react"
import Parent from "../Parent/index"
import GrandChild from "../GrandChild"

const Child2 = ({ drilledProp }) => {
  return (
    <div>
      <GrandChild drilledProp={drilledProp} />
    </div>
  )
}

const Child1 = ({ drilledProp }) => {
  return (
    <div>
      <Child2 drilledProp={drilledProp} />
    </div>
  )
}

const App = () => {
  const [someState] = React.useState("Hello")
  return (
    <Parent>
      <Child1 drilledProp={someState} />
    </Parent>
  )
}

export default App

File structure for this post

TEXT

.
├── components
|   ├── App
|   |   └── index.js
|   ├── Parent
|   |   └── index.js
|   └── GrandChild
|       └── index.js
├── contexts
|   └── user-context.js
└── hooks
    └── use-user.js

Scenario

Consider a situation where you have a parent component i.e. App component or Layout component, and you would like to pass down its state and/or set state function to a "grand child" component that is located far down in a virtual DOM tree. Or you would like to pass down to many children components.

As an example, in a Parent component, you want to pass user state and setUser function to a grand child component.

/components/Parent/index.js

import React, { useState, useEffect } from "react"

const Parent = ({ children }) => {
  const [user, setUser] = useState(null) 

  useEffect(() => {
    setUser({ name: "Jon", age: 6 })
  }, [])

  return <div className="parent">{children}</div> 
}

export default Parent

And inside GrandChild component, you want to use the users property that was pass from far above in component tree.

Example:

/component/GrandChild/index.js

import React from "react"

const GrandChild = () => {
  return (
    <div>
      <h1>{user}</h1>
    </div>
  )
}

export default GrandChild

1. Set up Context

Setting up context is simple. UserContext will later contain user state and setUser function when it's passed down to a child component

/contexts/user-context.js

import { createContext } from "react"
export const UserContext = createContext({})

2. Set up hooks

This hook utilizes the context above and helps to retrieve the state in child components. The function will later be called with const { user, setUser } = useUser()

/hooks/use-user.js

import { useContext } from "react"
import { UserContext } from "../contexts/user-context"

export const useUser = () => {
  const [user, setUser] = useContext(UserContext)

  return {
    user,
    setUser,
  }
}

3. Context.Provider

Now, you'll need a way to pass the data from the parent component and determine which data to pass in. Use the <UserContext.Provider> to wrap it around your child component. Provider comes with Context object, and it allows multiple components to "consume" to subscribe to context changes. It can trickle deep within the component tree.

/components/Parent/index.js

JSX

import React, { useState, useEffect } from "react"
import { UserContext } from "../../contexts/user-context" 

const Parent = ({ children }) => {
  const [user, setUser] = useState(null)

  useEffect(() => {
    setUser({ name: "Jon", age: 6 })
  }, [])

  return (
    <div className="parent">
      <UserContext.Provider value={[user, setUser]}>
        {children}
      </UserContext.Provider>
    </div>
  )
}

export default Parent

4. Consume the passed state

This is where you use useUser hook to "consume" the state stored in UserContext which was passed from Parent component.

/components/GrandChild/index.js

JSX

import React from "react"
import { useUser } from "../../hooks/use-user" 

const GrandChild = () => {
  const { user } = useUser() 

  return (
    <div>
      <h1>{`${user && user.name}`}</h1>
    </div>
  )
}

export default GrandChild

5. App.js

Parent component uses children prop, so it assumes that Parent and GrandChild are rendered elsewhere. Here's an example.

/component/App/index.js

JSX

import React from "react"
import Parent from "../Parent/index"
import GrandChild from "../GrandChild"

const App = () => {
  return (
    <Parent>
      <GrandChild />
    </Parent>
  )
}

export default App

[React + Node.js]: Create Messenger App with MERN Stack + Socket.io

Wed, 22 Apr 2020 00:00:00 GMT

Overview

This post explains how to build a basic real-time messenger application with MERN (MongoDB, Express.js, React, Node.js) Stack + Socket.io.

Demo

Left and right screens are to demonstrate different clients by using differnet browsers.

Try it yourself here

Prerequisite

If you don't have a MERN Stack application set up, here is a starter that you can clone.

clone

BASH

git clone https://github.com/EllisMin/mern-custom.git ~/YOUR_FOLDER/messenger-app

Install dependencies (Server & Client)

BASH

cd ~/YOUR_FOLDER/messenger-app && npm run install-both

Install Extra dependencies needed for this project

Front-end: React Bootstrap | Socket.io Client | Fontawesome

BASH

npm i react-bootstrap bootstrap socket.io-client react-timeago @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

Back-end: Socket.io | GeoIP-lite | express-useragent | express-validator | express-rate-limit
BASH
```
npm i socket.io geoip-lite express-useragent express-validator express-rate-limit
```

Both at once

BASH

npm i react-bootstrap bootstrap socket.io-client react-timeago @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons socket.io geoip-lite express-useragent express-validator express-rate-limit

Server side

MongoDB URI

Update the MongoDB URI to yours

config.js

module.exports = {
  MONGODB_URI: `mongodb+srv://<DB_USERNAME>:<PASSWORD>@cluster0-abcde.mongodb.net/test`,
}

Socket util

This fils is used to share socket io instance across different files.

/utils/socket.js

let io
module.exports = {
  init: httpServer => {
    io = require('socket.io')(httpServer)
    return io
  },
  getIO: () => {
    if (!io) {
      throw new Error('Socket.io is not initialized')
    }
    return io
  },
}

Create message schema

I'll allow a public user or a visitor to join the messenger. So, each message on client side will display partial IP address i.e. (11.222) as well as user's current time zone. i.e. America/Chicago with the help of geoip-lite package.

To limit the number of post request from the public users, ip, platform, and os will be used to check for the same device under same ip address. Checking the same ip may not be sufficient as multiple devices may be used under the same external ip addresses. Although this is not a perfect solution, I've decided to check for the platform, i.e. Apple Mac and os, i.e. macOS Mojave provided with express-useragent package.

/models/message.js

const mongoose = require('mongoose')
const Schema = mongoose.Schema

const messageSchema = new Schema(
  {
    ip: String,
    agent: {
      platform: String,
      os: String,
    },
    partialIp: String,
    timezone: String,
    message: {
      type: String,
      required: true,
    },
  },
  { timestamps: true }
)

module.exports = mongoose.model('Message', messageSchema)

Create controller

Imports

/controllers/message.js

const geoip = require('geoip-lite')
const io = require('../utils/socket')
const Message = require('../models/message')

Get messages

This method retrieves the latest 10 messages and send to the client.

/controllers/message.js

exports.getMessages = async (req, res, next) => {
  try {
    // Get last(latest) 10 messages
    const messages = await Message.find()
      .select('-updatedAt -__v -_id')
      .sort({ createdAt: -1 })
      .limit(10)

    if (!messages) {
      const error = new Error('Failed to fetch messages')
      error.statusCode = 404
      throw error
    }

    res.status(200).json({
      message: 'Fetched messages',
      messages: messages,
    })
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500
    }
    next(err)
  }
}

Post message

When a client requests to post a message, this function

looks up how many messages user has posted for the past 3 minutes to limit the request.

Also it removes the oldest message from database when it reaches limit.

/controllers/message.js

exports.postMessage = async (req, res, next) => {
  // Retrieve IP from the header
  let ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress
  if (ip.includes(',')) {
    ip = ip.substring(0, ip.indexOf(','))
  }

  // Retrieve partial IP from ip. i.e. 111.22
  let partialIp = ''
  const splittedIps = ip.split('.')
  if (splittedIps.length < 1) {
  } else if (splittedIps.length === 1) {
    partialIp = splittedIps[0]
  } else {
    partialIp = `${splittedIps[0]}.${splittedIps[1]}`
  }

  try {
    // Get timezone from ip address. When not found, set default to prevent error
    let geo = geoip.lookup(ip)
    if (!geo) {
      geo = { timezone: '', agent: { isBot: false } }
    }

    const message = req.body.message

    if (!message) {
      const error = new Error('Failed to get message')
      error.statusCode = 404
      throw error
    }

    // Bot check
    if (geo.agent && geo.agent.isBot) {
      const error = new Error('Failed to post')
      error.statusCode = 400
      throw error
    }

    // Query messages created last 3 minutes to check for # request limit
    const recentMessages = await Message.find({
      createdAt: { $gt: new Date(Date.now() - 3 * 60 * 1000) },
    })

    let ipMatchCount = 0
    let platformMatchCount = 0

    // Check if there are multiple entries with same ip & device
    recentMessages.forEach(m => {
      if (m.ip === ip) {
        ipMatchCount++
        if (
          m.agent &&
          m.agent.platform === req.useragent.platform &&
          m.agent.os === req.useragent.os
        ) {
          platformMatchCount++
        }
      }
    })

    // Limit requests with same ip and device to 10 or same ip to 20
    if (
      (ipMatchCount >= 10 && platformMatchCount >= 10) ||
      ipMatchCount >= 20
    ) {
      const error = new Error('Message limit reached')
      error.statusCode = 400
      throw error
    }

    /* Optional: When number of messages reaches the limit (50), it removes the oldest message */
    const totalMessages = await Message.find().countDocuments()
    if (totalMessages >= 50) {
      const oldestMessage = await Message.find()
        .sort({ createdAt: 1 })
        .limit(1)

      if (!oldestMessage) {
        const error = new Error("Couldn't find message to remove")
        error.statusCode = 404
        throw error
      }

      await Message.findByIdAndRemove(oldestMessage[0]._id)
    }

    const messageDoc = new Message({
      ip: ip,
      agent: {
        isBot: req.useragent.isBot,
        platform: req.useragent.platform,
        os: req.useragent.os,
      },
      partialIp: partialIp,
      timezone: geo.timezone,
      message: message,
    })
    await messageDoc.save()

    // Object to pass to socket.io client
    const message_ = new Message({
      partialIp: messageDoc.partialIp,
      timezone: geo.timezone,
      message: message,
      createdAt: messageDoc.createdAt,
    })

    // Sends message to all connected users
    io.getIO().emit('message event', {
      action: 'add',
      message: { ...message_._doc },
    })

    res.status(201).json({
      message: 'Message created',
    })
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500
    }
    next(err)
  }
}

Create route

express-validator validates the input passed in req.body. Character limit is between 1 and 100.

routes/code.js

const express = require('express')
const { body } = require('express-validator')
const router = express.Router()
const messageController = require('../controllers/message')

// GET /messages
router.get('/messages', messageController.getMessages)

// POST /message
router.post(
  '/message',
  [
    body('message')
      .trim()
      .isLength({ min: 1, max: 100 }),
  ],
  messageController.postMessage
)

module.exports = router

Create controller for socket.io

/controllers/socket.js

exports.setUpIOConnection = server => {
  const io = require('../utils/socket').init(server)
  const users = []

  io.on('connection', async socket => {
    users.push({ id: socket.id })

    io.emit('init', { users: users })

    // Handle disconnect
    socket.on('disconnect', reason => {
      // Remove user
      let index = -1
      for (let i = 0; i < users.length; i++) {
        const user = users[i]
        if (user.id === socket.id) {
          index = i
        }
      }
      // Remove user
      if (index !== -1) {
        users.splice(index, 1)
      }
      io.emit('init', { users: users })
    })
  })
}

socket.emit() vs socket.broadcast.emit() vs io.emit()

I have used io.emit() in above code which emits information to

all of the clients

as io variable represents the group of sockets.

On the other hand, when you want to deal with communicating with each individual connection, you can use socket variable which is available in each connection.

socket.emit(): Emit information
to a single client
socket.broadcast.emit(): Emit information to
all clients except client that's connecting
io.emit(): Emit information to
all clients

Example

io.on('connection', socket => {
  // Emit information to SINGLE CLIENT
  socket.emit('message', 'Welcome to the chat')

  // Emit information to ALL CLIENTS EXCEPT CLIENT that's connecting
  socket.broadcast.emit('message', 'new user has joined the chat')

  socket.on('disconnect', reason => {
    // Emit information too ALL CLIENTS
    io.emit('message', 'A user has left the chat')
  })
})

More examples

socket_functions

// Sending to sender-client only
socket.emit('message', 'this is a test')
// Sending to all clients except sender
socket.broadcast.emit('message', 'this is a test')
// Sending to all clients in 'game' room(channel) except sender
socket.broadcast.to('game').emit('message', 'nice game')
// Sending to sender client, only if they are in 'game' room(channel)
socket.to('game').emit('message', 'enjoy the game')
// Sending to individual socketid
socket.broadcast.to(socketid).emit('message', 'for your eyes only')
// Sending to all clients, include sender
io.emit('message', 'this is a test')
// Sending to all clients in 'game' room(channel), include sender
io.in('game').emit('message', 'cool game')
// Sending to all clients in namespace 'myNamespace', include sender
io.of('myNamespace').emit('message', 'gg')
// Send to all connected clients
socket.emit()
// Send to all connected clients except the one that sent the message
socket.broadcast.emit()
// Event listener, can be called on client to execute on server
socket.on()
// For emitting to specific clients
io.sockets.socket()
// Send to all connected clients (same as socket.emit)
io.sockets.emit()
// Initial connection from a client.
io.sockets.on()

Reference: stackoverflow

app.js

useragent: used to parses user-agent inside header to retrieve platform and os information. It will be accessible in req.useragent which is used in controller
rateLimit: used to limit number of requests

/app.js

require('dotenv').config()
const path = require('path')
const express = require('express')
const mongoose = require('mongoose')
const useragent = require('express-useragent') 
const rateLimit = require('express-rate-limit') 
const { MONGODB_URI } = require('./config')
const messageRoutes = require('./routes/message') 
const { setUpIOConnection } = require('./controllers/socket') 

const app = express()
app.use(express.json())

app.use(useragent.express()) 
// Set up rate limiter for entire app requests
const appLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 150, // limit each IP # requests per windowMs
})
app.use(appLimiter)

// Serves mern-demo/client/build statically
app.use(express.static(path.join('client', 'build')))

// Set CORS header
app.use((req, res, next) => {
  res.setHeader('Access-control-Allow-Origin', '*')
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, DELETE, PUT, OPTIONS'
  )
  res.setHeader('Set-Cookie', 'HttpOnly;Secure;SameSite=Strict')
  // Allow client to set headers with Content-Type
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
  next()
})

// Register routes
app.use(messageRoutes)

app.use((req, res, next) => {
  res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
})

// Error Handler
app.use((error, req, res, next) => {
  const status = error.statusCode || 500
  const message = error.message
  const data = error.data // Passing original error data
  res.status(status).json({ message: message, data: data })
})

// DB connection
mongoose
  .connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  })
  .then(result => {
    const port = process.env.PORT || 8080
    const server = app.listen(port, () => {
      console.log(`Listening on port ${port}...`)
    })
    setUpIOConnection(server)
  })
  .catch(err => {
    // Handle error
  })

Client side – Creating views

Create Chat directory under Components as well as children files:

TEXT

.
└── client
    └── src
        └── Components
            ├── Chat
            |   ├── ChatIcon
            |   |   └── index.js
            |   |       └── styles.scss
            |   ├── ChatModal
            |   |   ├── index.js
            |   |   └── styles.scss
            |   └── index.js
            └── ...

Set default exports for ChatIcon and ChatModal inside Chat/index.js

.../Chat/index.js

export { default as ChatIcon } from './ChatIcon'
export { default as ChatModal } from './ChatModal'

ChatIcon

In ChatIcon component, userCount and toggleShowChat will be passed down from App component later

.../Chat/ChatIcon/index.js

JSX

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCommentDots } from '@fortawesome/free-solid-svg-icons'

import './styles.scss'

const ChatIcon = ({ userCount, toggleShowChat }) => {
  return (
    <div className="chat-icon-container" onClick={toggleShowChat}>
      <FontAwesomeIcon
        className="icon-fa icon-comment-dots"
        icon={faCommentDots}
      />
      <span className="chat-icon-user-count disable-selection">
        {`chat(${userCount})`}
      </span>
    </div>
  )
}

export default ChatIcon

Add ChatIcon Styling

.../Chat/ChatIcon/styles.scss

SCSS

.chat-icon-container {
  cursor: pointer;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  margin: 1rem;
  padding: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px #ccc;

  &:hover {
    .icon-comment-dots {
      opacity: 1;
    }
  }

  .icon-comment-dots {
    color: #ea4334;
    opacity: 0.8;
    width: 25px;
    height: 25px;
  }

  .chat-icon-user-count {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #333;
  }
}

App

Import ChatIcon inside App and create state to toggle showing/hiding the chat

App/index.js

JSX

import React, { useState } from 'react' 
import Header from '../Header'
import { ChatIcon, ChatModal } from '../Chat' 

import './styles.scss'

const App = () => {
  const [showChat, setShowChat] = useState(false)
  const toggleShowChat = () => {
    setShowChat(!showChat)
  }
  return (
    <div className="App">
      <Header title="Messenger App" />
      <ChatIcon toggleShowChat={toggleShowChat} />
    </div>
  )
}
export default App

In App/styles.scss, add relative position and import bootstrap

App/styles.scss

SCSS

@import '~bootstrap/scss/bootstrap'; 
@import '../Shared/config';
@import '../Shared/util';

.App {
  position: relative; 
  text-align: center;
}

At this point, your app should have a fixed positioned chat icon available on your app

ChatModal

ChatModal/index.js

JSX

import React, { useState, useRef, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
  faWindowMinimize,
  faEllipsisH,
} from '@fortawesome/free-solid-svg-icons'
import { InputGroup, FormControl, Button as Btn, Form } from 'react-bootstrap'
import TimeAgo from 'react-timeago'
import { MESSAGE } from '../../../constants'
import Button from '../../Button'
import Alert from '../../Alert'

import './styles.scss'

const ChatModal = ({ toggleShowChat, userCount, messages }) => {
  const [sendLoading, setSendLoading] = useState(false)
  const [message, setMessage] = useState('')
  const [error, setError] = useState(undefined)
  const scrollDivRef = useRef(null)
  const inputRef = useRef(null)

  const scrollToBottom = () => {
    scrollDivRef.current.scrollIntoView({ behavior: 'auto' })
  }

  // Scroll to bottom when messages change
  useEffect(scrollToBottom, [messages])

  const handleChange = e => {
    const value = e.target.value
    const rowCount = value.split('\n').length

    // Character limit & row limit
    if (
      value.length <= MESSAGE.CHAR_LIMIT &&
      rowCount <= MESSAGE.TEXTAREA_MAX_ROWS &&
      value !== '\n'
    ) {
      setMessage(value)
    }
  }

  // Submit on enter in textarea. Shift + enter still valid to type newline
  const handleKeyPress = e => {
    // Submit if enter was pressed without shift
    if (e.key === `Enter` && !e.shiftKey) {
      e.preventDefault() // Prevents newline
      handleSubmit(e)
    }
  }

  const handleSubmit = async e => {
    e.preventDefault()

    if (message.trim().length > 0 && message.length <= MESSAGE.CHAR_LIMIT) {
      setSendLoading(true)
      try {
        const res = await fetch(process.env.REACT_APP_FETCH_URL + '/message', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            message: message,
          }),
        })
        if (res.status === 400) {
          throw new Error("You're typing too fast! Please try again soon")
        }
        if (res.status !== 200 && res.status !== 201) {
          throw new Error('Failed to post')
        }
        await res.json()
        setMessage('') // Clear input field
        setSendLoading(false)
      } catch (err) {
        setError(err)
        setMessage('')
        setSendLoading(false)
      }
    }
  }

  return (
    <div className="chat-modal">
      <div className="chat-main">
        <div className="chat-delay-show">
          <header className="chat-header">
            <div className="icon-container">
              <Button disabled iconBtn>
                <FontAwesomeIcon
                  className={`icon-ellipsis-h`}
                  icon={faEllipsisH}
                />
              </Button>
            </div>
            <h1 className="chat-header-text">{`Chat with others! (${userCount})`}</h1>
            <div className="icon-container">
              <Button iconBtn onClick={toggleShowChat}>
                <FontAwesomeIcon
                  className={`icon-window-minimize`}
                  icon={faWindowMinimize}
                />
              </Button>
            </div>
          </header>
          <div className="chat-content">
            <div className="chat-content-inner">
              <Alert error={error} onClose={() => setError(undefined)} />
              {messages.length > 0 ? (
                messages.map((m, i) => (
                  <div key={i} className="message-container">
                    <div className="message-sender">
                      <span className="message-sender-location">
                        {`${m.partialIp}${
                          m.timezone ? ` (${m.timezone})` : ``
                        }`}
                      </span>
                      <span className="message-sender-time">
                        <TimeAgo date={m.createdAt} />
                      </span>
                    </div>
                    <div className="message-block">
                      <span>{m.message}</span>
                    </div>
                  </div>
                ))
              ) : (
                <Loader />
              )}
              <div ref={scrollDivRef} />
            </div>
          </div>
          <div className="chat-input-container" onSubmit={handleSubmit}>
            <Form>
              <InputGroup className="mb-2" size="sm">
                <FormControl
                  required
                  as="textarea"
                  rows={MESSAGE.TEXTAREA_MAX_ROWS}
                  maxLength={MESSAGE.CHAR_LIMIT}
                  placeholder="Text Message"
                  aria-label="Text Message"
                  aria-describedby="basic-addon2"
                  value={message}
                  onChange={handleChange}
                  onKeyPress={handleKeyPress}
                  ref={inputRef}
                />
                <InputGroup.Append>
                  <Btn
                    variant="outline-secondary"
                    type="submit"
                    disabled={sendLoading}
                  >
                    Send
                  </Btn>
                </InputGroup.Append>
              </InputGroup>
            </Form>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ChatModal

{ MESSAGE } comes from the following file. It specifies the character limit (for the client side!) and the maximum number of rows for the textarea.

.../src/constants/enum.js

export const MESSAGE = {
  CHAR_LIMIT: 100,
  TEXTAREA_MAX_ROWS: 5,
}

Add styling for ChatModal

ChatModal/styles.scss

SCSS

$chat-width: 320px;
$chat-height: 620px;

.chat-modal {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 2;
  padding: 1rem;

  .chat-main {
    width: $chat-width;
    height: $chat-height;
    background: #f7f7f7;
    border-radius: 10px;
    box-shadow: 0 2px 6px #aaa;
    animation: expand 250ms ease-in;

    .chat-delay-show {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
      opacity: 0;
      animation: delayShow 200ms forwards 350ms;
    }
    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      padding: 0.3rem 1rem;

      &-text {
        font-size: 1rem;
        color: #333;
        margin: 0;
      }

      .icon-container {
        .icon-window-minimize {
          color: #333;
          opacity: 0.7;
          &:hover {
            opacity: 1;
          }
        }

        .icon-ellipsis-h {
          color: #ddd;
        }
      }
    }

    .chat-content {
      display: block;
      position: relative;
      height: 100%;
      white-space: pre-wrap;
      word-wrap: break-word;

      .chat-content-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.2rem;
        height: 100%;
        overflow-y: auto;
        background: transparent;
        overscroll-behavior: contain;

        .message-container {
          display: flex;
          flex-direction: column;
          border-top: 1px solid #ddd;
          padding: 0.5rem;
          .message-sender {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 0.7rem;
              text-align: left;
              margin-bottom: 0.1rem;
              margin-left: 0.2rem;
              color: #555;
            }
          }
          .message-block {
            padding: 0.3rem 0.6rem;
            background: #fff;
            border: 1px solid #eee;
            color: #333;
            border-radius: 13px;
            font-size: 0.8rem;
            text-align: left;
            animation: fadeInMessage 800ms ease-in;
          }
        }

        .alert-custom {
          position: sticky;
          top: 0;
        }
      }
    }

    .chat-input-container {
      background: #fbfaff;
      padding: 0.3rem;
      .btn-outline-secondary {
        border-color: #cbc7e6;
      }
      .btn:hover {
        background: #e7f2ff;
        color: #333;
      }

      .form-control {
        font-size: 16px !important;
      }
      textarea {
        resize: none;
        height: 40px;
      }
    }
  }
}

@keyframes expand {
  from {
    width: 0px;
    height: 0px;
  }
  to {
    width: $chat-width;
    height: $chat-height;
  }
}

@keyframes delayShow {
  to {
    opacity: 1;
  }
}

@keyframes fadeInMessage {
  from {
    opacity: 0.2;
    background: #aebaeb;
  }
  to {
    opacity: 1;
    background: #fff;
  }
}

Back to App

App/index.js

JSX

import React, { useState, useEffect } from 'react'
import openSocket from 'socket.io-client'
import Alert from '../Alert'
import Header from '../Header'
import { ChatIcon, ChatModal } from '../Chat'

import './styles.scss'

const App = () => {
  const [showChat, setShowChat] = useState(false)
  const toggleShowChat = () => setShowChat(!showChat)
  const [publicUsers, setPublicUsers] = useState([])
  const [messages, setMessages] = useState([])
  const [error, setError] = useState(null)

  useEffect(() => {
    createSocketConnection()
    fetchMessages()
  }, [])

  const createSocketConnection = () => {
    const socket = openSocket(process.env.REACT_APP_FETCH_URL)
    // init
    socket.on('init', data => {
      setPublicUsers(data.users)
    })
    // Message events
    socket.on('message event', data => {
      if (data.action === 'add') {
        setMessages(prevMessages => [...prevMessages, data.message])
      }
    })
  }

  const fetchMessages = async () => {
    try {
      const res = await fetch(process.env.REACT_APP_FETCH_URL + '/messages')
      if (res.status !== 200) {
        throw new Error('Failed to fetch messages')
      }
      const resData = await res.json()
      // Set reversed 10 messages
      setMessages(resData.messages.reverse())
    } catch (err) {
      setError(err)
    }
  }

  return (
    <div className="App">
      <Header title="Messenger App" />
      <Alert error={error} onClose={() => setError(null)} />
      {showChat ? (
        <ChatModal
          toggleShowChat={toggleShowChat}
          userCount={publicUsers.length}
          messages={messages}
        />
      ) : (
        <ChatIcon
          toggleShowChat={toggleShowChat}
          userCount={publicUsers.length}
        />
      )}
    </div>
  )
}

export default App

Playing sound when sending or receiving message

On desktop, setting const [audio] = useState(new Audio(popSoundSrc)) and audio.play() are just enough to play sound; however, iOS prevents JavaScript play() and load() methods. In other words, user must interact with the website first i.e. clicking a button before audio gets played. In this example, we'll play muted audio on clicking chat icon to work around this problem. Read more about how iOS handles HTML5 Audio and Video

App/index.js

// ...

import popSoundSrc from "../../assets/pop.mp3"
let audioFirstPlayed = false

const App = () => {
  // ...
  const [audio] = useState(new Audio(popSoundSrc)) 

  // ...

  const createSocketConnection = () => {
    const socket = openSocket(process.env.REACT_APP_FETCH_URL)
    // init
    socket.on("init", data => {
      setPublicUsers(data.users)
    })

    // Message events
    socket.on("message event", data => {
      if (data.action === "add") {
        setMessages(prevMessages => [...prevMessages, data.message])
        if (audio.muted) {
          audio.muted = false
        }
        audio.play()
      }
    })
  }

  const toggleShowChat = () => {
    if (!audioFirstPlayed) {
      audio.muted = true
      audio.play()
      audioFirstPlayed = true
    }
    setShowChat(!showChat)
  }

  return ( ... )
}

export default App

Possible enhancements from here

Queue sending multiple messages

Create Gatsby.js

Sun, 22 Mar 2020 00:00:02 GMT

Gatsby is a static site generator

Install Gatsby CLI (Command-line Interface)

BASH

npm i -g gatsby-cli

Create new gatsby app

BASH

gatsby new my-app

[Git + cron]: Schedule your git commands on AWS EC2

Sun, 22 Mar 2020 00:00:01 GMT

Overview

Last post, [Git + launchd]: Schedule your git commands with launchd, covered how to schedule to run sh commands, but it wouldn't be as efficient as it cannot run while the PC is asleep/off. Since EC2 instance won't hibernate (hopefully), this may be a good place to set up your cron job. In this post, I'll explain how to set up cron job on EC2 instance to run a script—git command as an example.

Follow this section of post to create AWS EC2 instance

BASH

ssh -i ~/some/dir/aws-key.pem ubuntu@<YOUR_PUBLIC_DNS>

Clone your project

Folder structure

TEXT

.
├── opt
|   ├── cron-test
|   |   └── <YOUR_PROJECT>
|   └── script.sh
└── ...

Cloning your GitHub Project

BASH

sudo git clone https://github.com/<GITHUB_USERNAME>/<REPO.git> /opt/cron-test

Make changes to your project

Assume that you've made some changes in your project

BASH

sudo vim /opt/cron-test/some_change.html

Create script that will run in the future

BASH

sudo vim /opt/script.sh

/opt/script.sh

BASH

cd /opt/cron-test
git add .
git commit -m "[RELEASE]: 2.0.0" > /tmp/commit-log 2>&1
git push > /tmp/push-log 2>&1

Save

Make it executable

BASH

sudo chmod +x /opt/script.sh

Check the date & time

Your EC2 instance may not have the same time as the location you're at. Use date to check the time of the machine.

BASH{OUTPUTLINES:

date
Sun Mar 22 07:07:50 CDT 2020

Set up crontab

BASH

sudo crontab -e # Then select your favorite editor

BASH

00 7 22 3 * /opt/script.sh
# Minute | Hour | Date | DayOfWeek | Script

That's it!

This cron job will executes /opt/script.sh on 3/22 at 7:00AM every year

Checking logs

On linux, cron job gets logged at

TEXT

/var/log/system.log

Use the following to filter cron jobs

TEXT

grep CRON /var/log/system.log

[Git + mac]: Schedule your git commands with launchd

Sat, 21 Mar 2020 00:00:03 GMT

launchd

In computing, launchd, a unified operating system service management framework, starts, stops and manages daemons, applications, processes, and scripts in macOS. It was introduced with Mac OS X Tiger and is licensed under the Apache License — Wikipedia

Scenario Example

You have completed a new release for your project that should be pushed to your GitHub repository at 11:11AM tomorrow. But for some reason, you won't be able to be sitting in front of your computer to upload your release. Let's see how we can schedule to run a program (script) while you're away.

Write a script that needs to be run at a certain time

~/Desktop/push_release.sh

BASH

cd ~/Desktop/project
git add .
git commit -m "[RELEASE]: 1.0.1"
git push

If you want to create a log file as a result, you can put output to file

BASH

cd ~/Desktop/project
git add .
git commit -m "[RELEASE]: 1.0.1" > /tmp/commit_log 2>&1
git push > /tmp/push_log 2>&1

2&>1 indicates that standard error is redirected to specified file

(optional): you can choose to make *.sh executable with chmod +x *.md, then you won't have to specify bash in ProgramArguments in plist file below.

Create plist to trigger program to run at a specific time

Make sure to place it under ~/Library/LaunchAgents. ~ denotes home directory.

~/Library/LaunchAgents/com.launchd.example.plist

XML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>com.launchd.example</string>
    <key>ProgramArguments</key>
        <array>
            <string>bash</string> <!-- This line isn't required if *.sh is already executable -->
            <string>/Users/Me/Desktop/push_release.sh</string>
        </array>
    <key>StartCalendarInterval</key>
    <dict>
      <key>Month</key>
      <integer>3</integer>
      <key>Day</key>
      <integer>22</integer>
      <key>Hour</key>
      <integer>11</integer>
      <key>Minute</key>
      <integer>11</integer>
    </dict>
  </dict>
</plist>

Runs bash /Users/Me/Desktop/push_release.sh on 3/22 at 11:11AM
Please read More about launchd to learn more details

Load launchd

You need to load the plist file after it's created.

BASH

launchctl load com.launchd.example.plist

To verify that it's loaded

BASH{OUTPUTLINES:

launchctl list | grep com.launchd.example
-  0  com.lanchd.example

Receiving output, i.e. - 0 com.launchd.example means that the job is currently loaded
-: means that it is loaded but is not running
0 means job finished successfully. Any positive number means that there was an error, and negative number denotes a termination

To unload the job

BASH

launchctl unload com.launchd.example.plist

Be Aware..

Loaded launchd will still work with Terminal.app closed, but it won't work while your computer is asleep or shutdown.
- If it wakes up before the job was executed, or there is more job to be executed, it will continue to work without having to "re-loading" the job
- If it wakes up after invocation time period time, and there is no more job to run, it won't re-execute
One workaround can be waking up the mac a few minutes before execution time by going to Preference >> Energy Saver >> Schedule

More about launchd

Type	Location	Who Runs
User Agents*	~/Library/LaunchAgents	Currently signed in user
Global Daemons	/Library/LaunchDaemons (Use sudo to edit files)	Currently signed in user
Global Agents	/Library/LaunchAgents (Use sudo to edit files)	root or specified user with Username key

plist Skeleton

XML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>Label</key>
        <string>com.launchd.example</string>
        <key>Program</key>
        <string>/Users/Me/Desktop/push_release.sh</string>
        <key>RunAtLoad</key>
        <true/>
    </dict>
</plist>

Label

Label is required for every job and should be unique.

XML

<key>Label</key>
<string>com.launchd.example</string>

What to Start

ProgramArgument defines the path to the program

XML

<key>ProgramArgument</key>
<array>
    <string>mv</string>
    <string>/Users/Me/Desktop/push_release.sh</string>
</array>

When to Start

RunAtLoad & <true/> starts the job as soon as the script gets loaded

XML

<key>RunAtLoad</key>
<true/>

StartInterval is like a timer. This will run the job every 3600 seconds, every hour, after the script is loaded. The timer stops when computer is asleep.

XML

<key>StartInterval</key>
<integer>3600</integer>

StartCalendarInterval lets you to specify time to run the program. The below example will run the program everyday at 11:11PM

XML

<key>StartCalendarInterval</key>
<dict>
    <key>Hour</key>
    <integer>23</integer>
    <key>Minute</key>
    <integer>11</integer>
</dict>

Available Keys: Month (1..12), Day (1..31), Weekday (0(Sunday)..7(Sunday)), Hour (0..23), Minute (0..59)

Below example will run once an hour

XML

<key>StartCalendarInterval</key>
<dict>
    <key>Hour</key>
    <integer>1</integer>
</dict>

You can use <array> to define multiple calendar intervals

XML

<key>StartCalendarInterval</key>
<array>
    <dict>
        <key>Hour</key>
        <integer>23</integer>
        <key>Minute</key>
        <integer>11</integer>
    </dict>
    <dict>
        <key>Minute</key>
        <integer>0</integer>
        <key>Weekday</key>
        <integer>7</integer>
    </dict>
</array>

Run at 11:11PM every day and every hour on Sundays

[Git]: Authenticate GitHub Account with SSH Key (macOS, Linux)

Sat, 21 Mar 2020 00:00:02 GMT

Create new ssh key

BASH

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

If you're in an environment that uses sudo for most commands, be sure to include sudo

Put email inside "". Press enter for prompts

Copy SSH key

BASH

pbcopy < ~/.ssh/id_rsa.pub

Copies generated ssh key to the clipboard
If pbcopy is not applicable, run cat ~/.ssh/id_rsa.pub and copy the text

Save copied key on GitHub

Go to SSH and GPG keys on your profile —> Settings —> SSH and GPG keys

Click New SSH Key

Type in any title for your SSH key and paste copied ssh key in then Add SSH key

Created SSH key looks like this

Add key to ssh-agent

Run ssh-agent

BASH{OUTPUTLINES:

eval "$(ssh-agent -s)"
Agent pid 5190

(macOS only): modify ~/.ssh/config

TEXT

Host *
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_rsa

Add SSH private key to ssh-agent

BASH

ssh-add ~/.ssh/id_rsa # Add -K option for macOS users

Test SSH Connection

BASH{OUTPUTLINES:

ssh -T git@github.com
Hi EllisMin! You've successfully authenticated, but GitHub does not
provide shell access.

Type yes to the prompt

Make sure to use SSH URL when you're authenticated via SSH key. This applies to commands such as git clone, git fetch, git pull, or git push to a repository

[Git]: Remove All Commit History

Sat, 21 Mar 2020 00:00:01 GMT

BASH

git checkout --orphan temp_branch
git add .
git commit -m "[REVERT]: reverted commit history"
git branch -d master # Delete master branch
git branch -m master # Rename temp_branch to master
git push -f origin master

[Git]: Branch & Merge

Sat, 21 Mar 2020 00:00:00 GMT

Create branch

BASH

git branch <branch_name>

Switch to branch

BASH

git checkout <branch_name>

Create & Switch to branch

BASH

git checkout -b <branch_name>

Check branches

BASH

git branch

Some Scenario

You're currently on a master branch

TEXT

[Commit1]
    └─ master

You've decided to implement a new header, so you create a branch named newHeader

BASH

git checkout -b newHeader

TEXT

┌─ newHeader
[Commit1]
    └─ master

While you're working on making a new header, you decide to commit a change

BASH

git add .
git commit -m "[WIP]: making a new header"

TEXT

[Commit1] <─── [Commit2]
    └─ master      └─ newHeader

newHeader branch is ahead of master

All of a sudden you have to fix a serious bug that doesn't depend on a new header that you've been implementing. Then you'd want to create a new branch from master

BASH

git checkout master
git checkout -b bug32

You've worked to fix the important bug and commit a change

BASH

git add .
git commit -m "[FIX]: bug32"

TEXT

┌─ bug32
       ┌────── [Commit3]    
[Commit1] <─── [Commit2]
    └─ master      └─ newHeader

newHeader and bug32 has complete different changes

You've finished fixing the bug so you'd want to deploy it

BASH

git checkout master
git merge bug32

[Git]: Pulling Commit from Other Repository

Sat, 21 Mar 2020 00:00:00 GMT

BASH

# Adding other repository as a remote
git remote add other <GitHub_Path>

# Retrieve commits from other repo
git remote update

# Check commits of other repo & current repo
git log --all --oneline --10 # i.e. shoing 10 logs

# Cherry pick commits
git cherry-pick 1a2b3cd # Put more commit SHA if needed

# Confirm local repository
git log

# Push
git push origin master

# Delete other repo form remote
git remote remove other

# View remote repositories
git remote

[Git]: Categorize your GitHub Commit Messages

Fri, 20 Mar 2020 00:00:00 GMT

Uncategorized commit messages

Categorized commit messages

Categorizing Commit Messages

It is completely optional and can be a bit of extra work to categorize your github commit messages, but it clearly improves a readability. Below is the list of "tags" that I use when I write commit messages—most are self-explanatory.

BASH

[INITIAL]    # Used for initial commits
[ADD]        # Newly added features / components
[UPDATE]     # Used for updated existing features
[STYLES]     # Commits regarding styles
[REFACTOR]   # Used when restructured existing codes, usually for better performance
[FIX]        # Used to denote fixes
[DOCS]       # Documents related i.e. README
[REVERT]     # When commit was reverted back to previous code
[PRODUCTION] # Production related commits
[WIP]        # Used to denote Work In Progress for commits that are not final

Sometimes a commit message seems to fall into more than one category. I simply use multiple tags such as [REFACTOR & ADD], [ADD & WIP], ...

Setting Alias

You can set alias to use categorized commit messages. Refer to Setting Alias on Terminal post.

[React + Node.js]: Implement Web Socket with Socket.io

Fri, 20 Mar 2020 00:00:00 GMT

Websocket

Typical approach of Node.js application requires client to request data, and the server sends the response back--this is HTTP protocol, but what if you want to notify a client when there's a change on the server? Imagine a messenger application. Your friend needs to be able to receive your message in real-time without having to request something to the server. This is where websocket comes into play. Built over HTTP, websockets enable two-way communication where the server can push data to the client without receiving request. Socket.io is a popular library that you can use to establish websocket.

Overview

Demo

As an example, I'll be using this MERN stack app to implement websocket. As user adds/deletes an entry, the updated data will be updated in real-time on other browsers as well. The complete project is available here.

Socket.io on the server

Install socket.io on the server side

BASH

npm i socket.io

Create a utility to initialize & get io

socket.js

let io
module.exports = {
  init: httpServer => {
    io = require("socket.io")(httpServer)
    return io
  },
  getIO: () => {
    if (!io) {
      throw new Error("Socket.io is not initialized")
    }
    return io
  },
}

Creating socket io connection

app.js

// ...
// DB connection
mongoose
  .connect(MONGODB_URI)
  .then(result => {
    const port = process.env.PORT || 8080
    const server = app.listen(port, () => {
      console.log(`Listening on port ${port}...`)
    })

    // Create socket io connection
    const io = require("./util/socket").init(server)
    io.on("connection", socket => {
      console.log("Client connected")
    })
  })
  .catch(err => {
    // Handle error
  })

Check the import directory of socket util

Sending message to client on adding user

controllers/user.js

const User = require("../models/user")
const io = require("../socket") 

// ...

exports.postUser = async (req, res, next) => {
  try {
    let occupation = req.body.occupation
    if (!occupation) occupation = "unemployed"
    const user = new User({
      name: req.body.name,
      age: req.body.age,
      occupation: occupation,
    })
    await user.save()

    // Sends message to all connected users
    io.getIO().emit("user event", {
      action: "add",
      user: { ...user._doc },
    })

    res.status(201).json({
      message: "User created",
      user: user,
    })
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500
    }
    next(err)
  }
}

Sending message to client on deleting user

controllers/user.js

exports.deleteUser = async (req, res, next) => {
  const userId = req.params.userId
  try {
    const user = await User.findById(userId)
    if (!user) {
      const error = new Error("Couldn't find the user")
      error.statusCode = 404
      throw error
    }
    await User.findByIdAndRemove(userId)

    // Sends message to all connected users
    io.getIO().emit("user event", {
      action: "delete",
      userId: userId,
    })

    res.status(200).json({ message: "User removed" })
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500
    }
    next(err)
  }
}

Client side

Install socket.io-client on the client side

BASH

npm i socket.io-client

Create socket connection & Update state with received data

front-end/App.js

JSX

import React, { useState, useEffect } from "react";
import openSocket from "socket.io-client"; 
import User from "./user";
import UserAddForm from "./user-add-form";
import "./App.css";

const App = () => {
  const [addLoading, setAddLoading] = useState(false);
  const [deleteLoading, setDeleteLoading] = useState(false);
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers();
    createSocketConnection(); 
  }, []);

  const createSocketConnection = () => {
    const socket = openSocket(process.env.REACT_APP_FETCH_URL);
    socket.on("user event", data => {
      if (data.action === "add") {
        setUsers(prevUsers => [data.user, ...prevUsers]);
      } else if (data.action === "delete") {
        setUsers(prevUsers =>
          prevUsers.filter(user => user._id !== data.userId)
        );
      }
    });
  };

  const fetchUsers = async () => { ... };
  const handleAdd = async formData => { ... };
  const handleDelete = async userId => { ... };
  return ( ... );
};

user event listens to the event that was sent from the server

[Mac]: Set up

Thu, 19 Mar 2020 00:00:00 GMT

List of things to set up on Mac

Development
- Homebrew
- zsh: Unix shell built on top of bash
  - & My My Zsh
  - & Terminal theme (Dracula)
- Node.js
- Google chrome
- Firefox
- VS Code
- Eclipse
- MongoDB Compass
- Virtual box
  - Kali-linux
- MySql

Productivity
- Dropbox
- BetterTouchtool
- Keyboard Maestro
- ScrollReverser
Optimization
- CleanMyMac
- iStat
Security
- Prey
- iAlert
Personal
- Kakaotalk
- Photoshop
- Lightroom
- Parallels
- Skype

[Mac]: Customize your Terminal.app

Thu, 19 Mar 2020 00:00:00 GMT

Z shell

Z shell is a Unix shell that's built on top of bash, default shell for macOS, has more additional features and plugins.

install zsh

BASH

brew install zsh

Doesn't have Homebrew? Install with /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Homebrew site

Oh My Zsh

Oh My Zsh is a open source framework for managing your zsh configuration.

install Oh My Zsh

BASH

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Config

BASH

vim ~/.zshrc

Refer to Docs for configuration.
If you have .bash_profile, you can put contents here

Themes

Install your favorite theme here

Dracula theme is one of my favorites.

[React + Node.js]: Deploy Your MERN Stack App to Amazon EC2 with SSL Encryption

Wed, 18 Mar 2020 00:00:00 GMT

This post is stale

Stale because using Route 53 & Elastic Load Balancer & Amazon Certificate Manager are not necessary. i.e. this post tells to use both Certificate Manager and letsencrypt that are duplicate processes. New post is available here

Heroku vs Amazon Web Services (AWS)

Both are popular choices for cloud services where you can deploy your web applications and are great for hosting them. Heroku, in my opinion, is a lot simpler when it comes to deploy MERN stack application, but I still wanted to cover them both.

Prerequisites

If you don't have MERN Stack project available, here is how you can set up a basic MERN stack application with REST API.

- [React + Node.js]: Create your MERN Stack Application - Part 1: Backend

- [React + Node.js]: Create your MERN Stack Application - Part 2: Frontend

In addition, be sure to go through some steps from the last post on how to..

You can choose skip above steps and download the project. I'll be using this project to deploy on AWS EC2.

1. Create Ubuntu AWS EC2 Instance

Go to AWS console to sign up with your account if you haven't. Once singed in, Launch a virtual machine

Search for ubuntu and select Ubuntu Server 18.04 LTS (HVM), SSD Volume Type

Make sure that t2.micro (Free tier eligible) is checked and click 6. Configure Security Group.

Add more types: HTTP and HTTPS by clicking Add Rule. Once added, click Review and Launch

Click Launch

Create a new key pair. Name your key (filename), Download Key Pair then click Launch Instances

Click View Instances

Under Description tab, copy your Public DNS (IPv4) as you'll need it soon

2. Connect to your Instance

Open your git bash(windows) or terminal(mac) then browse over to the directory you saved your key file. Then run the command to change file access (User can read only).

BASH

chmod 400 ~/Downloads/aws-key-1022.pem

Then connect to your instance with your copied Public DNS (IPv4). i.e. ssh -i ~/Downloads/aws-key-1022.pem ubuntu@ec1-4-56-119-211.us-east-2.compute.amazonaws.com

BASH

ssh -i ~/Downloads/aws-key-1022.pem ubuntu@<YOUR_COPIED_PUBLIC_DNS>

3. Install required packages on Ubuntu

Run the below command to install all packages needed to run the server on Ubuntu.

BASH

curl https://ellismin.com/sh/linux-mern-setup | sudo bash

What's in file: linux-mern-setup

BASH

# Add nodejs 10 personal package from nodesource
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
# Install Node.js & npm
sudo apt-get install -y nodejs
# Import GPK key for MongoDB
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 4B7C549A058F8B6B
# Add MongoDB APT repository at /etc/apt/sources.list.d/mongodb.list
echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb.list
# Instal MongoDB on Ubuntu
sudo apt update
sudo apt-get install -y mongodb-org
# Start MongoDB
sudo systemctl start mongod
# Start MongoDB automatically on startup
sudo systemctl enable mongod
# Install pm2
sudo npm install -g pm2
# Start pm2 automatically on startup
sudo pm2 startup systemd
# Install nginx
sudo apt-get install -y nginx
# Enable UWF--allow SSH with firewall
sudo ufw allow OpenSSH
# Allow HTTP/HTTPS with firewall
sudo ufw allow 'Nginx Full'
# Enable firewall
sudo ufw --force enable

4. Set up your MERN application with nginx

Clone your repository into your Ubuntu machine. Note that I'm using a project that was set up in this post. Client folder(front-end) is located inside the root directory that contains other the back-end code.

BASH

sudo git clone https://github.com/EllisMin/mern-demo-production.git /opt/mern-demo

Tired of github authentication for pulling repository? Create ssh-keygen with cd ~/.ssh & ssh-keygen then keep pressing enter for prompts. Run cat id_rsa.pub to copy the key & paste into github repository --> Settings --> Deploy keys --> Add deploy key.

Navigate into project folder and install npm packages

BASH

cd mern-demo && sudo npm i

Start the server with pm2

BASH

sudo pm2 start app.js

Why use pm2? While running the server with npm start works, the server may crash if there's an error or unexpected behavior occur to the server. pm2 allows to keep application alive forever by reloading Node.js application without downtime.

Tip: more commands for pm2

BASH

# You can use [filename] instead of all
sudo pm2 stop all    # Stops all process running with pm2
sudo pm2 restart all # Restart all process running
sudo pm2 delete all  # Remove all process from pm2 list
sudo pm2 logs        # Displays log messages
sudo pm2 status      # Shows status of running servers

Configuring nginx

Start off by removing the default setting for nginx

BASH

sudo rm /etc/nginx/sites-available/default

Then, create a new default for configuration

BASH

sudo vim /etc/nginx/sites-available/default
# OR
sudo nano /etc/nginx/sites-available/default

/etc/nginx/sites-available/default

NGINX

server {
  listen 80 default_server;
  server_name _;
  # Path to front-end index.html
  location / {
    root /opt/mern-demo/front-end/build;
    try_files $uri /index.html;
  }
}

Change the path to your project's build folder of client side.
i.e. /opt/<YOUR_PROJECT_FOLDER>/<CLIENT_FOLDER>/build

Making changes to this file requires restarting nginx. Restart it.

BASH

sudo systemctl restart nginx
# OR
sudo service nginx restart

Tip: more commands for nginx

BASH

sudo nginx -t                # check nginx syntax
sudo systemctl start nginx   # start nginx
sudo systemctl stop nginx    # stop nginx
sudo systemctl restart nginx # restart nginx
sudo systemctl status nginx  # view server status
sudo tail -30 /var/log/nginx/error.log # display error log for debugging

At this point, you should be able to see your app running on server. Navigate to your Public DNS(IPv4) i.e. ec1-4-56-119-211.us-east-2.compute.amazonaws.com. Alternative is to go to IPv4 Public IP i.e. 3.22.154.213

5. Set up your custom domain i.e. route traffic to EC2 Instance

Setting up your custom domain is possible through Route 53 service which is a cheap, paid service (50 cents per month up to 25 hosted zone). Read More about pricing

Go to AWS console and launch Route 53

Start DNS Management

Create Hosted Zone

Type in your domain i.e. yourDomain.com and Create

Copy these 4 values, ns-.... then navigate to your domain provider. i.e. namecheap

Paste in copied values into Custom DNS name servers on your domain provider's website

Changing name server may take some time depending on the domain provider

6. Set up your SSL certificate (HTTPS)

Certificate validation with domain

AWS Certificate Manager provides a free public SSL/TLS certificates. On AWS console. launch Certificate Manager

Request a certificate

Select Request a public certificate then Request a certificate

Choose your domain(s). i.e. yourDomain.com and www.yourDomain.com

Choose your validation method. DNS validation would be available through Route 53 or other domain name providers such as Namecheap, GoDaddy, etc.

Click Review

Confirm and request

(Route 53 users): if your already using Route 53 with custom domain pointing to your EC2 instance, simply click Create record in Route 53 button(s). Then you'll be able to view created CNAME records in your hosted zone

For those who are not using Route 53 and their domain name provider allows to alter DNS record, create these records accordingly

After setting those records, it would typically take about 3-10 minutes to be validated

If DNS validation somehow does not work out, try validating with Email address--Amazon will send verification emails to your registered emails with your domain provider.

Once you've had your certificate validated with your domain, move onto the next step

Create Load Balancer

Load balancers, in a nutshell, accept users' traffic and reroutes to the right server.

Elastic Load Balancing pricing--this is pretty cheap & your app should have it anyway.

Launch your EC2 instance and click Load balancers from EC2 Dashboard then click Create Load Balancer.

Select Application Load balancer for HTTP/HTTPS

If you'd like, read more about Load balancer Types

Name your balancer, Add listener for HTTPS, and check all availability zones. Then move to Configure Security Settings

This is where you connect the certificate to your balancer. Select the certificate and move to Configure Security Groups

Select the security group that you've previously when creating EC2 instance i.e. launch-wizard-1 then move to next Configure Routing

Set new target group with a name and select protocol as HTTPS for target group and for health checks. Move to Register Targets

Check your running instance, Add to registered and check the added instance on upper panel. Then click Next: Review and Create

Select the created balancer and click Listeners tab on the lower panel. Select listener for HTTP: 80 then click Edit

Remove the default action

Then create the following action and click Update

TODO: Missing adding two A(Alias) records to Route53

Modify nginx config & Install certbot

Change content of nginx config

BASH

sudo vim /etc/nginx/sites-available/default
OR
sudo nano /etc/nginx/sites-available/default

Change the server_name to your domain names for rerouting

NGINX

# Reroute to HTTPS
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name <yourDomain.com> <www.yourDomain.com>;
  return 301 https://$server_name$request_uri;
}

server {
  client_max_body_size 10m; # Increase upload size limit
  location / {
    # Connect node api
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }
}

BASH

# Install certbot
cd ~ && sudo add-apt-repository ppa:certbot/certbot # Then press enter
sudo apt-get update && sudo apt-get install python-certbot-nginx # Then press Y

Run certbot after installation

BASH

sudo certbot --nginx -d yourDomain.com -d www.yourDomain.com

It'll prompt you with..

Enter your email
Press "A" to agree
Y/N whether to share your email
Press 2 to redirect traffic

Certbot will automatically insert codes inside nginx configuration file:

NGINX{10-16,

# Reroute to HTTPS
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name yourDomain.com www.yourDomain.com;
  return 301 https://$server_name$request_uri;
}

server {
  server_name yourDomain.com www.yourDomain.com; # managed by Certbot
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/yourDomain.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/yourDomain.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

  client_max_body_size 10m; # Increase upload size limit

  # Check if maintenance is on
  location / {
    # Connect node api
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }
}

server {
    if ($host = www.yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

  listen 80 ;
  server_name yourDomain.com www.yourDomain.com;
  return 404; # managed by Certbot
}

This is it! Save `default` and run `sudo systemctl restart nginx` to apply change

Create a scheduler to automatically renew your certificate

BASH

sudo select-editor # Choose your favorite editor
sudo crontab -e

Insert this & save

BASH

11 23 * * * /usr/bin/certbot renew --quiet

Your Ubuntu machine will run /usr/bin/certbot renew --quiet every day at 11:11PM for auto renewal of SSL certificate

Enable maintenance mode for your app

maintenance.html example

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Ramen Kid | Maintenance</title>
    <style>
      body {
        background: #222;
      }
      .main-container-maintenance {
        position: absolute;
        top: 40%;
        left: 50%;
        font-family: Arial, Helvetica, sans-serif;
        color: #fada26;
        text-align: center;
        transform: translate(-50%, -40%);
      }
    </style>
  </head>
  <body>
    <div class="main-container-maintenance">
      <h1>Offline for maintenance</h1>
      <p>
        This website is undergoing maintenance right now (·_·)
      </p>
      <p>Please check back later!</p>
    </div>
  </body>
</html>

Turning On/Off

When the file exists, your app will only serve maintenance.html. Make sure to put it under directory, /opt/maintenance.html

To turn it on or off

BASH

# Turn ON
cd /opt && sudo mv maintenance-.html maintenance.html
# Turn OFF
cd /opt && sudo mv maintenance.html maintenance-.html

nginx config

Modify nginx config to detect whether there exists /opt/maintenance.html.

BASH

sudo vim /etc/nginx/sites-available/default

NGINX{21-23,

# Reroute to HTTPS
server {
  listen 80 default_server;
  listen [::]:80 default_server;
  server_name yourDomain.com www.yourDomain.com;
  return 301 https://$server_name$request_uri;
}

server {
  server_name yourDomain.com www.yourDomain.com; # managed by Certbot
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/yourDomain.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/yourDomain.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
  # Increase upload size limit
  client_max_body_size 10m;

  # Check if maintenance is on
  location / {
    if (-f /opt/maintenance.html) {
      return 503;
    }

    # Connect node api
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

  # When /opt/maintenance.html is found
  error_page 503 @maintenance;
  location @maintenance {
    root /opt;
    rewrite ^(.*)$ /maintenance.html break;
  }
}

server {
    if ($host = www.yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
  listen 80 ;
    server_name yourDomain.com www.yourDomain.com;
    return 404; # managed by Certbot
}

More Notes

To check remaining space in storage of EC2 instance, run df -h

[React + Node.js]: Deploy Your MERN Stack App to Amazon EC2 with SSL Encryption

Wed, 18 Mar 2020 00:00:00 GMT

Heroku vs Amazon Web Services (AWS)

Prerequisites

If you don't have MERN Stack project available, here is how you can set up a basic MERN stack application with REST API.

- [React + Node.js]: Create your MERN Stack Application - Part 1: Backend

- [React + Node.js]: Create your MERN Stack Application - Part 2: Frontend

In addition, be sure to go through some steps from the last post on how to..

You can choose skip above steps and download the project. I'll be using this project to deploy on AWS EC2.

1. Create Ubuntu AWS EC2 Instance

Go to AWS console to sign up with your account if you haven't. Once singed in, Launch a virtual machine

Search for ubuntu and select Ubuntu Server 18.04 LTS (HVM), SSD Volume Type

Make sure that t2.micro (Free tier eligible) is checked and click 6. Configure Security Group.

Add more types: HTTP and HTTPS by clicking Add Rule. Once added, click Review and Launch

Click Launch

Create a new key pair. Name your key (filename), Download Key Pair then click Launch Instances

Click View Instances

Under Description tab, copy your Public DNS (IPv4) as you'll need it soon

2. Connect to your Instance

Open your git bash(windows) or terminal(mac) then browse over to the directory you saved your key file. Then run the command to change file access (User can read only).

BASH

chmod 400 ~/Downloads/aws-key-1022.pem

Then connect to your instance with your copied Public DNS (IPv4). i.e. ssh -i ~/Downloads/aws-key-1022.pem ubuntu@ec1-4-56-119-211.us-east-2.compute.amazonaws.com

BASH

ssh -i ~/Downloads/aws-key-1022.pem ubuntu@<YOUR_COPIED_PUBLIC_DNS>

3. Install required packages on Ubuntu

Run the below command to install all packages needed to run the server on Ubuntu.

BASH

curl https://ellismin.com/sh/linux-mern-setup | sudo bash

What's inside: linux-mern-setup

BASH

# Add nodejs 10 personal package from nodesource
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
# Install Node.js & npm
sudo apt-get install -y nodejs
# Import GPK key for MongoDB
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 4B7C549A058F8B6B
# Add MongoDB APT repository at /etc/apt/sources.list.d/mongodb.list
echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb.list
# Instal MongoDB on Ubuntu
sudo apt update
sudo apt-get install -y mongodb-org
# Start MongoDB
sudo systemctl start mongod
# Start MongoDB automatically on startup
sudo systemctl enable mongod
# Install pm2
sudo npm install -g pm2
# Start pm2 automatically on startup
sudo pm2 startup systemd
# Install nginx
sudo apt-get install -y nginx
# Enable UWF--allow SSH with firewall
sudo ufw allow OpenSSH
# Allow HTTP/HTTPS with firewall
sudo ufw allow 'Nginx Full'
# Enable firewall
sudo ufw --force enable

4. Set up your MERN application with nginx

BASH

sudo git clone https://github.com/EllisMin/mern-demo-production.git /opt/mern-demo

Tired of github authentication for pulling repository? Create ssh-keygen with cd ~/.ssh && ssh-keygen then keep pressing enter for prompts. Run cat id_rsa.pub to copy the key & paste into github repository --> Settings --> Deploy keys --> Add deploy key.
Use cd ~/ && git clone <Repo's SSH> to clone your project inside root folder. Don't include sudo keyword, and make sure to use SSH key (i.e. git@github.com:EllisMin/repo-name.git), not HTTPS.

Navigate into project folder and install npm packages

BASH

cd mern-demo && sudo npm i

If npm installation fails, you may have to set a flag. sudo npm i --unsafe-perm. Read more

Start the server with pm2

BASH

sudo pm2 start app.js

Why use pm2? While running the server with npm start works, the server may crash if there's an error or unexpected behavior occur to the server. pm2 allows to keep application alive forever by reloading Node.js application without downtime.

Tip: more commands for pm2

BASH

# You can use [filename] instead of all
sudo pm2 stop all    # Stops all process running with pm2
sudo pm2 restart all # Restart all process running
sudo pm2 delete all  # Remove all process from pm2 list
sudo pm2 logs        # Displays log messages
sudo pm2 status      # Shows status of running servers

Configuring nginx

Start off by removing the default setting for nginx

BASH

sudo rm /etc/nginx/sites-available/default

Then, create a new default for configuration

BASH

sudo vim /etc/nginx/sites-available/default
# OR
sudo nano /etc/nginx/sites-available/default

/etc/nginx/sites-available/default

NGINX

server {
  listen 80;
  server_name _;
  # Use below this if you need custom domain
  # server_name yourDomain.com www.yourDomain.com;

  location / {
    # Connect node api
    proxy_pass http://127.0.0.1:8080; # Use port number accordingly
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;

    # Setting maximum size of http request from client (OPTIONAL. Default is 1M if not set)
    # client_max_body_size 10M;
  }
}

To set up your custom domain, make sure to include server_name yourDomain.com www.yourDomain.com; instead of server_name _;

Making changes to this file requires restarting nginx. Restart it.

BASH

sudo systemctl restart nginx
# OR
sudo service nginx restart

Tip: more commands for nginx

BASH

sudo nginx -t                # check nginx syntax
sudo systemctl start nginx   # start nginx
sudo systemctl stop nginx    # stop nginx
sudo systemctl restart nginx # restart nginx
sudo systemctl status nginx  # view server status
sudo tail -30 /var/log/nginx/error.log # display error log for debugging

5. Set up your custom domain

To set up a custom domain, make sure that you've included your domains in nginx config file from the last step.

First, you need to create an Elastic IP address, static IPv4 address which is reachable from the internet. Although you already have IPv4 Public IP, this is subject to change as your instance gets rebooted unexpectedly, which will require you to keep changing A (Alias) record on your domain provider.

In general, using Elastic IP is free as long as it constantly gets used by an instance. In other words, there is no charge unless you reserve and do not use. So, make sure that you don't create a duplicate Elastic IP. Learn more.

Creating Elastic IP Address

On the left panel of EC2 dashboard, click Elastic IPs under NETWORK & SECURITY and click Allocate Elastic IP address

Click Allocate Click created IP address (i.e. 3.132.123.28). Then click Associate Elastic IP address

Select your Instance and hit Associate

Your Elastic IP is created and associated with your instance.

IMPORTANT: After this step, your `Public DNS(IPv4)` and `IPv4 Public IP` will reset to a new value. You must use the new public DNS to connect to your instance on ssh.

Add records to your domain provider

Grab new Public DNS and Elastic IP and navigate to your domain provider's website (i.e namecheap, GoDaddy, Bluehost, etc). On the DNS setting page, add two following records.

Changing records may take some time (typically a few minutes) depending on the domain registrar. Make sure that your website is accessible (both www and naked domain) before proceeding to the next step.

6. Set up your SSL certificate (HTTPS)

Install certbot

BASH

# Install certbot
cd ~ && sudo add-apt-repository ppa:certbot/certbot # Then press enter for prompt
sudo apt-get update && sudo apt-get install python-certbot-nginx # Then press Y

Run certbot after installation

BASH

sudo certbot --nginx -d yourDomain.com -d www.yourDomain.com

It'll prompt you with..

Enter your email
Press "A" to agree
Y/N whether to share your email
Press 2 to redirect traffic

Certbot will automatically insert codes inside nginx configuration file:

NGINX

server {
  server_name yourDomain.com www.yourDomain.com;

  location / {
    # Connect node api
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/yourDomain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/yourDomain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

  listen 80;
  server_name yourDomain.com www.yourDomain.com;
  return 404; # managed by Certbot
}

This is it! Save `default` and run `sudo systemctl restart nginx` to apply change

Create a scheduler to automatically renew your certificate

BASH

sudo select-editor # Choose your favorite editor
sudo crontab -e

Insert this & save

BASH

11 23 * * * /usr/bin/certbot renew --quiet

Your Ubuntu machine will run /usr/bin/certbot renew --quiet every day at 11:11PM for auto renewal of SSL certificate. Read this post to learn more about cron jobs.

Enabling maintenance mode for your app with Nginx

maintenance.html example

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>YOUR_PAGE | Maintenance</title>
    <style>
      body {
        background: #222;
      }
      .main-container-maintenance {
        position: absolute;
        top: 40%;
        left: 50%;
        font-family: Arial, Helvetica, sans-serif;
        color: #fada26;
        text-align: center;
        transform: translate(-50%, -40%);
      }
    </style>
  </head>
  <body>
    <div class="main-container-maintenance">
      <h1>Offline for maintenance</h1>
      <p>
        This website is undergoing maintenance right now (·_·)
      </p>
      <p>Please check back later!</p>
    </div>
  </body>
</html>

Turning On/Off

When the file exists, your app will only serve maintenance.html. Make sure to put it under directory, /opt/maintenance.html

To turn it on or off

BASH

# Turn ON
cd /opt && sudo mv maintenance-.html maintenance.html
# Turn OFF
cd /opt && sudo mv maintenance.html maintenance-.html

It may be convenient to create a shell script. For example, create sudo vim /opt/on-maintenance.sh that contains above command. Make it executable with sudo chmod +x on-maintenance.sh. Then run the script with sh /opt/on-maintenance.sh

nginx config

Modify nginx config to detect whether there exists /opt/maintenance.html.

BASH

sudo vim /etc/nginx/sites-available/default

NGINX

server {
  server_name yourDomain.com www.yourDomain.com;

  location / {
    if (-f /opt/maintenance.html) {
      return 503;
    }

    # Connect node api
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
  }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/yourDomain.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/yourDomain.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    # When /opt/maintenance.html is found
    error_page 503 @maintenance;
    location @maintenance {
      root /opt;
      rewrite ^(.*)$ /maintenance.html break;
    }
}

server {
    if ($host = www.yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    if ($host = yourDomain.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
  listen 80;
  server_name yourDomain.com www.yourDomain.com;
  return 404; # managed by Certbot
}

Extra: Make deployment easier with alias & shell script

Deploying MERN stack application to EC2 instance requires many steps, but future deployments of the websites can be less painful if you utilize alias on your terminal along with shell script on your EC2 instance.

When making changes to your app, you would need to go through the following steps:

Build your client
Commit & push changes to GitHub repository
Clone it into your EC2
Install packages
Restart pm2

You can alternatively pull it from repository and re-build on EC2 instance; however, I prefer building it on my own PC beforehand because it's faster.

First, create an alias on your terminal to take care of building your client and pushing changes to the repository.

You can read more about alias in this post

Example: Creating alias to build & push to repo

~/.bash_profile

BASH

# Make sure that you're script is defined to build React code i.e. "npm run build --prefix front-end"

function buildpush() {
  npm run build
  git add .
  git commit -a -m "[PRODUCTION]"
  git push
}

Now, running buildpush in your terminal takes care of the first two steps: Build your client, Commit & push changes to GitHub repository

Proceed to your EC2 instance and create the following shell script for the rest of the steps

BASH

sudo vim /opt/production.sh

/opt/production.sh

SHELL

# Remove this folder if exists
sudo rm -rf ~/production-prepare

# Make sure that you've created GitHub SSH authentication on EC2
# This clones into home directory because cloning directly into /opt/ folder requires
#  typing GitHub username & password
git clone git@github.com:GITHUB_USERNAME/REPO_NAME.git ~/production-prepare

sudo rm -rf /opt/production-prepare

sudo mv ~/production-prepare /opt/

cd /opt/production-prepare && sudo npm i

sudo pm2 stop all

# Replace previous application
cd /opt && sudo rm -rf mern-demo && sudo mv production-prepare mern-demo && sudo pm2 start mern-demo/app.js

After creating file, make it executable with sudo chmod +x <FILE_NAME>. Then run the script with sh <FILE_NAME>

More Notes

To check remaining space in storage of EC2 instance, run df -h

[RK]: Ramen Kid Tutorial

Sat, 14 Mar 2020 00:00:00 GMT

Go to contact page and click the word, LOVE to go to sign in page

Email:
ramenkid.m@gmail.com
Password:
(Ask me)

2. Announcement

Once signed in, on ADMIN PANEL, expand Change Announcement. When you want to use announcement, click the tick mark and set whatever message. When not using it, disable it to leave it unchecked, then hit save

May be useful to put things like..
Ex) Ramen Kid will be closing due to COVID-19!
Ex) Subscribe to our email list to get discount!

Try putting an announcement and save it to show how announcement bar looks like.

3. How many customers have visited website?

Located right below Changed Announcement

Visitor counts: shows how many unique customers have visited the website

Page Views: shows how many times each page was clicked

4. Change Your email/password

I blocked changing email address for now, but you can change the password to whatever you want

5. Edit header links

You can edit the menus. For example:

If you don't want to use about page, disable it by unchecking about then save
If you don't want customers to contact you through contact page, disable contact

IMPORTANT: If you disable contact though, you will have to log in by manually typing in ramenkid.com/signin because contact page will be gone

6. Subscribers

Click SUBSCRIBE first here:

Any customers can sign up with their name and email then it will be saved here:

By Clicking Send Emails, you can send out emails to all customers subscribed

7. Home page

Go to home page by clicking the logo:

Here, you can add / edit / delete images on your phone or on your computer. Change anything, however you'd like

8. HOURS & LOCATION

Here you can change address and phone number or hours and extra message

Currently Please be aware that last seating for dinner will be at 8:45PM is put. Remove it or change it to anything else if you'd like by clicking hours and extra message

Here you can add / edit / delete menu items

When adding menu:

menu name, category, price are required, and image and description are not required

Price does not have to be number so you can put something like -- when it's not applicable

[React + Node.js]: Deploy Your MERN Stack App on Heroku

Fri, 13 Mar 2020 00:00:00 GMT

This post is to show how to deploy your MERN Stack (MongoDB, Express.js, React, Node.js) applications on Heroku. Heroku is one of the cloud services where you can deploy, manage, and scale modern applications.

Prerequisite

If you don't have MERN Stack project available, here is how you can set up a basic MERN stack application with REST API.

- [React + Node.js]: Create your MERN Stack Application - Part 1: Backend

- [React + Node.js]: Create your MERN Stack Application - Part 2: Frontend

You can also choose to download the project. I'll be using this project to deploy on Heroku.

Creating your App on Heroku

Go on Heroku website to sign up/sign in. When you're signed in, create a new app with an app name

The app name you choose will later become have a default domain. i.e. https://mern-demo-prod.herokuapp.com

After creating app, install Heroku CLI from this link. After installation of CLI, move onto the next time. We'll come back to Heroku later.

Serve index.html

Current file structure

mern-demo
  ├── controllers
  |     ├── user.js
  ├── front-end
  |     ├── src
  |     |    ├── App.css
  |     |    ├── App.js
  |     |    ├── custom-button.jsx
  |     |    ├── user-add-form.jsx
  |     |    ├── user.jsx
  |     |    └── ...
  |     ├── .env.production
  |     ├── .env
  |     └── ...
  ├── models
  |     ├── user.js
  ├── routes
  |     ├── user.js
  ├── app.js
  ├── config.js
  └── ...

Before deploying your app to Heroku, your server needs to be able to serve the minified version of index.html that will later be created with npm run build inside mern-demo/front-end.

You need to serve index.html in mern-demo/front-end/build directory. Modify mern-demo/app.js accordingly.

mern-demo/app.js

const express = require("express")
const mongoose = require("mongoose")
const { MONGODB_URI } = require("./config")
const userRoutes = require("./routes/user")
const path = require("path") 

const app = express()
app.use(express.json())

// Serves mern-demo/front-end/build statically
app.use(express.static(path.join("front-end", "build"))) 

// Set CORS header
app.use((req, res, next) => {
  res.setHeader("Access-control-Allow-Origin", "*")
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE")
  res.setHeader("Access-Control-Allow-Headers", "Content-Type")
  next()
})

// Register Route
app.use(userRoutes)

app.use((req, res, next) => {
  res.sendFile(path.resolve(__dirname, "front-end", "build", "index.html")) 
}) 

// Error Handler
app.use((error, req, res, next) => {
  const status = error.statusCode || 500
  const message = error.message
  const data = error.data // Passing original error data
  res.status(status).json({ message: message, data: data })
})

// DB connection
mongoose
  .connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  })
  .then(result => {
    const port = process.env.PORT || 8080
    app.listen(port, () => {
      console.log(`Listening on port ${port}...`)
    })
  })
  .catch(err => {
    // Handle error
  })

Create Production Build

Now that mern-demo/front-end/build is being served.. but it is empty. Define another script to build front-end in mern-demo/package.json

JSON

"scripts": {
    "install-client": "npm i --prefix front-end",
    "start": "node app.js",
    "server": "nodemon app.js",
    "client": "npm start --prefix front-end",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "build-client": "npm run build --prefix front-end"
}

(Optional): if you want to prevent users from viewing your React source code via inspect, you can add an option to production build inside mern-demo/front-end/package.json. Change ~~"build": "react-scripts build"~~ to "build": "GENERATE_SOURCEMAP=false react-scripts build",

Define your fetch url in `.env.production`

Before running the build script, make sure to have fetch url updated to your app name on Heroku for production in mern-demo/front-end/.env.production. For example:

.env.production

TEXT

REACT_APP_FETCH_URL=https://mern-demo-prod.herokuapp.com

Make sure NOT to include / at the end because our code fetches with..
fetch(process.env.REACT_APP_FETCH_URL + "/user") which already contains /

When you're done, run the following command inside mern-demo directory

BASH

npm run build-client

Confirm that mern-demo/front-end/build contains the production build file

Whitelist IP on MongoDB

Whitelist IP on MongoDB defines which IP addresses can have access to your cluster. In other words, you can specify IP addresses that can fetch/add/delete users--you can think of it as an extra layer of security. Here I'll allow access from anywhere.

Back on Heroku

We're ready to push our project to Heroku. If you have your project stored in git repository, add heroku remote & push

BASH

heroku git:remote -a <YOUR_APP_NAME>
git push heroku master

Make sure to update your .gitignore to exclude any sensitive information

Otherwise, if you don't have your git repository set up, run the following inside mern-demo folder to create repository for Heroku

BASH

git init && heroku git:remote -a <YOUR_APP_NAME>

Make sure to have Heroku CLI installed

Finally, to push your project,

BASH

git add .
git commit -am "[INITIAL]: initial commit"
git push heroku master

Make sure to update your .gitignore to exclude any sensitive information

That's it! Your app will soon be able to available on https://<YOUR_APP_NAME>.herokuapp.com, as soon as build is complete on their end. You can view the building status on the Overview tab.

Post Build Script

Don't like running build script for your client code every time before deploying your app? There is an easier way by adding post build script in mern-demo/package.json

JSON

"scripts": {
    "install-client": "npm i --prefix front-end",
    "start": "node app.js",
    "server": "nodemon app.js",
    "client": "npm start --prefix front-end",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "build-client": "npm run build --prefix front-end",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm i --prefix front-end && npm run build --prefix front-end" 
  },

The added post-build script gets run on their server every time after you push your project to Heroku by git push heroku master. Therefore, you don't have to run npm run build on your own.

Caveat: If you have .env.production included in .git-ignore file, you would have to exclude it because Heroku needs to have access to the file to grab environment variables (for server side). If it's sensitive information, you shouldn't have it on the client side but to have it as config variable described below

Including environment variables

If you happen to have environment variable set up for your server side, you can add those variables by going to Settings tab and clicking Reveal Config Vars. Alternatively, you can view those variables by typing heroku config in command line interface.

More Notes

You can add your custom domain with Heroku at no cost; however, in order to configure SSL encryption with Heroku, you would need to purchase paid dyno. The default subdomain <YOUR_APP_NAME>.herokuapp.com already contains SSL encryption.

[React + Node.js]: Create your MERN Stack Application - Part 2: Frontend

Thu, 12 Mar 2020 00:00:01 GMT

Overview

This post is continuation of this post to create a MERN (MongoDB, Express.js, React, Node.js) Stack Application. Part 2 will focus on setting up the client side with React. If you haven't previously set up the MongoDB, Express.js, Node.js, please go through the Part 1 first.

Front-end Set Up (React)

Go to the root directory, mern-demo, and we'll develop our front-end code in a directory front-end. In the mern-demo root directory, install create-react-app.

BASH

npx create-react-app front-end

Current file structure

mern-demo
  ├── front-end 
  |     └── ...all client side codes 
  ├── controllers
  |     └── user.js
  ├── routes
  |     └── user.js
  ├── models
  |     └── user.js
  ├── app.js
  ├── config.js
  └── package.json

create-react-app creates .git-ignore file in front-end directory. If you plan to push anything on a repository, move .git-ignore out of front-end and place it under mern-demo, root directory. i.e. mv front-end/.git-ignore . By doing so, .git-ignore will be applied to the whole project.

package.json

Open back mern-demo/package.json to add more scripts--you do not need to modify mern-demo/front-end/package.json.

JSON

"scripts": {
    "start": "node app.js",
    "server": "nodemon app.js",
    "install-client": "npm i --prefix front-end", 
    "client": "npm start --prefix front-end", 
    "dev": "concurrently \"npm run server\" \"npm run client\"" 
},

npm run install-client will install npm packages inside mern-demo/front-end/package.json. This is equivalent to cd front-end && npm i
npm run client is equivalent to running cd front-end && npm start
npm run dev this command will now run both front and back end servers concurrently

.env & .env.production

mern-demo
  ├── front-end 
  |     ├── .env.production 
  |     ├── .env 
  |     └── ...
  └── ...

Create .env to contain environmental variables. If you're going to deploy your app later, create .env.production as well. Remember to add .env* inside .git-ignore if you're uploading your project somewhere.

front-end/.env

TEXT

REACT_APP_FETCH_URL=http://localhost:8080

front-end/.env.production

TEXT

REACT_APP_FETCH_URL=<YOUR_URL_ON_PRODUCTION>

React will use variables in .env on development, but on npm run build, it will grab variables from .env.production instead.
After you save the variable inside .env*, you need to restart the server for it to take effect

front-end/src/..

Inside front-end/src, we'll create a few components: CustomButton, User, UserAddForm. Then, tweak the default files App.js and App.css for styling.

mern-demo
  ├── front-end
  |     ├── src
  |     |    ├── App.css 
  |     |    ├── App.js 
  |     |    ├── custom-button.jsx 
  |     |    ├── user-add-form.jsx  
  |     |    ├── user.jsx 
  |     |    └── ...
  |     ├── .env.production
  |     ├── .env
  |     └── ...
  └── ...

user.jsx

JSX

import React from "react"
import CustomButton from "./custom-button"

const User = ({ id, name, age, occupation, attr, handleDelete, loading }) => {
  return (
    <li className={`${attr ? "attr" : ""} user`}>
      <span>{name}</span>
      <span>{age}</span>
      <span>{occupation}</span>
      {!attr && (
        <CustomButton remove onClick={() => handleDelete(id)} loading={loading}>
          X
        </CustomButton>
      )}
    </li>
  )
}

export default User

custom-button.jsx

JSX

import React from "react"
const CustomButton = ({ children, remove, loading, disabled, ...others }) => {
  return (
    <button
      className={`${remove ? "btn-delete" : ""} btn-custom`}
      disabled={disabled || loading}
      {...others}
    >
      {children}
    </button>
  )
}
export default CustomButton

user-add-form.jsx

JSX

import React, { useState } from "react"
import CustomButton from "./custom-button"

const FormInput = ({ ...otherProps }) => {
  return (
    <div className="group">
      <input
        className={"input-custom"}
        type="text"
        {...otherProps}
        onChange={e => otherProps.onChange(otherProps.id, e.target.value)}
      />
    </div>
  )
}

const USER_FORM = {
  name: "",
  age: "",
  occupation: "",
}

const UserAddForm = ({ loading, handleAdd }) => {
  const [userForm, setUserForm] = useState(USER_FORM)

  const handleChange = (input, value) => {
    const updatedForm = {
      ...userForm,
      [input]: value,
    }
    setUserForm(updatedForm)
  }

  const handleSubmit = e => {
    e.preventDefault()
    handleAdd(userForm)
    setUserForm(USER_FORM)
  }

  return (
    <form className="form-add-user" onSubmit={e => handleSubmit(e)}>
      <FormInput
        id="name"
        name="name"
        placeholder="name"
        value={userForm["name"]}
        onChange={handleChange}
      />
      <FormInput
        id="age"
        name="age"
        placeholder="age"
        value={userForm["age"]}
        onChange={handleChange}
      />
      <FormInput
        name="occupation"
        id="occupation"
        placeholder="occupation"
        value={userForm["occupation"]}
        onChange={handleChange}
      />
      <CustomButton loading={loading} type="submit">
        Add
      </CustomButton>
    </form>
  )
}

export default UserAddForm

App.js

JSX

import React, { useState, useEffect } from "react"
import User from "./user"
import UserAddForm from "./user-add-form"
import "./App.css"

const App = () => {
  const [addLoading, setAddLoading] = useState(false)
  const [deleteLoading, setDeleteLoading] = useState(false)
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetchUsers()
  }, [])

  const fetchUsers = async () => {
    try {
      const res = await fetch(process.env.REACT_APP_FETCH_URL + "/user", {
        method: "GET",
      })
      if (res.status !== 200) {
        throw new Error("Fetching user failed")
      }
      const resData = await res.json()
      setUsers(resData.users)
    } catch (err) {
      console.log(err)
    }
  }

  const handleAdd = async formData => {
    setAddLoading(true)
    try {
      const res = await fetch(process.env.REACT_APP_FETCH_URL + "/user", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: formData.name,
          age: formData.age,
          occupation: formData.occupation,
        }),
      })
      if (res.status !== 200 && res.status !== 201) {
        throw new Error("Adding user failed")
      }
      const resData = await res.json()
      const updatedUsers = [resData.user, ...users]
      setUsers(updatedUsers)
    } catch (err) {
      console.log(err)
    }
    setAddLoading(false)
  }

  const handleDelete = async userId => {
    setDeleteLoading(true)
    try {
      const res = await fetch(
        process.env.REACT_APP_FETCH_URL + "/user/" + userId,
        {
          method: "DELETE",
        }
      )
      if (res.status !== 200) {
        throw new Error("Deleting user failed")
      }
      await res.json()
      const updatedUsers = users.filter(user => user._id !== userId)
      setUsers(updatedUsers)
    } catch (err) {
      console.log(err) ///
    }
    setDeleteLoading(false)
  }

  return (
    <div className="App">
      <header>
        <h1>MERN Stack App Demo</h1>
        <hr />
      </header>
      <main>
        <h2>Add User:</h2>
        <UserAddForm loading={addLoading} handleAdd={handleAdd} />
        <hr />
        <h2>Users:</h2>
        <ul className="user-list">
          <User name={"Name"} age={"Age"} occupation={"Occupation"} attr />
          {users.length > 0 ? (
            <>
              {users.map(user => (
                <User
                  key={user._id}
                  id={user._id}
                  name={user.name}
                  age={user.age}
                  occupation={user.occupation}
                  handleDelete={handleDelete}
                  loading={deleteLoading}
                />
              ))}
            </>
          ) : null}
        </ul>
      </main>
    </div>
  )
}

export default App

App.css

CSS

.App {
  max-width: 468px;
  padding: 1rem;
  background: #eee;
  margin: auto;
  font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

.App .user-list {
  list-style: none;
  padding: 1rem 0 1rem 2rem;
  display: flex;
  flex-direction: column;
  background: #ddd;
  text-align: left;
}

/* User */
li.user {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 1rem;
  opacity: 0.1;
  animation: fadeOut 500ms forwards ease-in;
}

li.user:hover {
  background: #ccc;
}

li.attr {
  font-weight: bold;
  border-bottom: 1px solid #aaa;
}

li.attr:hover {
  background: none;
}

/* Form */
.form-add-user {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Input */
.input-custom {
  padding: 0.5rem;
  text-align: center;
  margin: 0.5rem 0.3rem;
}

/* Buttons */
.btn-custom {
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  background: #ffd700;
  border: 1px solid #d8b72f;
  color: #333;
  border-radius: 5px;
}
.btn-delete {
  position: absolute;
  left: -20px;
}
.btn-custom:hover {
  color: #ffd700;
  background: #333;
  border-color: transparent;
}
.btn-custom:disabled {
  cursor: not-allowed;
  background: #ccc;
  color: #888;
  border: #ccc;
  box-shadow: none;
}

.btn-custom:disabled:hover,
.btn-custom:disabled:active {
  background: #ccc;
  color: #888;
  border: #ccc;
}

@keyframes fadeOut {
  to {
    opacity: 1;
  }
}

[React + Node.js]: Create your MERN Stack Application - Part 1: Backend

Thu, 12 Mar 2020 00:00:00 GMT

Overview

Demo

This post will show you how to create a MERN (MongoDB, Express.js, React, Node.js) Stack Application from the scratch to the end. Part 1 will focus on the server side with REST API. Client side will be covered in the upcoming post, Part 2. This app will involve a basic CRUD (Create, Read, ~~Update~~, Delete) operations along with simple layout in React.

The full project is available on this repo.

MongoDB

Let's start off with setting the database cluster with MongoDB. If you haven't, go to MongoDB to sign up & sign in. Then, create a free, Starter Clusters with default settings.

Once your cluster is created, press CONNECT

Add your auto-filled IP address to whitelist and create a DB username & password

Choose a connection method as MongoDB Compass. Then follow the instructions to install MongoDB Compass on your system

Copy the string that will be used to connect to database in your back-end and in MongoDB Compass

Once installed, connect to MongoDB Compass

This is where you can visually see & manage data that we haven't created yet. Leave this behind for now and continue to the next step.

Node.js & Express

package.json

TEXTILE

mern-demo
  └── package.json

First, create a folder where you would like to contain your MERN stack application. Here, I'll create a folder mern-demo. Then, browse over to the created folder and create package.json with npm init -y command. Make sure that package.json was created and run the following commands to install required node packages.

BASH

npm i express mongoose concurrently

concurrently allows to run multiple commands concurrently. It'll be used to run back-end and front-end server at the same time

If you have not yet installed nodemon, install it as dev dependency.

BASH

npm i -D nodemon

nodemon continuously watches the changes in files so that you wouldn't have to restart the server every time you make changes. You can choose to install it globally with sudo npm i -g nodemon

With those packages installed, modify "scripts" in package.json to start developing.

DIFF

"scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "node app.js",
+    "server": "nodemon app.js",
},

config.js & app.js

TEXTILE

mern-demo
  ├── app.js 
  ├── config.js 
  └── package.json

Create config.js that will contain your MongoDB URI that you've copied

config.js

module.exports = {
  MONGODB_URI: `mongodb+srv://<DB_USERNAME>:<PASSWORD>@cluster0-xc4db.mongodb.net/test`,
}

Then create app.js. This is the main server that will listen to the request from the client side

app.js

const express = require("express")
const mongoose = require("mongoose")
const { MONGODB_URI } = require("./config")

const app = express()
app.use(express.json())

// Set CORS header
app.use((req, res, next) => {
  res.setHeader("Access-control-Allow-Origin", "*")
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE")
  // Allow client to set headers with Content-Type
  res.setHeader("Access-Control-Allow-Headers", "Content-Type")
  next()
})

// Error Handler
app.use((error, req, res, next) => {
  const status = error.statusCode || 500
  const message = error.message
  const data = error.data // Passing original error data
  res.status(status).json({ message: message, data: data })
})

// DB connection
mongoose
  .connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  })
  .then(result => {
    const port = process.env.PORT || 8080
    app.listen(port, () => {
      console.log(`Listening on port ${port}...`)
    })
  })
  .catch(err => {
    // Handle error
  })

At this point, when you run npm server, the server will start listening to port 8080

User Schema

TEXTILE

mern-demo
  ├── models 
  |     └── user.js 
  ├── app.js
  ├── config.js
  └── package.json

const mongoose = require("mongoose")
const Schema = mongoose.Schema

const userSchema = new Schema(
  {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: String,
      required: true,
    },
    occupation: {
      type: String,
      required: true,
      default: "unemployed",
    },
  },
  { timestamps: true }
)

module.exports = mongoose.model("User", userSchema)

Each user will have 3 properties: name, age, occupation

Router & Controller

TEXTILE

mern-demo
  ├── controllers 
  |     └── user.js 
  ├── routes 
  |     └── user.js 
  ├── models
  |     └── user.js
  ├── app.js
  ├── config.js
  └── package.json

routes/user.js

const express = require("express")
const userController = require("../controllers/user")
const router = express.Router()

// GET /user
router.get("/user", userController.getUsers)
// POST /user
router.post("/user", userController.postUser)
// DELETE /user/:userId
router.delete("/user/:userId", userController.deleteUser)
module.exports = router

Router here defines the 3 CRUD operations

controllers/user.js

const User = require("../models/user")

exports.getUsers = async (req, res, next) => {
  try {
    const users = await User.find().sort({ createdAt: -1 })
    res.status(200).json({
      message: "Fetched users",
      users: users,
    })
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500
    }
    next(err)
  }
}

exports.postUser = async (req, res, next) => {
  try {
    let occupation = req.body.occupation
    if (!occupation) occupation = "unemployed"
    const user = new User({
      name: req.body.name,
      age: req.body.age,
      occupation: occupation,
    })
    await user.save() // Save in db

    res.status(201).json({
      message: "User created",
      user: user,
    })
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500
    }
    next(err)
  }
}

exports.deleteUser = async (req, res, next) => {
  const userId = req.params.userId
  try {
    const user = await User.findById(userId)
    if (!user) {
      const error = new Error("Couldn't find the user")
      error.statusCode = 404
      throw error
    }
    await User.findByIdAndRemove(userId)
    res.status(200).json({ message: "User removed" })
  } catch (err) {
    if (!err.statusCode) {
      err.statusCode = 500
    }
    next(err)
  }
}

Register Created Route

app.js

const express = require("express")
const mongoose = require("mongoose")
const { MONGODB_URI } = require("./config")
const userRoutes = require("./routes/user") 

const app = express()
app.use(express.json())

// Set CORS header
app.use((req, res, next) => {
  res.setHeader("Access-control-Allow-Origin", "*")
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE")
  // Allow client to set headers with Content-Type
  res.setHeader("Access-Control-Allow-Headers", "Content-Type")
  next()
})

// Register Route
app.use(userRoutes)

// Error Handler
app.use((error, req, res, next) => {
  const status = error.statusCode || 500
  const message = error.message
  const data = error.data // Passing original error data
  res.status(status).json({ message: message, data: data })
})

// DB connection
mongoose
  .connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false,
  })
  .then(result => {
    const port = process.env.PORT || 8080
    app.listen(port, () => {
      console.log(`Listening on port ${port}...`)
    })
  })
  .catch(err => {
    // Handle error
  })

[Deploy]: Deploy your App on Netlify

Wed, 11 Mar 2020 00:00:00 GMT

Netlify

Netlify is useful when when it comes to deploying static websites. It is very easy to deploy from your github repository, supports custom domain, and free SSL certificate (https). Basic features of deploying website is offered at no cost, so this tutorial won't require you to purchase any add-on service. If interested, check out the pricing

Project in GitHub

Before deploying your website, you should have your project saved in your github repository either public or private.

If not sure how to please check out this post

Steps to Deploy on Netlify

Go to Netlify and sign up for your account, then sign in
Once you're signed in, click New site from Git

Then select GitHub
- It'd ask you for github's permission. Grant it

Click Configure the Netlify app on Github

This may open a new tab. Scroll down to Select repositories and select your repository & click Save

Select added repository

Specify build command & publish directory. Then click Deploy site

It may take a few minutes to be deployed and will be available at the following URL

Choosing different sub domain

When you click Domain settings then click Options under Custom domains, you can choose a different *.netlify.com at no cost.

Custom domain

If you already have your custom domain (non-*.netlify.com), you can continue with the following steps to link it with your deployed app on Netlify

[Git]: Save your Project in Github Repository

Tue, 10 Mar 2020 00:00:00 GMT

1. Go to GitHub website

2. Create Repository

After logging in, go to your profile on top-right corner
Navigate to Repository tab and click New
Name your repository & Create
Grab your remote address. Copy it

3. Push Project to Your Repository

If you are not familiar with bash commands, consider using GitHub Desktop instead. Here is how you can push to your repository using Github Desktop

Open Terminal and browse over to your project folder
- On Windows, you can use Git Bash

Type in the following commands

BASH

git add .
git commit -m "[INITIAL]: initial commit 🎇"
git remote add origin [YOUR_REMOTE_ADDRESS]
git push -u origin master

Tip) Lazy to type all the commands? Here is how you can set up shortcuts (alias)

That's it! Refresh your github repository to confirm

[Bash]: Resize multiple images on terminal

Sat, 28 Dec 2019 00:00:01 GMT

I ran into situation where I've had multiple screenshot images that were larger than necessary. Here is how you can conveniently resize multiple images that may take up less space on your PC storage with bash command.

Caveat

It may be a good practice to leave the original files in case they're needed in the future.

On terminal

TEXT

sips -Z 600 *.png

sips: image processing system
-Z: maintains the images' ratio
600: maximum width of the image that you'd like to convert to
*.png: selects all the files in the directory that has an extension of png

Another example

TEXT

sips -z [height] [width] *.png

It resizes the images to specified dimensions that can alter the aspect ratio of the image

Result

46 images (6.6MB) were converted to 4MB

[Node pkg]: Install sass with npm

Thu, 05 Dec 2019 00:00:01 GMT

Initialize npm in project directory

TEXT

npm init -y

-y flag skips the prompts

Install sass with npm

In the project directory,

TEXT

npm i node-sass

scripts in package.json

Modify scripts in package.json file

JSON

{
  // ...
  "scripts": {
    "sass": "node-sass -w scss/ -o src/css --recursive"
  }
}

Make sure to have scss files in scss folder under project root, and locate source files under src folder.

npm run

TEXT

npm run sass

This will create a compiled css file at ./src/css/main.css

+)

When using git, create .gitignore to ignore node_modules folder

[Git + cron]: Schedule your git commands with cron job

Thu, 21 Nov 2019 00:00:02 GMT

Note: cron has been deprecated in favor of launchd on macOS

launchd:

In computing, launchd, a unified operating system service management framework, starts, stops and manages daemons, applications, processes, and scripts in macOS. It was introduced with Mac OS X Tiger and is licensed under the Apache License — Wikipedia

More information about launchd is handled in this post

Using git commands with cron scheduler

Create a repo

If you haven't set up SSH key

Please follow this post to link your SSH key on your machine with your GitHub account before proceeding

Create a file that'll be pushed

BASH

vim READ.md

## This file will be pushed to github repo with cron

Then save

Create .sh script

newrepo.sh (Example)

BASH

git init
git add README.md
git commit -m "[INITIAL]: initial commit 🔥"
git remote add origin https://github.com/EllisMin/auto-pushed-contents.git
git push -u origin master

Save it then grant executable permission with chmod +x newrepo.sh

Check your computer's time

BASH

date

Schedule with cron

BASH

sudo crontab -e

sudo allows you to run script as root

BASH

10 9 21 03 * cd ~/Desktop && ./newrepo.sh
# Minute | Hour | Date | DayOfWeek | Script

The shell script will be run at 03/21 at 9:10AM

Outputting result into file

BASH

10 9 21 03 * cd ~/Desktop && ./newrepo.sh > /tmp/result 2>&1

Output result in /tmp/result
2&>1 indicates that standard error is redirected to /tmp/result

View list of active crontab jobs

BASH

sudo crontab -l

Ran into trouble? (macOS)

If somehow doesn't work, try giving Full Disk Access to /usr/sbin/cron and /usr/bin/crontab on System Preference > Security & Privacy > Privacy > Full Disk Access. Press command + shift + G to open go to folder to type in manual directory.

More Examples

BASH

11 13 * * 1-5 /some/dir/script.sh

Execute every business day at 1:11PM

BASH

*/10 * * * * /some/dir/script.sh

Execute every 10 minutes

Schedule your mac to wake up

cron doesn't execute while your computer is asleep, but you can schedule your computer to awake a minute before scheduled cron job.

For macOS: Preference >> Energy Saver >> Schedule

Check logs

On linux, cron job gets logged at

TEXT

/var/log/system.log

Use the following to filter cron jobs

TEXT

grep CRON /var/log/system.log

[React]: Redux Basics

Fri, 08 Nov 2019 00:00:02 GMT

Redux

As apps get bigger, states of the app will become more complex and difficult to understand the flow of data.

Redux is a React library which allows react state to be more scalable.

Why Redux?

Helps with state management
Efficient for sharing data between components
Predictable statement management with 3 principles
- Single source of truth
- State is read only (immutability)
- Changes made by pure functions

Instead of each component holding a different state, Redux allows to have one huge object(state) that describes the entire app and can be passed down to whichever component that needs it.

Redux Flow

Action
- What user does
Root Reducer (App state)
- Pure function that receives action. Returns updated state(store)
Store
- Describes what app should look like
DOM changes

+) Middleware receives action object before reaching root reducer, do something with it, then, pass it onto root reducer.

Flux Pattern vs MVC

Flux Pattern

Redux uses a flux pattern that's also unidirectional data flow.

MVC

On the other hand, MVC model uses

When user makes an action, based on what controller says, we update the model(state), then it updates the view.

The controller changes different models, and each model can change different views which may trigger other models to change--the relationship would be very difficult to understand in larger apps.

What reducer looks like

Reducer is a pure function that represents all of the states of our application.

JSX

// Initial state of reducer just like this.state in constructor
const INITIAL_STATE {
    currentUser: null
};
// If state is undefined, set it to INITIAL_STATE (ES6 feature)
const userReducer = (state = INITIAL_STATE, action) = > {
    switch (action.type) {
        case 'SET_CURRENT_USER':
            return {
                // return new obj to allow re-render
                ...state,
                currentUser: action.payload
                // return state.currentUser = action.payload;
                // ^ the same obj so it won't re-render
            };
        default:
            return state; // If action doesn't match
    }
};
export default userReducer;

Note: if/else statements are also okay

Installing Redux Libraries

TEXT

$ npm i redux redux-logger react-redux

In index.js

// ...
import { Provider } from "react-redux"
// ...
ReactDOM.render(
  <Provider>
    <BrowserRouter>
      <App />>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
)

Wrap around the entire app since we want to have access to store object from anywhere.

How root reducer looks like

import { combineReducers } from "redux"
import userReducer from "./user.reducer"

// All full redux object is one big json object
export default combineReducers({
  user: userReducer,
})

What store looks like

import { createStore, applyMiddleware } from "redux"
import logger from "redux-logger"
import rootReducer from "./root-reducer"

const middlewares = [logger]
const store = createStore(rootReducer, applyMiddleware(...middlewares))

export default store

Back in index.js

// ...
import { Provider } from "react-redux"
import store from "./redux/store"
// ...
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
)

import & pass into provider

Create actions

export const setCurrentUser = user => ({
  type: "SET_CURRENT_USER",
  payload: user,
})

In header component

JSX

// ...
import { connect } from "react-redux"

// state is root reducer
const mapStateToProps = state => ({
  curUser: state.user.curUser,
})
export default connect(mapStateToProps)(Header)

Updating Reducer value in App.js

JSX

import { connect } from "react-redux";
import { setCurrentUser } from "/user.actions/";
// ...
class App extends React.Component {
  unsubscribeFromAuth = null;

  componentDidMount() {
    const { setCurrentUser } = this.props;
    this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
      // set state from data in db
      if (userAuth) {
        const userRef = await createUserProfileDocument(userAuth);
        userRef.onSnapshot(snapShot => {
          setCurrentUser({
            id: snapShot.id,
            ...snapShot.data()
          });
        });
      } else {
        setCurrentUser(userAuth); // setting it to null on logging out
      }
    });
  }
  // ...
  render() {
    return (
      <div>
        <Header />
        { // ... }
      </div>
    );
  }
}
const mapDispatchToProps = dispatch => ({
  setCurrentUser: user => dispatch(setCurrentUser(user))
});
export default connect(
  null,
  mapDispatchToProps
)(App);

Header is no longer dependent on App.js, but App updates user reducer values so header can get the latest user property.

Now you can see the log on the console

Redirecting

JSX

import { Switch, Route, Redirect } from "react-router-dom"

// ...
class App extends React.Component {
  render() {
    return (
      <div>
        <Route
          exact
          path="/signin"
          render={() =>
            this.props.currentUser ? (
              <Redirect to="/" />
            ) : (
              <SignInAndSignUpPage />
            )
          }
        />
      </div>
    )
  }
}
const mapStateToProps = ({ user }) => ({
  currentUser: user.currentUser,
})

const mapDispatchToProps = dispatch => ({
  setCurrentUser: user => dispatch(setCurrentUser(user)),
})
export default connect(mapStateToProps, mapDispatchToProps)(App)

[React]: Firebase with React

Fri, 08 Nov 2019 00:00:01 GMT

Intro

For our web pages, Firebase provides us with

Authentication
Database
Server
...

This post will mostly focus on authentication and database by creating sign in and sign up functionalities with React.

1. Set Up Firebase Project

On this page, create a project with Firebase.

Optional to import Google Analytics

Then, go to Project Overview and click </> for web application.

After, register app with any name and copy the selected code snippet

2. Set up JS for Firebase

First, install firebase library into your React project

TEXT

$ npm i firebase

Create a js file (filebas.js) & import required libraries for db and authentication

import firebase from "firebase/app"
import "firebase/firestore"
import "firebase/auth"

Paste in CDN snippet & initialize

const config = {
  apiKey: "AIzaSyBZskQAZgTjfvrhsXG7uLF4catPcYpyc9s",
  authDomain: "somedb-db.firebaseapp.com",
  databaseURL: "https://somedb-db.firebaseio.com",
  projectId: "somedb-db",
  storageBucket: "somedb-db.appspot.com",
  messagingSenderId: "69107290236",
  appId: "1:69107290236:web:9304b6b56e070e419279f9",
}
firebase.initializeApp(config)

Export functionalities to use it elsewhere

const provide = new firebase.auth.GoogleAuthProvide()
provider.setCustomParameters({ prompt: "select_account" })

export const signInWithGoogle = () => auth.signInWithPopup(provider)
export const auth = firebase.auth()
export const firestore = firebase.firestore()
export default firebase

On Firebase console, go to "Authentication" and click "Set up sign-in method"

Then, enable sign-in methods for Google and for Email/Password.

Note: Enabling "Email link" will require user to verify their email address.

Let's create sign in with Google function before we implement our own sign up and sign in.

Import

JSX

import { signInWithGoogle } from "/firebase/firebase.js"

Create button for pop up

JSX

<button onClick={signInWithGoogle}> Sign in with Google </button>

At this point, the page is aware that there is an user authentication (We still need to store auth data to our db in later step).

5. Add sign out functionality

In App.js

JSX

//...
import { auth } from "/firebase/firebase.js"

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      curUser: null,
    }
  }

  undoAuth = null
  componentDidMount() {
    this.undoAuth = auth.onAuthStateChanged(user => {
      this.setState({ curUser: user })
      // console.log(user);///
    })
  }
  // Handle Auth changes
  componentWillUnmount() {
    this.undoAuth()
  }
  render() {
    return (
      // ...
      <Header curUser={this.state.curUser} />
    )
  }
}

In Header.jsx

JSX

import React from "react"
import { Link } from "react-router-dom"
import { auth } from "../../firebase/firebase.utils"

const Header = ({ curUser }) => (
  <div className="header">
    <div className="header-items">
      {curUser ? (
        //   When logged in, display sign out
        <div className="item" onClick={() => auth.signOut()}>
          SIGN OUT
        </div>
      ) : (
        //   When user need to log in
        <Link className="item" to="/signin">
          SIGN IN
        </Link>
      )}
    </div>
  </div>
)
export default Header

6. Store user authentication into db

We still need to store user authentication into our database (Firestore).

Create Firestore(db) in Firebase

On Firebase console, go to "Cloud Firestore" or "Database". Then, create database in test mode

Side note: Getting user reference

import firebase from "firebase/app"
import "firebase/firestore"

const firestore = firebase.firestore()

// Examples of retrieving collections or docs
firestore
  .collection("users")
  .doc("SAh79TtKh7PBjp4kFglWb8yysXl1")
  .collection("someItems")
  .doc("Qo0eUBTNla84Zh1BDs78")
// is equivalent to..
firestore.doc(
  "users/SAh79TtKh7PBjp4kFglWb8yysXl1/someItems/Qo0eUBTNla84Zh1BDs78"
)
// Getting collection
firestore.collection("users/SAh79TtKh7PBjp4kFglWb8yysXl1/someItems/")

In firebase.js, create async API request to store data into db

export const createUserData = async (userAuth, moreData) => {
  // When there is no authentication
  if (!userAuth) return

  // Get snap shot of user reference from the particular user in users collection
  const ref = firestore.doc(`users/${userAuth.uid}`)
  const snapShot = await ref.get()

  // If the snap shot info is not in db, create one
  if (!snapShot.exists) {
    const { displayName, email } = userAuth
    const createdAt = new Date()
    // store into database
    try {
      await ref.set({
        displayName,
        email,
        createdAt,
        ...moreData,
      })
    } catch (e) {
      console.log("Error creating user", e.message)
    }
  }
  // Return user reference
  return ref
}

Call the implemented function in componentDidMount in App.js

JSX

import { auth, createUserData } from "/firebase/firebase.js"
// ...
class App extends React.Component {
  // ...
  componentDidMount() {
    this.undoAuth = auth.onAuthStateChanged(user => {
      createUserData(user)
    })
  }
}

Above function stores the user data in to database. Next step now is to store the data as state of our app.

7. Store data from db as state

Make the following changes in App.js to store data from db as state.

JSX

class App extends React.Component {
  componentDidMount() {
    this.undoAuth = auth.onAuthStateChanged(async userAuth => {
      if (userAuth) {
        // Use ref to retrieve data by onSnapshot method
        const ref = await createUserData(userAuth)

        // Grab data in db
        ref.onSnapshot(snapShot => {
          this.setState(
            {
              curUser: {
                id: snap.id,
                ...snapShot.data(),
              },
            }
            //, () => {
            //   console.log(this.state); /// debug
            // }
          )
        })
      }
      // On sign out, change curUser to null
      else {
        this.setState({ curUser: userAuth })
      }
    })
  }
}

JSX

import React from "react"
import { auth, createUserData } from "/firebase/firebase.js"

class SignUp extends React.Component {
  constructor() {
    super()
    this.state = {
      displayName: "",
      email: "",
      password: "",
      passwordConfirm: "",
    }
  }
  handleSubmit = async event => {
    event.preventDefault()
    const { displayName, email, password, passwordConfirm } = this.state
    if (password !== passwordConfirm) {
      alert("passwords don't match")
      return
    }
    // authenticate & create user data
    try {
      const { user } = await auth.createUserWithEmailAndPassword(
        email,
        password
      )
      await createUserData(user, { displayName })
      // Action after form submission (clear form)
      this.setState({
        displayName: "",
        email: "",
        password: "",
        passwordConfirm: "",
      })
    } catch (error) {
      console.error(error) ///
    }
  }
  handleChange = event => {
    const { name, value } = event.target
    this.setState({ [name]: value })
  }

  render() {
    const { displayName, email, password, passwordConfirm } = this.state
    return (
      <div className="sign-up">
        <h2 className="title">Sign up</h2>
        <span>Sign up with your email and password</span>
        <form className="sign-up-form" onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="displayName"
            value={displayName}
            onChange={this.handleChange}
            label="Display Name"
            required
          />
          <input
            type="email"
            name="email"
            value={email}
            onChange={this.handleChange}
            label="Email"
            required
          />
          <input
            type="password"
            name="password"
            value={password}
            onChange={this.handleChange}
            label="Password"
            required
          />
          <input
            type="password"
            name="passwordConfirm"
            value={passwordConfirm}
            onChange={this.handleChange}
            label="Confirm Password"
            required
          />
          <button type="submit">SIGN UP</button>
        </form>
      </div>
    )
  }
}
export default SignUp

JSX

import React from "react"
import { auth, signInWithGoogle } from "../../firebase/firebase.utils"

class SignIn extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      email: "",
      password: "",
    }
  }
  handleSubmit = async event => {
    event.preventDefault()
    const { email, password } = this.state
    try {
      await auth.signInWithEmailAndPassword(email, password)
      // After logging in
      this.setState({ email: "", password: "" })
    } catch (e) {
      alert(e) ///
    }
  }
  handleChange = event => {
    const { value, name } = event.target
    this.setState({ [name]: value })
  }
  render() {
    return (
      <div className="sign-in">
        <h2>Login</h2>
        <span>Sign in with your email and password</span>
        <form onSubmit={this.handleSubmit}>
          <input
            name="email"
            type="email"
            handleChange={this.handleChange}
            value={this.state.email}
            label="email"
            required
          />
          <input
            name="password"
            type="password"
            handleChange={this.handleChange}
            value={this.state.password}
            label="password"
            required
          />
          <div className="buttons">
            <button type="submit"> Sign in </button>
            <button onClick={signInWithGoogle}>Sign in with Google</button>
          </div>
        </form>
      </div>
    )
  }
}
export default SignIn

[Git]: Commonly used git commands

Thu, 07 Nov 2019 00:00:01 GMT

Basic git commands

add

TEXT

git add ${file name}

add all modified files

TEXT

git add .

commit with commit message

TEXT

git commit -m "${commit message}"

add all modified files & commit

TEXT

git commit -am "${commit message}"

add remote repository

TEXT

git remote add ${github remote repo address}

push on a branch

TEXT

git push origin ${branch name}

create a branch

TEXT

git checkout -b ${branch name}

move to different branch

TEXT

git checkout ${branch name}

change name of branch

TEXT

git branch -M ${new branch name}

display state of working directory

TEXT

git status

see differences with last commit

TEXT

git diff

display commits made in the repo

TEXT

git log

show commit log in a graph

TEXT

git log --graph

More commands

revert a modified file

TEXT

git checkout -- ${filename}

change the most recent commit message

TEXT

git commit --amend

When changing the most recent commit message that's already pushed, use the following

TEXT

git push --force-with-lease ${repository} ${branch}

${repository} and ${branch} are optional

change old commit message

TEXT

git rebase -i HEAD~${#commits to go back}

For example, HEAD~2 is the second last commit. It will display a list of the last 2 commit messages; bottom displays the most recent commit

TEXT

pick 86fbdbe modified post # 2nd MOST RECENT COMMIT
pick f4683d1 modified post # MOST RECENT COMMIT
# ...

Replace pick with reword then save & quit

TEXT

reword 86fbdbe modified post
pick f4683d1 modified post

It will open up the editor to change the specified commit with "reword". Modify the message then save&quit. Push with the following

TEXT

git push --force-with-lease ${repository} ${branch}

revert the most recent commit

TEXT

git revert HEAD
OR
git reset HEAD^

add remote repo as upstream on local repo

TEXT

git remote add --track master upstream ${github repo remote address}

update master branch to the latest version of upstream

TEXT

git pull --ff upstream master

combine multiple commits

TEXT

git rebase -i HEAD~${number of commits}

display git history

TEXT

git reflog

add the modified file to the most recent commit

TEXT

git commit -C HEAD --amend

ignore the modified file from the stage

TEXT

git update-index --assume-unchanged ${file name}

staging area is a step before the commit process.

revert ignoring the modified file from the stage

TEXT

git update-index --no-assume-unchanged ${file name}

stash the changes in dirty working directory away

TEXT

git stash

i.e. record the current state of working directory without local modification on current branch

remove a single stashed state and apply it on the current working state

TEXT

git pop

pick particular commit and merge it from other branch

TEXT

git cherry-pick ${commit hash number}

remove upstream

TEXT

git branch --unset-upstream

[React]: Router with React Router DOM

Wed, 06 Nov 2019 00:00:01 GMT

More information on React Router DOM can be found here.

1. Install React Router DOM

BASH

npm i react-router-dom

2. Add Browser Router in index.js

JSX

// ...
import { BrowserRouter } from "react-router-dom"

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
)

Import Browser Router component and wrap it around the App component.

3. Create Route in App.js

Import Route

JSX

import { Route } from "react-router-dom"

Create another page

JSX

const MainPage = () => (
  <div>
    <h1>MAIN PAGE</h1>
  </div>
)
const SecondPage = () => (
  <div>
    <h1>SECOND PAGE</h1>
  </div>
)

Create route

JSX

function App() {
  return (
    <div>
      <Route exact path="/" component={MainPage} />
      <Route exact path="page2" component={SecondPage} />>
    </div>
  )
}

Note: If you don't put exact, it will be rendered in different pages as well which includes the same path.

For example, if you would like to include a navigation bar in all the pages exclude exact tag.

4. Using Switch

Using Switch component prevents from rendering other pages.

import Switch Component

JSX

import { Switch, Route } from "react-router-dom"

Usage

JSX

function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={MainPage} />
        <Route path="/page2" component={SecondPage} />
      </Switch>
    </div>
  )
}

When a Route is found inside Switch tag, it won't render anything else.

For example, when we have

JSX

<Switch>
  <Route path="/" component={MainPage} />
  <Route path="/page2" component={SecondPage} />
</Switch>

Then, we go to /page2, it will only show MainPage since MainPage will be rendered and it doesn't render others.

Creating Dynamic routing

Nested routes

Creating nested routes is possible with the following.

First, create more sub page

JSX

const SubPage = () => {
  return (
    <div>
      <h1>SUB PAGE</h1>
    </div>
  )
}

JSX

function App() {
  return (
    <div>
      <Route exact path="/" component={MainPage} />
      <Route exact path="/page2" component={SecondPage} />
      <Route path="/page2:pageId" component={SubPage} />
    </div>
  )
}

:pageId is a URL parameter. It shows the pages that match dynamically. For example, it will show the SubPage for any url: /page2/*

props components

props has different components:

props.match
props.history
props.location

We can show which url that's visited with

const SubPage = props => {
  return (
    <div>
      <h1>SUB PAGE: {props.match.params.pageId}</h1>
    </div>
  )
}

For example, when we visit

TEXT

localhost:3000/page2/asdfasdf

It will show on page:

TEXT

SUB PAGE: asdfasdf

This allows the sub page to populate itself. This may be useful to retrieve data from back end.

Link Component

JSX

import { Route, Link } from "react-router-dom"

JSX

const SecondPage = props => (
  <div>
    <Link to="/page2/100">To Sub Page 100</Link>
    <h1>SECOND PAGE</h1>
  </div>
)

Note: React is SPA. This does not redirect and rebuild the entire application, but rather, it determines which part of the DOM to use.

This would be similar to using:

JSX

<button onClick={() => props.history.push("/asdf")}>Click</button>

By using a props component it'd be more efficient to use it as:

JSX

const SecondPage = props => (
  <div>
    <Link to={`${props.match.url}/100`}>TO SUB PAGE 100</Link>
    <Link to={`${props.match.url}/222`}>TO SUB PAGE 222</Link>
    <Link to={`${props.match.url}/7`}>TO SUB PAGE 7</Link>
    <h1>SECOND PAGE</h1>
  </div>
)

This is useful when you want to re-use sub page that isn't from page2.

For example:

JSX

function App() {
  return (
    <div>
      <Route exact path="/" component={MainPage} />
      <Route exact path="/page2" component={SecondPage} />
      <Route path="/page2:pageId" component={SubPage} />

      <Route exact path="/asd/asd" component={SecondPage} />
      <Route path="/asd/asd/:pageId" component={SubPage} />
    </div>
  )
}

SecondPage and SubPage components can be re-used in different links in /asd/asd.

withRouter

As we've imported React Route in our app class, in order for sub-component to use it, it would have to pass down props.history. However, there may be situation where you have to pass down the props.history multiple times--this inefficiency is called prop tunneling/drilling.

To prevent this, in the children that needs props.history, use the component withRouter.

Usage

JSX

import { withRouter } from "react-router-dom"
// ...
export default withRouter(ChildComponent)

withRouter is a higher order component, function that takes any component as argument and returns a modified component.

i.e. the child component gets access to props.history

In the child component, access with

JSX

<div
    className=''
    onClick={() => history.push(...)}
  >

[React]: Lifecycle Methods in React

Tue, 05 Nov 2019 00:00:02 GMT

Lifecycle Method

Lifecycle methods are series of events happening from the birth of React component to its end.

You can think of it as three states:

Mounting (Birth of component)
Update (Growth of component)
Unmount (Death of component)

Lifecycle diagram available from here.

Mounting

Mounting phase is when component is put on DOM for the first time. It starts before when our component is in our DOM.

It looks at the life cycle component then calls:

constructor()
render()
componentDidMount()

render()

Most used lifecycle method
Renders JSX component to the UI
Happens during mounting and updating phases
render() has to return the same output when same inputs are passed
- i.e. don't put setState() in render(). You shouldn't change the state in render().

componentDidMount()

Gets called right after component is mounted
Good place to start API calls to load the data
Allows setState() which update state and render(), but it happens before browser updates the UI, so that viewer can't see undesired UI updates.
Ensure that states are assigned in the constructor()
Use of setState() in here is to allow special cases: tooltips, modals, etc

Updating

componentDidUpdate()

Invoked right after update happens. This updates DOM based on state/prop change.

setState() is allowed but pass in prevProps to prevent infinite loop.

JSX

componentDidUpdate(prevProps) {
    if (this.props.data !== prev.Props.data)
    this.fetchData(this.props.data);
}

This ensures not to make API call when there props did not change.

shouldComponentUpdate()

Called when you want React not to re-render for particular state/prop changes.

Should only be used for optimizing performance.

When returns false, it discontinues the lifecycle methods.

Unmounting

componentWillUnmount()

Called right before component gets destroyed. This is a good place to do clean ups to prevent memory leak.

You can't modify state here.

[React]: setState (Asynchronous)

Tue, 05 Nov 2019 00:00:01 GMT

Previously on setState()

In [React]: Basics, we've seen that setState() is a asynchronous function which does not happen immediately, but rather, happens in the future. Consider below situation where a button updates a value of state.

JSX

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            someVal: 33
        };
    }
}

render() {
    return (
        <div className="App">
        <p>{this.state.someVal}</p>
        <button onClick={this.handleClick}>Update state</button>
      </div>
    );
}

JSX

handleClick = () => {
  this.setState({ someVal: this.state.someVal + 1 })
  console.log(this.state.someVal)
}

Since setState() is asynchronous, the value doesn't get updated immediately on the console.

When using setState(), we give control to React library which figures out how to optimally update the state--React batches work into single update.

We've previously got around this by using a callback:

JSX

handleClick = () => {
  this.setState({ someVal: this.state.someVal + 1 }, () =>
    console.log(this.state.someVal)
  )
}

However, this is a bad practice. Having multiple setState(), won't guarantee that the new state variable is the latest version.

Rule of thumb is not to use this.state inside setState(), but instead, create a function.

What you should do

JSX

handleClick = () => {
  this.setState(
    (prevState, prevProps) => {
      return { someVal: prevState.someVal + 1 }
    },
    () => console.log(this.state.someVal)
  )
}

This uses a function instead of an object, and using a parameter prevState will give the latest value for update.

When you somehow need to manipulate state after the update, add into second parameter where the callback function is.

How about prevProps?

Here is how to pass down props onto App in index.js

JSX

ReactDOM.render(<App increment={1} />, document.getElementById("root"))

Then, use call it with

JSX

handleClick = () => {
  this.setState(
    (prevState, prevProps) => {
      return { someVal: prevState.someVal + prevProps.increment }
    },
    () => console.log(this.state.someVal)
  )
}

Using props in constructor

You can also pass in props into constructor

JSX

constructor(props){
    super(props)
    this.state = {
        someVal: 33
    };
}

Allows to use props in constructor like

JSX

constructor(props){
    super(props)
    this.state = {
        someVal: 33 + this.props.increment
    };
}

By doing so, someVal will originally hold 35.

Alternate Class Syntax

Create React App allows Alternate Class Syntax which isn't allowed in the current JavaScript.

Example: Remove the constructor and just have state variable.

JSX

class App extends React.Component {
  state = {
    someVal: 33,
  }
}

This initialize state as class field declaration.

[React]: Visualize changes in DOM & VirtualDOM

Fri, 01 Nov 2019 00:00:01 GMT

As previously discussed, as state changes in React, it re-renders a particular component, not the whole thing.

To visualize the changes of components, follow the steps below:

Modify app.js

JSX

class App extends Component {
  // ...
  constructor() {
    // ...
    this.state = {
      // ...
      title: "",
    }
  }
  handleChange = e => {
    this.setState({ searchBox: e.target.value, title: e.target.value })
  }

  render() {
    const { users, title } = this.state
    return (
      <div className="App">
        {/* ... */}
        <h1>{title}</h1>
        <CardList users={users} />
      </div>
    )
  }
}

Enable Paint flashing

In debugging tool under Rendering, enable Paint flashing. This allow us to observe changes that flash green.

Now, when as we type in the text box, we see that only part of a component changes instead of changes in whole DOM.

Updating npm packages

Thu, 31 Oct 2019 00:00:02 GMT

Check the version of packages

BASH

$ npm list react react-dom react-scripts
├── react@16.10.2
├── react-dom@16.10.2
└── react-scripts@3.2.0

Update

Inside package.json

JSON

{
  "dependencies": {
    "gh-pages": "2.0.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
  // ...
}

Adding a ^ sign in front of version allows npm to update to latest stable version. When trying to npm install without ^ sign, it will install the exact version.

BASH

$ npm update

Update packages to latest version, even without ^ sign.
Sometimes update might fail because of versions noted in lock file.
There may be vulnerabilities regarding security issues in the message.

BASH

npm audit fix

Updates to version that doesn't have security concerns.

[React]: Without Create React App

Thu, 31 Oct 2019 00:00:01 GMT

Below is vanilla JavaScript that shows how React works without using Create React App

index.html

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie-edge" />
    <title>Some Document</title>
  </head>
  <body>
    <div id="root">React not rendered</div>
    <!-- import react libraries -->
    <script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    <script>
      const Person = props => {
        return React.createElement("div", {}, [
          React.createElement("h1", {}, props.name),
          React.createElement("p", {}, props.occupation),
        ])
      }

      const App = () => {
        return React.createElement("div", {}, [
          React.createElement("h1", {}, "React is rendered!!"),
          React.createElement(Person, { name: "Ellis", occupation: "cook" }),
          React.createElement(Person, { name: "Jon", occupation: "singer" }),
          React.createElement(Person, {
            name: "Alex",
            occupation: "developer",
          }),
        ])
      }

      //   ReactDOM.render(<App />, document.getElementById('root'));
      ReactDOM.render(React.createElement(App), document.getElementById("root"))
    </script>
  </body>
</html>

JSX{2-6,

const App = () => {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  )
}

// Behind the scene, above code is equivalent to the following

const App = () => {
  return React.createElement(
    "div",
    { className: "App" },
    React.createElement("h1", {}, "hello")
  )
}

Codepen Example

See the Pen React w/o create-react-app by Ellis Min (@dbmin) on CodePen.

[React]: Handling Events

Fri, 04 Oct 2019 00:00:01 GMT

Handling events in functional component (w/ hooks)

JSX

const Person = ({ name, age }) => {
  return <p>{`Name: ${name}`}</p>
}

const App = () => {
  const [persons, setPersons] = React.useState([{ name: "A" }, { name: "B" }])

  const changeNames = () => {
    setPersons([{ name: "C" }, { name: "D" }])
  }

  return (
    <div>
      {persons.map(person => {
        return <Person name={person.name} age={person.age} />
      })}
      <button onClick={changeNames}>Click</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

Use bind() when passing an argument

JSX

const Person = ({ name, age }) => {
  return <p>{`Name: ${name}`}</p>
}

const App = () => {
  const [persons, setPersons] = React.useState([{ name: "A" }, { name: "B" }])

  const changeNames = newName => {
    setPersons([{ name: newName }, { name: newName }])
  }

  return (
    <div>
      {persons.map(person => {
        return <Person name={person.name} age={person.age} />
      })}
      <button onClick={changeNames.bind(this, "Z")}>Click</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

Handling events in class component

App.js

JSX

const Person = ({ name }) => {
  return <p>{`Name: ${name}`}</p>
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      persons: [{ name: "A" }, { name: "B" }],
    }
    // bind(this) is necessary to make `this` work in the callback
    this.handleChangeNames = this.handleChangeNames.bind(this)
  }

  handleChangeNames(e) {
    
    e.preventDefault() 
    this.setState({ persons: [{ name: "C" }, { name: "D" }] }) 
  } 

  render() {
    return (
      <div>
        {this.state.persons.map(person => {
          return <Person name={person.name} age={person.age} />
        })}
        <button onClick={this.handleChangeNames}>Click</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"))

e is a synthetic event which is passed in as argument. e.preventDefault() stops the default action of a selected element

Using arrow function(ES6) without bind()

App.js

JSX

const Person = ({ name }) => {
  return <p>{`Name: ${name}`}</p>
}

class App extends React.Component {
  state = {
    persons: [{ name: "A" }, { name: "B" }],
  }

  // Ensures `this` is bound within handleChangeNames
  handleChangeNames = e => {
    e.preventDefault()
    this.setState({ persons: [{ name: "C" }, { name: "D" }] })
  } 

  render() {
    return (
      <div>
        {this.state.persons.map(person => {
          return <Person name={person.name} age={person.age} />
        })}
        <button onClick={this.handleChangeNames}>Click</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"))

Passing arguments

When passing arguments, you'd still have to bind the function. i.e.

JSX

const Person = ({ name }) => {
  return <p>{`Name: ${name}`}</p>
}

class App extends React.Component {
  state = {
    persons: [{ name: "A" }, { name: "B" }],
  }

  handleChangeNames = newName => {
    this.setState({ persons: [{ name: newName }, { name: "D" }] })
  }

  render() {
    return (
      <div>
        {this.state.persons.map(person => {
          return <Person name={person.name} age={person.age} />
        })}
        <button onClick={this.handleChangeNames.bind(this, "Z")}>Click</button>
        =================== OR ===================
        <button onClick={() => this.handleChangeNames("Z")}>Click</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("root"))

Arrow functions vs bind()

When passing arguments, below two lines are equivalent. arrow functions and Function.prototype.bind both will work; however, be aware that arrow function callback gets created each time App.js renders. This may result in inefficiency when callback is passed as prop to child components that can perform re-rendering. Thus, bind() is recommended over arrow functions.

JSX

<button onClick={this.handleChangeNames.bind(this, "Z")}>Click</button>
<button onClick={() => this.handleChangeNames.("Z")}>Click</button>

[React]: Basics

Thu, 03 Oct 2019 00:00:03 GMT

Install Create React App

Docs on installing Create React App

BASH

npx create-react-app my-app
cd my-app

npx comes with npm(node package manager) version 5.2+

Under "scripts": in package.json, it has list of following commands

BASH

npm start

Start the application in my-app directory

BASH

npm build

Turn all source code from /src/ into code that browser understands(HTML/CSS) and put into /public/ directory.

BASH

npm run build

Creates a optimized build directory with source code. build folder is what we use to deploy the application.

BASH

npm test

Runs test code.

BASH

npm eject

Take out config files; not recommended since the source code is already optimized by professionals.

Barbel & webpack

Baebel makes sure that it will run across all browsers any versions by converting React JS files into older version of JS that web browser understands.

webpack is a module bundler that allows moduler code. It takes all imports and optimize them for production.

Class components

app.js

JSX

import React from "react"
import logo from "./logo.svg"
import "./App.css"

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hi I'm Ellis</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}
export default App

Above code block is just a function that returns a block of HTML

index.js

ReactDOM.render(<App />, document.getElementById("root"))

In index.js, this code renders App function. Replaces id='root' from index.html to function App().

Creating class

Class has more functionalities than a function. To create a class, import the following. This enables JSX syntax.

import React, { Component } from "react"

Otherwise, you can also do

class App extends React.Component

Function to class

JSX

/* Function to class */
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>Hi I'm Ellis</p>
        </header>
      </div>
    )
  }
}
export default App

Accessing state

Class component allows access to state with constructor.

JSX

class App extends Component {
  constructor() {
    super()
    this.state = {
      string: "Ellis",
    }
  }
  render() {
    /* ... */
    ;<p> {this.state.string} </p>
    /* ... */
  }
}

super() calls constructor method in Component class which gives access to functions such as this.state, this.setState, etc.

Changing state

<button onClick={() => this.setState({ string: "Min" })}> Change Text</button>

{
  ;() => this.setState
} // JavaScript anonymous function that calls this.setState

As soon as the state changes, render() gets called again

app.js

JSX

class App extends Component {
  constructor() {
    super()
    this.state = {
      string: "Ellis",
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p> {this.state.string}</p>
          <button onClick={() => this.setState({ string: "Min" })}>
            {" "}
            Change Text
          </button>
        </header>
      </div>
    )
  }
}
export default App

JSX syntax

<div className="">
<button onClick={ ... }>

JSX uses a slightly different attributes from HTML. It uses className, onClick to distinguish it from class="" and onclick. JSX mimics what HTML does so it can create a virtual DOM.

{} is used for JavaScript variables or expressions.

Dynamic content

To display a multiple users

JSX

constructor() {
    super();
    this.state = {
      users: [
      {
        name: 'Bob',
        id: '2'
      },
      {
        name: 'Peter',
        id: '3'
      },
      {
        name: 'John',
        id: '4'
      }
      ]
    };
  }

To access each element

JSX

render() {
    return (
      <div className="App">
        { /* Iterate over every element*/
        this.state.users.map(user =>
        /* key is used to avoid rendering everything but particular obj*/
        <h1 key={user.id}> {user.name}</h1>)
        }
      </div>
      );
  }

It is recommended to use key attribute whenever we use map() function.

Using json data

For the fake online REST API, visit json Data

Go to Network tab -> refresh page -> users -> Response to preview response data that we'll use.

Otherwise, you can log it onto console with the following

JSX

componentDidMount() {
  fetch('https://jsonplaceholder.typicode.com/users').then(response =>
    console.log(response)
  );
}

Interacting with these APIs is very dynamic. We don't need to hard code all these information in HTML/JS/CSS.

Interacting with back-end

In real life, we'd get the information from back-end rather than hard coding the user information.

Life cycle methods

Examples:

componentDidCatch()
componentDidMount()
componentDidUpdate()
componentWillMount()
componentWillReceiveProps()
componentWillUnmount()
componentWillUpdate()
// ...

These methods get called by React at different stages of when component gets rendered.

componentDidMount()

When component mounts; when React puts component on page onto DOM for the first time.

JSX

componentDidMount() {
  // Makes URL request
  fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users2 => this.setState
    ({users: users2}));
}

users2 is an array of users in json file. Then, users in constructor is set to users2 from json data

Creating functional component

Component can be built with class like we already have (App component)

JSX

class App extends Component {}

Or component can be built with function like

JSX

export const CardList = props => {
  // ...
  return <div></div>
}

Both always returns JSX.

card.component.jsx (functional component)

Create src/components/card-list/card-list.component.jsx.

.jsx is a naming convention. .js will also work, but .jsx is more explicit.

JSX

import React from 'react';
export const CardList (props) => {
  console.log(props);
  return <div>{props.children}</div>;
}

Component takes a props as argument.

Note: each card component does not care about other card.

import in app.js

import { CardList } from "./components/card-list/card-list.component"

Usage

JSX

<CardList name="Ellis">
  <h1>First</h1>
  <h1>Second</h1>
</CardList>

In console it will log {name: "Ellis", children: Array(2)}}

Children are what you pass between the tag.

Add styling

Create src/components/card-list/card-list.styles.css

CSS

.card-list {
  width: 85vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}

import and create className

JSX

import React from "react"
import "./card-list.styles.css"

export const CardList = props => {
  // console.log(props);
  return <div className="card-list">{props.children}</div>
}

Put users in CardList in app.js

JSX

<CardList>
  {this.state.users.map(user => (
    <h1 key={user.id}> {user.name}</h1>
  ))}
</CardList>

CardList/Card Component

Make CardList component responsible to each Card List

app.js

JSX

class App extends React.Component {
  // ...
  render() {
    return (
      <div className="App">
        <CardList users={this.state.users} />
      </div>
    )
  }
}

JSX

<CardList users=>{this.state.users} />

Passing users as prop

card-list.component.jsx

JSX

import React from "react"
import "./card-list.styles.css"

export const CardList = props => (
  <div className="card-list">
    {props.users.map(user => (
      <h1 key={user.id}> {user.name}</h1>
    ))}
  </div>
)

Create card.component.jsx

Create _src/components/card/card.component.jsx__

JSX

import React from "react"
export const Card = props => (
  <div>
    <h1> {props.user.name} </h1>
  </div>
)

Add styling

Create src/components/card/card.component.jsx

CSS

.card-container {
  display: flex;
  flex-direction: column;
  background-color: lavender;
  border: 1px solid grey;
  border-radius: 5px;
  padding: 25px;
  cursor: pointer;
  -moz-osx-font-smoothing: greyscale;
  backface-visibility: translateZ(0);
  transition: trasnform 0.25s ease-out;
}

.card-container:hover {
  transform: scale(1.05);
}

card-list.component.jsx

JSX

import React from "react"
import { Card } from "../card/card.component"
import "./card-list.styles.css"

export const CardList = props => (
  <div className="card-list">
    {props.users.map(user => (
      <Card key={user.id} user={user} />
    ))}
  </div>
)

Update card.component.jsx

JSX

import React from "react"
import "./card.styles.css"

export const Card = props => (
  <div className="card-container">
    <img
      alt="user"
      src={`https://robohash.org/${props.user.id}?set=set4&size=180x180`}
    />
    <h2> {props.user.name} </h2>
    <p> {props.user.email} </p>
  </div>
)

By creating CardList and Card component, the app has more flexibility as CardList can take different props. And it can improve performance.

State vs Props

As we've had users as state

JSX

this.state = {
  users: [],
}

and passed onto CardList

JSX

<CardList users={this.state.users} />

i.e. CardList component receives the state as prop. This is what generally happens; state often changes because of user interaction.

Changes in state is trickling down the tree in virtual DOM (recall one way data flow). State can turn into props/components.

In our case, users gets passed down to be used as prop/component. Take a look into the debugging tool:

App(root of the tree) has the user array as state. But as it's passed down to CardList, it turns into prop.

Again, as the state changes the appropriate component receives the new prop and re-render.

1. Create state

JSX

this.state = {
  // ...
  searchBox: "",
}

JSX

render() {
    return (
      <div className="App">
        <input type='search' placeholder='search users' onChange={e => console.log(e) }/>
      </div>
    );
  }

JSX

onChange={...} // JSX

onChange does not directly modify the DOM unlike onchange used in HTML. Instead, it runs the synthetic event, whenever input changes in the input box.

With synthetic event, React DOM recognizes change and intercepts to change the state.

When we log onto console, it will yield the whole native object. What we're interested is in e.target.value.

JSX

<input
  type="search"
  placeholder="search users"
  onChange={e => console.log(e.target.value)}
/>

Result:

3. Store input into state

JSX

<input
  type="search"
  placeholder="search users"
  onChange={e => this.setState({ searchBox: e.target.value })}
/>

Try logging into console

JSX

<input
  type="search"
  placeholder="search users"
  onChange={e => {
    this.setState({ searchBox: e.target.value })
    console.log(this.state)
  }}
/>

On console, the state shows search field is one letter behind.

It is because setState() is a asynchronous call that does not happen immediately-- it schedules and batches the work for optimization. i.e. React figures out the best time to update (declarative).

To fix this, use a callback:

JSX

<input
  type="search"
  placeholder="search users"
  onChange={e => {
    this.setState({ searchBox: e.target.value }, () => console.log(this.state))
  }}
/>

4. Search user

Note that the web app re-renders after the change of state, here, after onChange. So we can add the code under render method.

JSX

render(){
  // Retrive attribute from state and store into const variable
  const { users, searchBox} = this.state;
  // Above is same as..
  // const uesrs = this.state.users;
  // const searchBox = this.state.searchBox;
 const filteredUsers = users.filter(user =>
      user.name.toLowerCase().includes(searchBox.toLowerCase())
    );
}

JSX

users.filter()

filter() returns array from function we pass in.

Now we need to pass in filteredUsers into CardList

JSX

<CardList users={filteredUsers} />

Create the following

src/components/search-box/search-box.component.jsx

src/components/search-box/search-box.styles.css

search-box.component.jsx

JSX

import React from "react"
import "./search-box.styles.css"
export const SearchBox = ({ placeholder, handleChange }) => (
  <input type="search" placeholder={placeholder} onChange={handleChange} />
)

search-box.styles.css

CSS

input {
  position: relative;
  margin-bottom: 30px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  width: 130px;
  border: 3px solid aquamarine;
  padding: 8px;
}
/* When input field gets focus, change width*/
input:focus {
  width: 70%;
}

By creating search box as a component, this can be re-used without duplicated codes.

Note: component file doesn't have scope to state or life cycle method, but the functional component doesn't need them. It just needs to render.

Important: There is no state inside SearchBox component because our root of the virtual DOM, App, has two components, CardList and SearchBox.

Using state inside SearchBox disables CardList to find out what's going on in SearchBox. This is because of unidirectional data flow. This is why structuring state is very important in React.

Writing methods

From

JSX

return (
  //...
  <SearchBox
    placeholder="search users"
    handleChange={e => this.setState({ searchBox: e.target.value })}
  />
)

We can create method

JSX

class App extends Component {
  // ...
  handleChange(e) {
    this.setState({ searchBox: e.target.value })
  }
}

And call with

JSX

return <SearchBox placeholder="search users" handleChange={this.handleChange} />

Here, we encounter an error that this is undefined. We need to explicitly create a scope in constructor with the following

JSX

constructor() {
  this.handleChange = this.handleChange.bind(this);
}

JSX

.bind(this);

.bind() is a method on any function that returns a new function where context of this is set to whatever we pass to it.

But it'd be hassle to do it each time in the constructor. There's an alternative with arrow function:

JSX

class App extends Component {
  // ...
  handleChange = e => {
    this.setState({ searchBox: e.target.value })
  }
}

It binds the this context to the place where they were defined in the first place.

When App component is instantiated, JS defines all methods of component including the arrow function. Then, it binds automatically.

This is called lexical scope; a variable defined outside a function can be accessible inside another function defined after the variable declaration.

Similar idea on the console:

More on function scope

JSX

class App extends React.Component {
  constructor() {
    super()
    this.handleClick2 = this.handleClick1.bind(this)
  }
  handleClick1() {
    console.log("btn 1 clicked")
  }
  handleClick3 = () => console.log("btn 3 clicked")

  render() {
    return (
      <div>
        <button onClick={this.handleClick1()}>click 1</button>
        <button onClick={this.handleClick1}>click 2</button>
        <button onClick={this.handleClick2}>click 3</button>
        <button onClick={this.handleClick3}>click 4</button>
      </div>
    )
  }
}

click 1 calls the function this.handleClick1() and this gets invoked on render(), not on click. This is why we shouldn't call a function on event handler.
click 2 has this.handleClick1 assigned to handleClick1(). It prints out on console on click. However, when we change it to

JSX

handleClick1() {
    console.log(this);
  }

JSX

this.handleClick1()

console out this (app). while..

JSX

this.handleClick

console out undefined

click 3 prints out "btn 1 clicked". However, since this one is bound in constructor, it prints this (app) other than undefined.
click 4 uses the arrow function so it also prints this (app) instead of undefined

Take away is to use arrow function on any class methods you define that isn't part of React(i.e. render(), componentDidMount()).

Deploying app to github

1. Create repository on github

BASH

git remote add origin https://github.com/EllisMin/search-app-.git

2. install gh-pages

BASH

npm i gh-pages

3. Prepare deploy in package.json

JSON

{
  "name": "my-app",
  // ...
  "homepage": "https://ellismin.github.io/search-app", 
  "dependencies": {
    // ...
  },
  "scripts": {
    // ...
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"  
  },
  // ...

BASH

npm run deploy

4. Push

BASH

git add -A
git commit -m "commitMessage"
git push origin master

5. Set up github page branch

Now check the website

My blog's RSS Feed

test

About

About

Education

Personal Projects

stale

[Project]: Game Code Share

Motivation

[Project]: Ramen Kid

Features

Responsive design

Setting announcement

Add/Edit/Delete menu items

Drag & Drop to change order

Dynamically generate PDF

Editing other pages

Subscription

Contact form

Analytics

Authentication

Edit header links

QR Code

[SSH]: Remote SSH to a Raspberry Pi without password (macOS, Linux)

Overview

1. Connect to Raspberry Pi on terminal

2. Generate authentication key on pi

id_rsa.pub vs id_rsa

3. Add generated key to authorized key

4. Set permissions for authorized key

5. Move generated key to your device

6. Connect without typing in password

[React]: 리액트로 카카오톡 공유 버튼 구현하기

1. 어플리케이션 등록하기

2. JavaScript키

.env

3. Include script

4. 하위 컴포넌트 KakaoShareButton

[VSCode]: Settings

VS Code Tips

Enable code . inside terminal

Shortcuts

Plugins

Setting

Enable emmet

Changing colors of terminal

Personal setting

Secondary vscode setting

[Next.js]: Implementing infinite scroll in Next.js

Overview

Install packages

getServerSideProps()

Backend API

UserList component

Adding loader between page navigation

Extra: Styling for user

[Next.js]: Implementing pagination in Next.js

Overview

Install packages

getServerSideProps()

Backend API

UserList component

Adding loader between page navigation

scrollIntoView()

Extra: Styling for user & paginate component

[Next.js]: Using environment(env) variables in Next.js

Overview

.env

Install dotenv-webpack

next.config.js

[Next.js]: How to set up Express.js with Next.js

Install Express.js

Creating server

package.json

Extra: Add CORS header & Error Handler & Mongoose connection to server

Install Mongoose

Configure Mongoose URI

[Next.js]: Build page transitions with React Transition Group in Next.js

Overview

Install react-transition-group

Enable `code .` inside terminal

Create `next.config.js` in the root directory & import