View next.config.js
const webpack = require('webpack');
path: process.env.NODE_ENV === 'production' ? '.env.production' : '.env'
module.exports = {
webpack: config => {
const env = Object.keys(process.env).reduce((acc, curr) => {
acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
GraphQL spec-compliant
Supports file upload
Realtime functionality with GraphQL subscriptions
Works with TypeScript typings
Out-of-the-box support for GraphQL Playground
Extensible via Express middlewares
Resolves custom directives in your GraphQL schema
Query performance tracing
Accepts both application/json and application/graphql content-types

Frontend Masters—Deploying Full Stack: Node.js & React on AWS

You should have the following completed on your computer before the workshop:

  • Have Node.js installed on your system. (Recommended: Use nvm.)
    • Unfortunately, you'll need to be on Node 9.x or earlier. Dependencies are hard and one of the dependencies of one of our dependencies is set to not allow Node 10.x.
    • Install yarn with brew install yarn.
  • Create an AWS account. (This will require a valid credit card.)
  • Install multi-factor authentication app (e.g. Authy, Google Authenticator, Duo).
  • Install the AWS CLI. (brew install awscli should do the trick. Otherwise, you'll need Python and PIP, which you can install using brew install python.)
View index.js
const md5File = require('md5-file');
const path = require('path');
// CSS styles will be imported on load and that complicates matters... ignore those bad boys!
const ignoreStyles = require('ignore-styles');
const register = ignoreStyles.default;
// We also want to ignore all image requests
// When running locally these will load from a standard import
// When running on the server, we want to load via their hashed version in the build folder
View index.html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<h1>Hello world!</h1>
<script src="script.js"></script>
[%bs.raw {|require('./styles/App.css')|}];
type repo = {
full_name: string,
stargazers_count: int,
html_url: string
type state = { repoData : option(array(repo)) };
View events_table.sql
-- ----------------------------
-- Table structure for events
-- ----------------------------
DROP TABLE IF EXISTS "public"."events";
CREATE TABLE "public"."events" (
"id" uuid DEFAULT gen_random_uuid() NOT NULL,
"type" varchar NOT NULL COLLATE "default",
"stream" varchar NOT NULL COLLATE "default",
View react.js
class UserView extends React.Component {
constructor(props) {
this.state = {
user: undefined
.then((res) => res.json())
.then((user) => {
this.setState({ user });
View App.hs
{-# LANGUAGE TypeOperators, DataKinds, OverloadedStrings, DeriveGeneric, FlexibleContexts #-}
module Lib
( app
, User(..)
) where
import Servant
import Servant.API
import Data.Proxy
import Network.Wai
View transformer2.hs
newtype Arr2T e1 e2 m a = Arr2T { getArr2T :: e1 -> e2 -> m a }
newtype Arr3T e1 e2 e3 m a = Arr3T { getArr3T :: e1 -> e2 -> e3 -> m a }
instance Functor m => Functor (Arr2T e1 e2 m) where
fmap f (Arr2T g) = Arr2T $ \e1 e2 -> fmap f (g e1 e2)
instance Functor m => Functor (Arr3T e1 e2 e3 m) where
fmap f (Arr3T g) = Arr3T $ \ e1 e2 e3 -> fmap f (g e1 e2 e3)
instance Applicative m => Applicative (Arr2T e1 e2 m) where