rollup.js svelte bundle not activating in index.html

I am trying to deploy my svelte project, but I am having trouble having the bundle javascript activate outside of livereload plugin. When I run rollup -c -w, the code displays fine, but serving the application with other server does not activate the javacsript. It should at least console.log something and hopefully add the html, but it only display a blank page.

rollup.config.js

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import replace from "@rollup/plugin-replace";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import babel from "rollup-plugin-babel";

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js"
  },
  plugins: [
    babel({
      exclude: "node_modules/**"
    }),
   
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: css => {
        css.write("bundle.css");
      }
    }),

    postcss(),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ["svelte"]
    }),
    commonjs(),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),

    // for absolut imports
    // i.e., instead of
    // import Component  from "../../../../components/Component.svelte";
    // we will be able to say
    // import Component from "components/Component.svelte";
    aliases
  ],
  watch: {
    clearScreen: false
  }
};

rollup -c will output the bundle.js. My index.html is below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon.png" />
    <link rel="stylesheet" href="/build/bundle.css" />
    <link
      rel="stylesheet"
      href="/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css"
    />
    <link rel="stylesheet" href="/assets/styles/tailwind.css" />
    <title>Teach Me Sensei</title>

    <script>
      if (process === undefined) {
        var process = { env: {} };
      }
    </script>
  </head>

  <body class="text-gray-800 antialiased">
    <noscript>
      <strong
        >We're sorry but notus-svelte doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <script src="/build/bundle.js"></script>
  </body>
</html>

Here is a picture of what the chrome console looks like when running livereload. rollup -c -w

Here is a picture of what the chrome console looks like in production or other servers. rollup -c and just serve the static content. I am not sure if livereload does something special for the javascript, but in my other servers, I made sure to serve the public folder. I can view the bundle.js in the console.

Solution

Okay, I have solve this problem, but I do not understand why. I will share what I have discover and come back an update as I understand more. First, the reason why, I was having trouble in production is that I was trying to access {production_url}/index.html. For whatever reason, I was unable to get svelte to hydrate the frontend via calls to the index.html even though the html could retrieve all the necessary javascript and css. However, once I fixed the static references for the route {production_url}/, it hydrated my app correctly. The same affect could be seen in localhost. localhost:5000/ hydrates correctly but localhost:5000/index.html would not hydrate.