Investigate making code contributions easier with Gitpod

[jankeromnes]

📋 Description

Following up from #2697 (comment).

I would like to make life easier for potential new shields.io contributors by implementing gitpod.io support for Shields development. Disclaimer: I work on Gitpod.

This could provide newcomers (and also Shields maintainers) with pre-configured workspaces in the cloud, allowing them to get started instantly, without having to first set up a complete development environment themselves.

TODO:

• Allow cloning any Shields branch or pull request in Gitpod
• Automatically pre-run npm install
• Automatically start the Shields server and open it in a live preview
  • (Doesn't work yet, because the badge server on port 8080 refuses any requests with non-localhost domains, which Gitpod's preview pane tries to do) fixed in Fix overriding bind address on CLI #2773
  • add onOpen: open-preview to port 8080 in .gitpod.yml in order to auto-open preview when the Shields server starts (but maybe wait for [mini-browser] Make the mini-browser background white again eclipse-theia/theia#4096 to restore the white background in Gitpod's preview)
• Pre-install ImageMagick (maybe not useful)
• Mention experimental Gitpod support in README.md to help newcomers get started (done in Make code contributions easier with Gitpod #2783)
• Enable pre-built branches & pull requests once Gitpod supports those (so that contributors & reviewers don't have to wait for npm install && npm run build to finish before getting started)
• Auto-format on Save with Prettier (see [editor] Format the text on saved. eclipse-theia/theia#3338)
• Suggest useful Shields workflows & commands (once [tasks] Support VS Code task definitions gitpod-io/gitpod#247 is implemented)

Please let me know what you think of this idea, and if you know other setup/configuration things that should be automated for new contributors.

[paulmelnikow]

This sounds really neat!

Oops, you're supposed to be able to set the bind address on the command line, like node server 8080 0.0.0.0, though it looks like it's broken. I opened #2773 with a fix.

I think you could skip ImageMagick. It's only needed for the raster (i.e. .png, .gif, .jpg) badges. That's a fairly unusual use case and most people probably would not need it for development.

[jankeromnes]

Wow, thanks a lot for the quick fix! 💯 It looks good to me, I'll try it out.

Is there a way to use node server 8080 0.0.0.0 through a convenient command like npm start?

shields/package.json

Lines 103 to 106 in a58de54

	"start:server": "cross-env NODE_CONFIG_ENV=development node server 8080",
	"now-start": "node server",
	"prestart": "run-s --silent depcheck defs features",
	"start": "concurrently --names server,frontend \"npm run start:server\" \"cross-env BASE_URL=http://localhost:8080 BABEL_ENV=dev-prod next dev\"",

Maybe there should be some sort of npm start:public-server?

[paulmelnikow]

Does Gitpod need it to be an npm script?

It's surprising, but Heroku, Zeit Now, our production VPS, and I think our docker config seem content with the server binding to localhost.

Probably we could find a way to do that if necessary.

[jankeromnes]

Does Gitpod need it to be an npm script?

No, Gitpod can start any command, but I was thinking that it's quite nice to have one command start both the server and the front-end (using the concurrently NPM command).

It's surprising, but Heroku, Zeit Now, our production VPS, and I think our docker config seem content with the server binding to localhost.

Interesting. Are requests to the badge server on 8080 only ever made via localhost? If developers never need to access it via a web preview (i.e. if they never need to use 8080 directly, or if something like curl localhost:8080 is sufficient), then there is no need to expose port 8080 publicly.

[paulmelnikow]

The typical dev flow is both servers running on localhost. The web preview works on localhost:8080.

How is Gitpod configured? Is there a config file that would get checked into the repo? That might be the best place to define a command that can be tailored for this situation.