64

Next.js + React Hooks + GraphQL (Apollo) + Postgres SQL boilerplate

 5 years ago
source link: https://www.tuicool.com/articles/ErqeAjY
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Next.js + React Hooks + GraphQL (Apollo) + Postgres SQL boilerplate

Note: this is my v3 boilerplate for React web apps. See also nextjs-sql-rest-api-boilerplate and nextjs-express-mongoose-crudify-boilerplate .

Why is this awesome?

This is a great starting point for a any project where you want React (with Hooks) (with server-side rendering, powered by Next.js ) as frontend and GraphQL and Postgres SQL as backend. Lightning fast, all JavaScript.

  • GraphQL API with Apollo.
  • React Hooks for business logic.
  • Flexible client-side routing with next-routes (see server/routes.js ).
  • Flexible configuration with config/config.js and .env file.
  • Hot reloading with nodemon .
  • Testing with Jasmine.
  • Code formatting and linting with StandardJS.
  • sitemap.xml, robots.txt, and Google Analytics support.

Demo

See nextjs-graphql-hooks-boilerplate running on Heroku here .

EBf6F3m.gif

How to use

Clone this repository:

git clone https://github.com/tomsoderlund/nextjs-graphql-hooks-boilerplate.git [MY_APP]

Install dependencies:

cd [MY_APP]
yarn  # or npm install

Install Postgres and set up the database:

psql postgres  # Start the Postgres command-line client

CREATE DATABASE "nextjs-graphql-hooks-boilerplate";  -- You can also use \connect to connect to existing database
CREATE TABLE article (id serial, title varchar(200), content text);  -- Create a blank table
INSERT INTO article (title) VALUES ('The first article');  -- Add example data
SELECT * FROM article;  -- Check data exists
\q

Start it by doing the following:

export DATABASE_URL=[your Postgres URL]  # Or use a .env file
yarn dev

In production:

yarn build
yarn start

If you navigate to http://localhost:3123/ you will see a web page with a list of articles (or an empty list if you haven’t added one).

GraphQL client and server

Your GraphQL API server is running at http://localhost:3123/graphql

Deploying

Deploying on Heroku

heroku create [MY_APP]
heroku addons:create heroku-postgresql:hobby-dev
git push heroku master

Deploying on Zeit Now

(Coming)


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK