Preact-cli: Example proxy breaks SPA functionality

Created on 18 Jun 2019  路  3Comments  路  Source: preactjs/preact-cli


Do you want to request a _feature_ or report a _bug_?
Bug / Documentation fix

What is the current behaviour?
Using the example proxy code breaks the single page app feature.

If the example proxy code is used then when navigating directly to anywhere but the route the SPA will not be served to you. These pages still work when you go to them via a link on the home page.

If the current behaviour is a bug, please provide the steps to reproduce.

  1. preact create default with all default settings
  2. move into app i.e cd app
  3. npm run dev
  4. verify SPA functionality is working by navigating directly to localhost:8080/profile
  5. create the preact.config.js and add the following from the config recipes
    js export default (config, env, helpers) => { config.devServer = { quiet: true, proxy: [ { path: '/api/**', target: 'http://api.example.com', // ...any other stuff... } ] } }
  6. reload the server Ctrl-C and npm run dev
  7. Navigate directly to localhost:8080/profile again to show that SPA is broken

Cannot GET /profile

What is the expected behaviour?

  • The SPA functionality should still work even with a proxy
  • The example proxy shouldn't break the site

Please mention other relevant information.

  • Node version: v10.15.3
  • npm version: v6.4.1
  • Operating system: Ubuntu 19.04
  • CLI version: preact-cli 2.2.1
  • Browser: Chrome 75
docs question

All 3 comments

Changing the example to this would avoid overwriting the other devServer settings. Which would stop the example code breaking stuff and help avoid confusion.

export default (config, env, helpers) => {
    config.devServer['proxy'] = [
        {
            path:'/api/**',
            target: 'http://api.example.com',
            // ...any other stuff...
        }
    ]
}

It looks like this is what used to be in the wiki, but it was changed at some point

https://github.com/preactjs/preact-cli/wiki/Config-Recipes/_compare/01a18e56a6e613a273c0d654c25b6bd104758003...a404dae65d956422f84fa7a984c5a07a2590a59c#diff-1e29ab5c585666f64d9aef04f7ae9e33L49

no idea why it was changed, the old one was correct

Changed it back

Was this page helpful?
0 / 5 - 0 ratings