Software Engineer at Aon Cyber Solutions (NYC). Pixel manipulator with passion for UX/UI.
GatsbyJS auth with AWS Amplify

— -
description: Build a Gatsby site with AWS Amplify auth
tags: gatsbyjs, aws, amplify
— -

Steps to follow along:

Create new Gatsby project

gatsby new gatsby-auth-amplify

Add TS (optional)

This step is optional but highly recommended

  • Add TS plugin
yarn add gatsby-plugin-typescript
  • Add TypeScript definitions
yarn add -D @types/react @types/react-dom @types/node
  • Change files extensions


Hook up AWS Amplify Framework

You gotta love git

So you have git branch ’ed the new branch, did tons of great coding, only to realize that the branch name does not reflect your amazing work and there’s inevitable need for renaming. On top of everything, you have already pushed it to remote. No problem, let’s rename your local and remote branches in 3 super easy steps:

  1. Rename local branch.
// Are you on the branch you want to rename?YES: git branch -m new-branch-nameNO: git branch -m old-branch-name new-branch-name

2. Rename remote branch (delete old and push the new one).

git push origin :old-branch-name new-branch-name

3. Reset the upstream.

// You have to be on the newly (re)named branch.git push origin -u new-branch-name

And this is it. Life goes on.

Why not color up your dev tools? So VSCode became a default much-loved text editor for swarms of web devs due to various reasons, the main being it’s just cool to use.

Customize top bar in VS Code

Let’s see how we can customize the color of the top bar. You may ask why we need…


A quick note on what you can do with JavaScript’sObject.keys() method. We will use it to transform an Object into an Array with three different outputs: 1) creating an array of objects with reassigned key-value pairs, 2) creating and array of keys, and 3) creating an array of values. Let’s start.

Let our initial object be a couple of US Federal Holidays:

const holidays = {   
NYE: '2018-01-01',
XMAS: '2018-12-25'

Array of objects with redefined key-value pairs

const holidaysArray = Object.keys(holidays).map(key =>    
name: key,
date: holidays[key]
// => [
{ name: 'NYE', date: '2018-01-01' },
{ name: 'XMAS', date: '2018-12-25' }

Array of keys

const keysArr = Object.keys(holidays).map(key => {
return key;
// => [ 'NYE', 'XMAS' ]

Array of values

const valuesArr = Object.keys(holidays).map(key => {
return holidays[key];
// => [ '2018-01-01', '2018-12-25' ]

Data structures in Javascript are interviewers favorite question. And if you dig deeper into them, they are awesome. Let’s take this deep dive and start our exploration with Queue.

Queue is a structure that allows elements to be added only at the end and be removed only at the beginning…

Finally in our last module at Flatiron School web dev bootcamp. The whole cohort is facing a reality of building an app from scratch and that includes being a truly full-stack web developer. While the main focus of the past 12 weeks was devoted towards MC of the MVC, it…

Oleg Chursin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store