dyarfi

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

dyarfi

<template>
  <nav id="pagination">
    <ul class="page-numbers" v-if="$store.state.totalPageCount">
      <li v-for="num in this.pageNumbers" v-if="num != null" v-bind:style="{ width: (100 / pageNumberCount) + '%' }">
        <nuxt-link v-if="num != $route.query.page && num != currentPage" :to="{ path: '/', query: { page: num } }">{{ num }}</nuxt-link>
        <span v-else>{{ num }}</span>
      </li>
    </ul>
    <ul class="page-guides" v-if="this.$store.state.totalPageCount != 1">
      <li>

dyarfi

Final Auth flow implementation with JWT

Final implementation of Implementing JSON Web Token (JWT) to secure your app.

Client-Side

Send login request

axios

dyarfi

# The upstream module is the link between Node.js and Nginx.
# Upstream is used for proxying requests to other servers.
# All requests for / get distributed between any of the servers listed.
upstream helloworld {
  # Set up multiple Node.js webservers for load balancing.
  # max_fails refers to number of failed attempts
  # before server is considered inactive.
  # weight priorities traffic to server. Ex. weight=2 will recieve
  # twice as much traffic as server with weight=1
  server <your server ip>:3000 max_fails=0 fail_timeout=10s weight=1;

dyarfi

Docker Commands, Help & Tips

Show commands & management commands

$ docker

Docker version info

dyarfi

/* -------------------------------------------------------------------------- */
// All Bootstrap 4 Sass Mixins [Cheat sheet]
// @author http://anschaef.de
// @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
/* -------------------------------------------------------------------------- */

// Grid variables
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;