Skip to content
React 16.8.4 + NextJS 8.0.3 + Emotion + Sequelize 5/Postgres + Passport Local Auth + Google App Engine or Heroku Deployment
Branch: master
Clone or download
Latest commit 3206c56 May 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
api Remove unused imports Apr 28, 2019
common enforce ssl May 25, 2019
components Remove unused imports Apr 28, 2019
higher-order global prettier and import order pass Apr 12, 2019
pages Deletes buggy code, removes useless redux/connect calls, fixes NaN-Na… Apr 13, 2019
static Initial commit Jul 24, 2017
.babelrc Upgrade to latest NextJS 8.x Mar 16, 2019
.gitignore removes yarn.lock May 24, 2019
.sequelizerc Initial commit Jul 24, 2017
HEROKU.md NextJS 7.0.0 Babel 7.0.0 starting point Sep 25, 2018
LICENSE NextJS 7.0.0 Babel 7.0.0 starting point Sep 25, 2018
README.md
config.js in sequelize v5 there is no need to set operatorAliases to false sinc… Apr 13, 2019
index.js
package.json updates flex pricing warning May 25, 2019
server.js enforce ssl May 25, 2019

README.md

next-postgres

An example app with...

  • Posts
  • Comments
  • Authentication

With some nice qualities...

  • Full stack JavaScript
  • Server side rendering

And you can deploy it to...

Feel free to use without attribution!

Production Examples:

Preview:

Stack

Why is this useful? Why should I care?

  • Bad UX/UI so you are forced to make it your own!
  • Some "production ready" are concepts baked in for you.
  • You'll get server side rendering for free.
  • You can move a little faster at a competition or hackathon.

Setup: Prerequisites

I use Homebrew to manage dependencies.

  • Install Postgres: brew install postgres.
  • Install Node 10.7.0+: brew install node. (Or update your node)

Setup: Quick newbies guide to Postgres

  • On OSX, to run Postgres in a tab on the default port.
postgres -D /usr/local/var/postgres -p 5432
  • Postgres config is stored in ./config.js.
  • Local database: sampledb.
  • Username: test.
  • Password: test.
  • Please come up with something better in production.

First time Postgres instructions.

# Enter Postgres console
psql postgres

# Create a new user for yourself
CREATE ROLE yourname WITH LOGIN PASSWORD 'yourname';

# Allow yourself to create databases
ALTER ROLE yourname CREATEDB;

# Exit Postgres console
\q

# Log in as your new user.
psql postgres -U yourname

# Create a database named: sampledb.
# If you change this, update config.js
CREATE DATABASE sampledb;

# Give your self privileges
GRANT ALL PRIVILEGES ON DATABASE sampledb TO yourname;

# List all of your databases
\list

# Connect to your newly created DB as a test
\connect sampledb

# Exit Postgres console
\q

Newbie tip: I use an app called TablePlus for postgres.

Setup: Run locally

In the root directory run these commands:

npm install
npm install -g babel-cli
npm install -g sequelize-cli
sequelize db:migrate
npm run dev
  • Visit localhost:8000 in a browser to start development locally.
  • You will need postgres running.

Deploy Heroku

To deploy with Heroku, please follow the instructions here.

Deploy Google App Engine

Please set up Google App Engine and download the Google Cloud SDK so you can use gcloud from the command line.

You will need to add an app.yaml. It will look something like this:

runtime: nodejs
env: flex

manual_scaling:
  instances: 1

resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10

env_variables:
  NODE_ENV: production
  PRODUCTION_USERNAME: your-database-username
  PRODUCTION_PASSWORD: your-database-user-password
  PRODUCTION_DATABASE: your-database-name
  PRODUCTION_HOST: your-database-host
  PRODUCTION_PORT: your-database-port
  PRODUCTION_SECRET: your-secret

Be sure to read the documentation

Make sure you add app.yaml to the .gitignore. You don't want to commit this file into your Github repository.

Then run npm run deploy. This configuration will cost you ~$40 a month.

What happened to Zeit's Now service?

  • It is a great service.
  • Now 2.0 is about serverless everything
  • This example doesn't work with Now 2.0

Questions?

Feel free to slang any feels to @wwwjim.

You can’t perform that action at this time.