historyApiFallback not working #43

UIX-Design · 2019-09-03T17:01:15Z

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?

The text was updated successfully, but these errors were encountered:

gabeidx · 2019-09-11T20:21:28Z

@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 · 2019-09-12T11:15:20Z

@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 · 2019-09-12T11:34:14Z

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 · 2019-09-12T12:30:42Z

@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 · 2019-09-12T12:53:32Z

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 · 2019-09-12T13:04:43Z

@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 · 2019-09-12T17:29:57Z

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

host is optional

UIX-Design · 2019-09-13T06:28:17Z

@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 · 2019-09-15T07:01:10Z

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

UIX-Design · 2019-09-16T08:06:01Z

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

thgh · 2019-09-23T22:57:25Z

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

virus2016 · 2020-03-11T20:10:55Z

It's

rollup-plugin-serve/src/index.js

Line 38 in 0e17e03

if (error.code !== 'ENOENT') {

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 · 2020-03-11T20:13:06Z

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

thgh · 2020-03-16T21:34:56Z

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

pylover · 2021-07-08T16:24:34Z

I can confirm the all Not wokings above .

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

virus2016 mentioned this issue Mar 11, 2020

fix: Remove 500 error if file not found #56

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

historyApiFallback not working #43

historyApiFallback not working #43

UIX-Design commented Sep 3, 2019

gabeidx commented Sep 11, 2019

UIX-Design commented Sep 12, 2019

gabeidx commented Sep 12, 2019

UIX-Design commented Sep 12, 2019

gabeidx commented Sep 12, 2019

UIX-Design commented Sep 12, 2019

thgh commented Sep 12, 2019

UIX-Design commented Sep 13, 2019

thgh commented Sep 15, 2019

UIX-Design commented Sep 16, 2019

thgh commented Sep 23, 2019

virus2016 commented Mar 11, 2020

virus2016 commented Mar 11, 2020

thgh commented Mar 16, 2020

pylover commented Jul 8, 2021 •

edited

historyApiFallback not working #43

historyApiFallback not working #43

Comments

UIX-Design commented Sep 3, 2019

gabeidx commented Sep 11, 2019

UIX-Design commented Sep 12, 2019

gabeidx commented Sep 12, 2019

UIX-Design commented Sep 12, 2019

gabeidx commented Sep 12, 2019

UIX-Design commented Sep 12, 2019

thgh commented Sep 12, 2019

UIX-Design commented Sep 13, 2019

thgh commented Sep 15, 2019

UIX-Design commented Sep 16, 2019

thgh commented Sep 23, 2019

virus2016 commented Mar 11, 2020

virus2016 commented Mar 11, 2020

thgh commented Mar 16, 2020

pylover commented Jul 8, 2021 • edited

pylover commented Jul 8, 2021 •

edited