[dev-task] Separate Webpack Dev server from API server

[hydrosquall]

Nature of issue?

• Refactoring to enable devs to make frontend changes without running an API server or database, as suggested by @andrewn

Feature enhancement details:

New feature details:

Perhaps a good way forward is separating the webpack dev server from the API server so that the can be run standalone? Then we could also switch to Parcel if we wanted.

• https://github.com/processing/p5.js-web-editor/pull/1257#issuecomment-604924715

[andrewn]

@hydrosquall I started thinking about how we might do this and ended up with a branch that mostly does it...

The general idea is:

• Totally remove webpack code from API server
• Create a new server that runs the dev webpack config on port 3000 and serves the page routes
• Print a message telling the user to set API_URL in .env to the correct API server instance (localhost or production)

The missing piece is being able to contact the deployed API. At the moment we restrict CORS origins to only p5js.org. I've opened PR #1398 to address this.

To run the client only, you npm run start:client and to run both npm start.

Once we have this separation, then we can start experimenting with other packagers.

What do you think?

[hydrosquall]

Hi @andrewn, I think that sounds like a clean approach, as long as there aren't any particular security motivations to keep the CORS restrictions. I think this should be fine especially if someone just wants to be running the site in a "stateless" mode.