material-node-next-gae-demo

A simple working example of running Next.js on Google App Engine's Node Standard Environment with Material-UI.

Update:

• v0.2.5 - 2020-07-18

  • Security upgrades for various packages

• v0.2.4 - 2019-10-25

  • Upgrading various packages

• v0.2.3 - 2019-10-12

  • Upgrading various packages including material 4.5.0 and react

• v0.2.2 - 2019-07-21

  • Upgraded to Next.js 9
  • Switched routing to Next.js 9's filebased routing and removed routes from server.js
  • Retooled start script for better deployed ngnix performance
  • Introduced start-local for separating local run from deployed runs
  • Upgraded various packages including Material-UI

• v0.2.1 - 2019-07-20:

  • Adding uncommitted _app.js tht upgrades the StylesProvider
  • Upgrading lodash, axios, js-yaml packages for security updates

• v0.2.0 - 2019-05-26:

  • Upgraded Next to v8.1.0
  • Upgraded Material-UI to 4.0.0 stable release
  • Removed pageContext concept in lieu of the ServerStyleSheets
  • Converted inline layout styles to useStyles in PageBase

• v0.1.2 - 2019-06-20

  • Upgraded axios, js-yaml, and lodash packages for security

• v0.1.1 - 2019-03-30:

  • Upgraded eslint to avoid js-yaml security vulnerability
  • Removed isopmorphic-unfetch in lieu of axios
  • Added gzip compression
  • Minor prep for PWA
  • Upgraded material-ui packages 4.0.0-alpha and removed the bootstrap requirement for core 3.9

• v0.1.0 - 2019-03-09:

  • Upgraded to Next.js 8.0.3
  • Upgraded react and react dom to 16.8.3 (aka "the one with hooks")
  • Various other package updates
  • Using new @material-ui/styles alpha to prep for MUI 4
  • Added example of using custom theme variables that are accessed in makeStyles hooks

• v0.0.4 - 2018-12-29:

  • Updated to use nodejs10 runtime on App Engine
  • Upgraded to Next.js 7.0.2
  • Material-UI 3.7.1

Live Demo

View live demo at http://material.node-next-gae-demo.blaine-garrett.appspot.com/

Development

Note: You need node installed. I am using v8.11.3

Installation: npm install

Local Development:: npm run dev Point browser to localhost:3000

Production Build: npm run build (Note: It is a good idea to remove your ./build dir before build/deploy to remove unused build files)

Running Production Build Locally: npm run start-local Point browser to localhost:8080

Deploying to Google App Engine

This will deploy your build to a version of the node-next-gae-demo service (as defined in app.yaml) in your <your_project_id> project. Learn more about services and versions in GAE).

gcloud --project your_project_id app deploy app.yaml --version version_name --verbosity=debug

eg: gcloud --project blaine-garrett app deploy app.yaml --version material --verbosity=debug

Prerequisites:

• You must have a Google Cloud Account created. Sign up here.
• You must have a project created. Replace your_project_id with the id of your project.
• You must have the Google Cloud SDK command line tools installed. Installation Instructions

Important Notes for GAE

• Unlike other runtimes supported by App Engine (Python 2.7, etc), you cannot run your application locally via dev_appserver.py or equivalent. You must use the node runtime installed to your machine.
• As of Dec 29th, 2018 not all Google Cloud and App Engine standard features are available yet in the Beta.

Important Notes for Next.js

• As of March 13th, 2018, files and folders are automatically skipped during deploy if they start with a .. This means the default .build directory must be renamed using the distDir setting in ./next.config

About the Demo

This demo is a compilation of Material UIs Next.js example and node-next-gae-demo which itself is a combo of the nextgram, custom-server-express and head-elements examples from Next.js

It pulls data from the Minneapolis Institute of Art's Elastic Search api.

It also demonstrates loading Material-UI and jss, customizing material themes, and using makeStyles hooks for custom components.

It also demonstrates resolving data dependencies server side (and client side), setting meta content, as well as returning 404 status codes server side based on the results of the REST data.