Jarrod Medrano - Senior Software Engineer jarrodmedrano

Instructions to properly set up a production-ready NextJS App with AWS

This is a summary of how to start your own NextJS app, create the repo on Github, upload later in an AWS EC2 Instance and automate the process with AWS Codebuild, CodeDeploy, & CodePipeline.

After following these instructions you should be able to:

Create a NextJS App
Create an AWS EC2 instance
Be able to SSH to an EC2 instance
Prepare the instance as a Node environment
Configure Nginx service for proper routing
Configure domain and add SSL

Just a quick fix dump for anyone not using ts-node-dev who is getting the Property 'model' does not exist on type ObjectDefinitionBlock or Property 'crud' does not exist on type ObjectDefinitionBlock: ensure your type generations are getting output where you think they are.

ts-node-dev does not transpile to a dist folder whereas other typescript watchers (like tsc-watch do). This is critical because if you output the generated types into your dist folder, VSCode and TypeScript won't find them, and you'll get the above error.

Also be aware that nexus & nexus-plugin-prisma have their own type generations and their own config definition for where to output each.

This is a commented example of makeSchema, with versions, so you can work out what's what:

nexus: v1.0.0 nexus-plugin-prisma: v0.27.0

React - Functional error boundaries

Thanks to React hooks you have now happily turned all your classes into functional components.

Wait, all your components? Not quite. There is one thing that can still only be implemented using classes: Error boundaries.

There is just no functional equivalent for componentDidCatch and deriveStateFromError yet.

Proposed solution

The dokku-push action requires an SSH key with push access to the Dokku instance. Here's how to do that.

Replace APPNAME with the name of the app (e.g. this is a good idea to use the same name used on Dokku's).

Generate a new SSH keypair

We want each repo to have its own SSH key, so it's easier to rotate/invalidate them if required, without affecting all the repos. Let's generate a new key on your computer (see GitHub help):

Installing `pyenv` on macOS for Zsh using Homebrew

Published May-13-2020

Installation
Basic Usage
Virtualenv

	FROM node:14-slim

	ENV NODE_ENV=production

	COPY pnpm-deploy-output /app

	WORKDIR /app

	ENTRYPOINT ["/app/entrypoint.sh"]

	import { z, ZodTypeAny, ZodUnion } from 'zod'

	/**
	* Zod helper for parsing arrays and ignore items not specified in the schema
	*
	* @param zodUnion - union of known types
	*
	* @example
	* const binaryArraySchema = arrayIgnoreUnknown(z.union([z.literal('0'), z.literal('1')]))
	* type BinaryArray = z.TypeOf<typeof binaryArraySchema>

	.next
	public
	node_modules
	yarn.lock
	package-lock.json
	*/.test.js
	coverage

	import * as React from 'react';

	type FocusIndex = number \| null;

	/**
	* A React hook for managing focus of elements in a list based on keyboard
	* arrows (up and down). Great for a11y and UX.
	*
	* This hook does not deal with the actual imperative `.focus()` part at all.
	* It solely calculates the which index in a list which should currently be

	import css from "rollup-plugin-css-porter";
	import pkg from "../../package.json";
	import resolve from "rollup-plugin-node-resolve";
	import babel from "rollup-plugin-babel";
	import path from "path";
	import commonjs from "rollup-plugin-commonjs";
	import { terser } from "rollup-plugin-terser";

	process.env.BABEL_ENV = "production";
	process.env.NODE_ENV = "production";