rollup-plugin-serve historyApiFallback not working

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?

Sep 03 '19 17:09 UIX-Design

@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.

Sep 11 '19 20:09 gabeins

@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(),
   ],
};

Sep 12 '19 11:09 UIX-Design

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.

Sep 12 '19 11:09 gabeins

@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?

Sep 12 '19 12:09 UIX-Design

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?

Sep 12 '19 12:09 gabeins

@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>

Sep 12 '19 13:09 UIX-Design

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

host is optional

Sep 12 '19 17:09 thgh

@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"
   },

Sep 13 '19 06:09 UIX-Design

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

Sep 15 '19 07:09 thgh

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

Sep 16 '19 08:09 UIX-Design

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

Sep 23 '19 22:09 thgh

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.

Mar 11 '20 20:03 virus2016

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

Mar 11 '20 20:03 virus2016

Do you mind checking if [email protected] has a working historyApiFallback?

Mar 16 '20 21:03 thgh

I can confirm the all Not wokings above .

Also tried [email protected] and still is not working.

Jul 08 '21 16:07 pylover