tomsoderlund / Nextjs Pwa Graphql Sql Boilerplate
Programming Languages
Projects that are alternatives of or similar to Nextjs Pwa Graphql Sql Boilerplate
Next.js serverless PWA with GraphQL (Apollo) and Postgres SQL boilerplate
Note: this is my v3 boilerplate for React web apps. See also my Firebase and React Hooks boilerplate, Redux + REST + Postgres SQL boilerplate and REST + MongoDB boilerplate.
Support this project
Did you or your company find nextjs-pwa-graphql-sql-boilerplate
useful? Please consider giving a small donation, it helps me spend more time on open-source projects:
Why is this awesome?
This is a great template 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.
- Great starting point for a PWA (Progressive Web App).
- Both front-end client and GraphQL/SQL server in one project.
- NEW: Can be deployed as serverless functions on Zeit Now.
- A fast Postgres SQL database server.
- GraphQL API with Apollo.
- React Hooks for business logic.
- PWA features such as
manifest.json
and offline support (next-offline
). - Easy to style the visual theme using CSS (e.g. using Design Profile Generator).
-
sitemap.xml
androbots.txt
support. - Google Analytics and
google-site-verification
support (seeconfig/config.js
). - Flexible configuration with
config/config.js
and.env
file. - Hot reloading with
nodemon
. - Unit testing with Jasmine (
yarn unit
). - Code linting and formatting with StandardJS (
yarn lint
/yarn fix
).
Demo
See nextjs-pwa-graphql-sql-boilerplate running on Zeit Now here.
How to use
Clone this repository:
git clone https://github.com/tomsoderlund/nextjs-pwa-graphql-sql-boilerplate.git [MY_APP]
Remove the .git folder since you want to create a new repository
rm -rf .git
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-pwa-graphql-sql"; -- You can also use \connect to connect to existing database
\connect "nextjs-pwa-graphql-sql";
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
Configure the .env
file.
Start it by doing the following:
yarn dev # or 'yarn now' to run with Zeit Now serverless
In production:
yarn build
yarn start
If you navigate to http://localhost:3003/
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:3003/api/graphql
.
Try the GraphQL playground on the demo server.
Deploying
You can either deploy as a serverless deployment, or as a traditional Express server.
Depending on which deployment you make, some files are unnecessary*.
Deploying serverless (on Zeit Now)
Run in development mode with:
yarn now
Deploy to Now with:
yarn deploy
*Unnecessary files:
-
apollo-server-express
module -
/server
folder
(Shortcut: yarn remove apollo-server-express; rm -rf server
)
Deploying as Express server (on Heroku)
heroku create [MY_APP]
heroku addons:create heroku-postgresql:hobby-dev
git push heroku master
*Unnecessary files:
-
/api
folder -
apollo-server-micro
module
(Shortcut: yarn remove apollo-server-micro; rm -rf api
)
Modifying the app to your needs
Change app name
Do search/replace for "nextjs-pwa-graphql-sql-boilerplate" AND "nextjs-pwa-graphql-sql" to something else.
Change name in public/manifest.json
Renaming “Article” to something else
The database item is called “Article”, but you probably want something else in your app.
Rename the files:
mkdir graphql/{newName}
mv graphql/article/hooks.js graphql/{newName}/hooks.js
mv graphql/article/queries.js graphql/{newName}/queries.js
mv graphql/article/resolvers.js graphql/{newName}/resolvers.js
mv graphql/article/schema.js graphql/{newName}/schema.js
rm -r graphql/article
mkdir -p components/{newName}s
mv components/articles/ArticleList.js components/{newName}s/{NewName}List.js
mv components/articles/ArticleListItem.js components/{newName}s/{NewName}ListItem.js
mv components/articles/ArticleDetails.js components/{newName}s/{NewName}Details.js
rm -r components/articles
mkdir pages/{newName}s
mv "pages/articles/[article].js" "pages/{newName}s/[{newName}].js"
rm -r pages/articles
Then, do search/replace inside the files for different casing: article, Article, ARTICLE
Create a new data model/object type
yarn model # Creates a new folder graphql/newObject with 4 empty JS files inside
Change port number
Do search/replace for "3003" to something else.
How to remove/replace SQL database
- Remove references to
graphql/postgres
-
graphql/article/resolvers.js
: remove “sql*” references
Change visual theme (CSS)
- Change colors in
public/manifest.json
- Change CSS in
public/app.css
- Change font in
PageHead.js