historyApiFallback not working

UIX-Design commented 5 years ago

Hi, thank you very much for this repo. I want to use the plugin for my new svelte spa app.

My config looks like this:

serve({
    contentBase: 'dist',
    port: 5000,
    historyApiFallback: true
}),

But the historyApiFallback isn't working. When i go to localhost:5000/solutions/technic i still get 404 Not Found and i don't see the index.html

How can i solve this?

gabeidx commented 4 years ago

@UIX-Design do you have a leading forward slash in your <script src="dist/bundle.js"> on index.html? If not, try to add it. I had the same issue and that fixed it.

UIX-Design commented 4 years ago

@gabrielizaias thanks for your answer, but when i change the script-tag in the index.html like this: <script src="dist/main.js"></script> it doesn't work. I still get 404 Not Found

I've also tried this: historyApiFallback: 'index.html' or historyApiFallback: '/index.html' or historyApiFallback: 'dist/index.html' - but doesn't work too.

my full rollup.config.js looks like this:

import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss';
import resolve from 'rollup-plugin-node-resolve';
import svelte from 'rollup-plugin-svelte';
import {terser} from 'rollup-plugin-terser';
import svelte_preprocess_postcss from 'svelte-preprocess-postcss';
import serve from 'rollup-plugin-serve'

const production = !process.env.ROLLUP_WATCH;
export default {
   input: 'src/main.js',
   output: {
      format: 'iife',
      sourcemap: true,
      name: 'app',
      file: 'dist/main.js',
   },
   plugins: [
      svelte({
         dev: !production,
         preprocess: {
            style: svelte_preprocess_postcss(),
         },
         css: css => {
            css.write('dist/components.css');
         },
      }),
      resolve(),
      commonjs(),
      postcss({
         extract: true,
      }),
      serve({
         contentBase: 'dist',
         host: 'localhost',
         port: 5000,
         historyApiFallback: true
      }),
      !production && livereload('dist'),
      production && terser(),
   ],
};

gabeidx commented 4 years ago

when i change the script-tag in the index.html like this: <script src="dist/main.js"></script> it doesn't work.

Does that mean you removed the leading forward slash? You have to add it, otherwise any request to a nested route like http://example.com/lorem/ipsum will try to load your script from http://example.com/lorem/ipsum/dist/main.js, which is why it fails.

There doesn't seem to be anything wrong in your rollup.config.js from what I can tell.

UIX-Design commented 4 years ago

@gabrielizaias Yes, when i add the leading forward slash like this <script src="/dist/main.js"></script> i also still get 404 - Svelte can‘t find the main.js file.

How can i solve the issue?

gabeidx commented 4 years ago

If you can confirm that the file exists in the file system at the correct path, then Rollup is doing its job. What's your index.html looking like?

UIX-Design commented 4 years ago

@gabrielizaias i hope we can find my issue

my index.html looks like this:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="msapplication-TileColor" content="#4e598c">
    <meta name="theme-color" content="#4e598c">
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/x-icon" href="/favicon/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/site.webmanifest">
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#4e598c">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="components.css">
    <title>Svelte App</title>
</head>
<body>

    <script src="main.js"></script>
</body>
</html>

thgh commented 4 years ago

Doublecheck that dist/index.html exists and set <script src="/main.js">

host is optional

UIX-Design commented 4 years ago

@thgh thanks for your help, but it doesn't work.

my project structure looks like this:

- project
     - dist
        - index.html
        - main.js
        - main.css
     - src
        - App.svelte
        - main.js
        - store.js
     - rollup.config.js
     - package.json

The dist/index.html exists, but my console say this:

I set in the index.html <script src="/main.js">, i also tried this config in the rollup.config.js

serve({
    contentBase: 'dist',
     port: 5000,
     historyApiFallback: 'dist/index.html'
}),

and i also tried to run npm run dev as admin on my macbook, but nothing working.

Here are my scripts from the package.json file:

"scripts": {
      "build": "rollup -c",
      "build:auto": "rollup -c -w",
      "serve": "sirv dist",
      "serve:dev": "sirv dist --dev",
      "dev": "run-p build:auto serve:dev"
   },

thgh commented 4 years ago

Try changing historyApiFallback: 'dist/index.html' To historyApiFallback: '/index.html' Or historyApiFallback: true

UIX-Design commented 4 years ago

@thgh I'd like to tell you something else, but nothing's changed.

thgh commented 4 years ago

Could be interesting to make a repo so we can see what's going wrong.

virus2016 commented 4 years ago

It's https://github.com/thgh/rollup-plugin-serve/blob/0e17e0359860a5e84fdd3174102e2edfcf3a0426/src/index.js#L38 that is causing this issue.

The below if statement should be on top then all will be well.

If I have time i'll do a pull request for this.

virus2016 commented 4 years ago

In fact, this error message should just be removed and let it do a 404

thgh commented 4 years ago

Do you mind checking if rollup-plugin-serve@2.0.0-beta.0 has a working historyApiFallback?

pylover commented 3 years ago

I can confirm the all Not wokings above .

Also tried rollup-plugin-serve@2.0.0-beta.0 and still is not working.

thgh / rollup-plugin-serve

historyApiFallback not working #43