hilmangenio / next-postgres

An example application using React 16/NextJS + Emotion 8 and Sequelize 4/Postgres, then deployed to Heroku

next-postgres

This is a example of a forum web application with posts, comments and server side rendering.

It is deployed here.

Stack

• NextJS + Custom Express
• Emotion CSS-in-JS
• Postgres
• Sequelize: PostgresSQL ORM
• Passport for local authentication
• Heroku
• Redux
• Babel

This code is for you to take!

Why is this useful?

• The entire stack is written in JavaScript.
• Test concepts before bringing them over to real work.
• Server side rendering made simple.
• Speed at Hackathons.

Mobile apps with JavaScript

I also built a React Native application with Expo that sends network requests to a deployed version.

• Open it the project on Expo.
• Get Expo Client if you need it.
• View and take the source code on GitHub.

Setup: Prerequisites

• Use Homebrew.
• Install Postgres: brew install postgres.
• Install Node 6+: brew install node.

Setup: Quick newbies guide to Postgres

• On OSX, to run Postgres:

pg_ctl -D /usr/local/var/postgres start

• Postgres config is stored in ./config.js.
• Local database: testdb.
• Username and password as test.

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: testdb.
# If you change this, update config.js
CREATE DATABASE testdb;

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

# List all of your databases
\list

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

# Exit Postgres console
\q

You wont return here unless you drop tables. You can also use a GUI if you like.

Setup: Run locally

In the root directory run these commands:

npm install
npm install -g sequelize-cli
sequelize db:migrate
npm run dev

You can now visit localhost:8000 in a browser.

Deploy: Setup Heroku

Install Heroku.

npm install -g heroku-cli
heroku login
heroku create

Heroku will give you a unique address, like ours: https://next-postgres.herokuapp.com/.

Already have a heroku app to deploy to?

heroku git:remote -a name-of-your-heroku-app

Deploy: Configure Postgres and environment variables on Heroku

Go to https://data.heroku.com, add a datastore, pick Postgres.

You will receive database, host, password, port, and username values. Here is how you set them:

# Set variables
heroku config:set PRODUCTION_DATABASE=NAME_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_HOST=HOST_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_PASSWORD=PASSWORD_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_PORT=PORT_PROVIDED_FROM_HEROKU
heroku config:set PRODUCTION_USERNAME=USERNAME_PROVIDED_FROM_HEROKU

# See all of your variables
heroku config

Set a secret for cookie-session:

heroku config:set PRODUCTION_SECRET=PICK_A_SECRET

Deploy

git push heroku master

append --force if necessary.

Questions?

Feel free to slang any feels to @meanjim.