Undocumented caveat with client-side routing when running Netlify Dev with Parcel

[yanneves]

I was setting up an existing project that uses Parcel v1 to build to work with netlify dev. It was fairly easy to set up _redirects using parcel-plugin-static-files-copy but I wasn't sure why the client-side routing redirect wouldn't work - and assumed this was just a limitation of netlify dev.

In _redirects

/api/* https://api.example.com/:splat 200
/* /index.html 200

But while moving some scripts around in package.json I realised I could make client-side routing by using only one target file in the Parcel command. For example, parcel src/index.html rather than parcel src/index.html src/styleguide.html.

I'd love to contribute this to the docs if there's somewhere appropriate. Or we could consider this a bug, where navigating to localhost:8888/* should proxy index.html and localhost:8888/styleguide.html should find styleguide.html before proxying. That would be consistent with Netlify App.

[erezrokah]

Hi @yanneves, I'm not sure I understand the issue.

Can you describe the expected behavior vs the actual one and provide a way to reproduce it?

Specifically I'm not sure what

client-side routing redirect wouldn't work

means

Maybe it's related to #1242?

[yanneves]

Here's a repository that reproduces the issue yanneves/netlify-cli-2062

I've added steps to the README.md file in there, but for convenience these are the steps:

To try locally, first run npm install

Scenario: Parcel bundler has multiple entry files [fail]

• Set netlify.toml to use npm run dev:all command:

# netlify.toml
[dev]
  command = "npm run dev:all"

• Run npm start
• Should see index.html contents at http://localhost:8888
• Should see styleguide.html contents at http://localhost:8888/styleguide
• Should see index.html contents at http://localhost:8888/some-path -- this fails!

Scenario: Parcel bundler has a single entry file [pass]

• Set netlify.toml to use npm run dev:app command:

# netlify.toml
[dev]
  command = "npm run dev:app"

• Run npm start
• Should see index.html contents at http://localhost:8888
• Should see index.html contents at http://localhost:8888/some-path

And for completeness here, the commands referenced above are as follows:

{
  "scripts": {
    "dev:all": "parcel index.html styleguide.html",
    "dev:app": "parcel index.html"
  }
}

[erezrokah]

Thanks for the detailed reproduction @yanneves, I was able to reproduce and also noticed that if you use a redirect (remove the 200 status code) this works.

I'm still looking into why this doesn't work for rewrites.

[yanneves]

No problem 👌

Ah, interesting - if it's any help, I learned that 200! config will work but redirects everything including scripts / styles.

[sarahetter]

Closing as stale. Please re-open if needed