Skip to content

feat: configure webpack-dev-server for independent frontend development [reboot of #1999] #2207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from

Conversation

lindapaiste
Copy link
Collaborator

Fixes #1348

Credit for this code goes to @hydrosquall's PR #1999.

Changes:

I merged the current develop branch into that branch and fixed the conflicts.

I also made some changes to how the vars are passed from the config to the index.html to ensure that we get boolean true/false values instead of string 'true'. It's possible to inject the variables directly into the <script> with window.process.env = <%= ENV_FROM_WEBPACK %> but that is a syntax error if the file is accessed directly. It seemed safer to place the variables into an HTML property and read from the HTML to the JS, so that's what I did.

This development environment can only load the IDE and cannot handle login, saving, or even viewing the p5 examples. The next step will be to interact with with an API from the production site or a staging site. I see that PR #1398 was merged in order to allow this, but I'm still getting CORS errors 🤷

Access to XMLHttpRequest at 'https://editor.p5js.org/editor/p5/projects' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • has no test errors (npm run test)
  • is from a uniquely-named feature branch and is up to date with the develop branch.
  • is descriptively named and links to an issue number, i.e. Fixes #123

@lindapaiste
Copy link
Collaborator Author

Hmm...hold off on merging this. Turns out that it interferes with the normal start command as the public/index.html seems to take priority.

@hydrosquall
Copy link

hydrosquall commented Oct 14, 2023

Thanks so much for looking into this and bringing this up to date with the latest code @lindapaiste !

Turns out that it interferes with the normal start command as the public/index.html seems to take priority.

What if we put the dev server templates into a different folder, like local-first-public/index.html and local-first-public/preview.html ? We could update the two calls to resolveAppPath in config.local-dev-server.js , leaving the main "public" folder clear for the usual start command.

Some people may want to use the existing dev server because they want to run the rest of the backend stack, but this "local-first" option should hopefully make life easier for those whose changes really don't depend on anything from the backend.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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