huyhong / next-postgres

React 16.4.2 + NextJS 7.0.2 + Emotion + Sequelize 4/Postgres + Passport Local Auth + Zeit or Heroku Deployment

next-postgres

This is an example of a full stack web application with...

• posts
• comments
• server side rendering.

It is configured to be deployed to Zeit but I also provide Heroku deployment steps.

It is code you can use without attribution, please enjoy. 🙏

Production Examples:

• Maurice Kenji Clarke used the setup to create: https://indvstry.io/
• I used some of the ideas here for a serious project: Reading Supply

Preview:

• https://next-postgres.herokuapp.com/
• https://next-postgres-wvpphfoelq.now.sh/

Stack

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

Why is this useful? Why should I care?

• The UX and UI are garbage, that means everything you do after will be better!
• Client and server are written in JavaScript.
• This is a production ready codebase you can use to test a concept you have.
• Server side rendering has been made simple.
• Maybe you want to get a head start at a hackathon.

Setup: Prerequisites

I use Homebrew to manage dependencies on a new laptop... You're welcome to use something else.

• 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 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: 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

I also use a GUI called TablePlus if you don't like command line.

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 (Alternative choice)

To deploy with Heroku, please follow the instructions here.

There are very specific details you must pay attention to.

Deploy Zeit

Deploying with now-cli is as simple as

now

Do you have a custom domain? You can use an alias

# after the deploy, alias to your domain, add "alias" to now.json first
now alias

Make sure you configure your alias for zeit.world. Also make sure you add the secrets you need or delete the ones you aren't using from now-secrets.json.

Database + Secrets

You can use a service like https://compose.io to get a hosted Postgres database.

Then update production secrets using now secrets. You must do this or else your website can't connect to the production database.

now secrets add production-username   xxxxxxxxxxxxxxx
now secrets add production-password   xxxxxxxxxxxxxxx
now secrets add production-database   xxxxxxxxxxxxxxx
now secrets add production-host       xxxxxxxxxxxxxxx
now secrets add production-port       xxxxxxxxxxxxxxx
now secrets add production-secret     xxxxxxxxxxxxxxx

Questions?

Feel free to slang any feels to @wwwjim.