gatsby-starter-blog live glitch.com playground

[100ideas]

gatsby-starter-blog w/ live-edit demo: https://github.com/100ideas/glitch-gatsby-starter-blog

---

"Glitch" by Fog Creek Software:

With working example apps to remix, a code editor to modify them, instant hosting and deployment - anybody can build a web app on Glitch, for free.

Terrific, we can all stop doing dev the old fashioned way with our cumbersome "laptops" and "terminals" and "operating systems" etc etc 👴

But can it run the mighty gatsby-starter-blog?! 💪

• demo: https://gatsby-starter-blog.glitch.me
• glitch source: https://glitch.com/edit/#!/gatsby-starter-blog

Impressions

• in-browser glitch editor can be used create/edit markdown files in src/pages/<date>-<post-name>/index.md
  • but can't (easily) upload image files to src/pages/ folders
  • because images etc are supposed to be put into glitch's assets folder, which is served by cdn
  • maybe someone will make a gatsby-source-glitch-assets plugin to help
• authoring content & uploading / hosting media is possible, but not as simple off-the-shelf
• gatsby/glitch live-reloads changes quickly, but currently running in dev mode
• in general, glitch seems designed to make collaborative editing & instant hosting of app painless

Conclusion

For newcomers to gatsby, glitch-gatsby-starter-blog is potentially a painless way to explore running gatsby code with minimal friction.

Future ideas

• mash up gatsby-starter-blog w/ using-contentful gatsby example to simplify content authoring
• figure out how to get assets from .glitch-assets/. Here's a good starting point: glitch app using express to serve assets

[100ideas]

Glitch apps run in docker containers on AWS behind some proxy/router layer, so to get webpack hmr working in develop mode, it is necessary to configure webpack-hot-middleware/client?path= with the containers public domain name rather than the default localhost passed in via program.host.

I ended up using an ugly hack to set the webpack-hot-middleware/client?path= string in gatsby-config.js. Besides adding logic to check for the correct _config.entry.commons[] array index to use, is there a safer/better way to do this?

gatsby-starter-blog/gatsby-config.js/modifyWebpackConfig():

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === `develop`) {
    config._config.entry.commons[1] = `/app/node_modules/webpack-hot-middleware/client?path=https://${process.env.PROJECT_DOMAIN}.glitch.me/__webpack_hmr&reload=true`
    config._config.output.publicPath = `https://${process.env.PROJECT_DOMAIN}.glitch.me/`
    // console.dir(config, {depth: 3})
  }
  return config
}

[KyleAMathews]

Hey! This is awesome! You want to add this to the starters docs page that was just created earlier? https://www.gatsbyjs.org/docs/gatsby-starters/

[100ideas]

@KyleAMathews done!

Is my approach (above) to modifying webpack-hot-middleware config ok?

[100ideas]

Couldn't figure out the proper way of exposing an environment variable on the server to node/gatsby, so ended up with this sad hack using npm run prestart script: https://github.com/100ideas/glitch-gatsby-starter-blog/blob/master/package.json#L11

Would be nice to see an example of how to extend process.env using webpack.DefinePlugin() (#660) without clobbering `process.env.NODE_ENV.

#1462 is a step in the right direction but I need to access a shell variable, not static config option.

[KyleAMathews]

Is my approach (above) to modifying webpack-hot-middleware config ok?

Yup! that looks great. BTW, it might make sense to put all this Glitch-specific code into a Glitch plugin.

[thetha]

I have a question. I have tested a clean gatsby starter.
It is defenetly not working on glitch.