Introduction

[wtsang11]

http://localhost/TechNotes/wp-admin/post.php?post=1440&action=edit

VSC: http://localhost/lab/python/utilities/study_codes/opencodes.php?f=/Users/wtsang/Lab/gatsby/john_v3/

OLD: http://localhost/lab/python/utilities/study_codes/opencodes.php?f=/Users/wtsang/Lab/react/john_gatsby_v3/

Running Gatsby in Docker

https://valenciandigital.com/blog/containerizing-a-gatsbyjs-site-with-docker-compose

https://blog.konnor.site/javascript/setting-up-gatsby-with-docker/

[wtsang11]

installation

sudo npm -g gatsby

starters

https://www.gatsbyjs.com/starters/?v=3

hello world starter

https://github.com/gatsbyjs/gatsby-starter-hello-world#readme

note: gatsby new project failed with message: File: .cache/blank.css

failed Building development bundle - 3.954s

gatsby new tutorial https://github.com/gatsbyjs/gatsby-starter-hello-world

ERROR in ./.cache/blank.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Cannot find module 'autoprefixer'

Solution

Probably the project directory name is too long such that the build process failed.
/Users/wtsang/Lab/react/john_gatsby_v3/practice/sect2/tutorial Bug in Webpack ? Proof: Successfully run gatsby new in a directory with shorter path name" /tmp/ and also successful in /Users/wtsang/Lab/react/john_gatsby_v3/