title: rollup.js svelte bundle not activating in index.html
body: <p>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.</p>
  <p>rollup.config.js</p>
  <pre><code>import svelte from &quot;rollup-plugin-svelte&quot;;
  import resolve from &quot;@rollup/plugin-node-resolve&quot;;
  import commonjs from &quot;@rollup/plugin-commonjs&quot;;
  import livereload from &quot;rollup-plugin-livereload&quot;;
  import replace from &quot;@rollup/plugin-replace&quot;;
  import { terser } from &quot;rollup-plugin-terser&quot;;
  import postcss from &quot;rollup-plugin-postcss&quot;;
  import babel from &quot;rollup-plugin-babel&quot;;
  
  export default {
    input: &quot;src/main.js&quot;,
    output: {
      sourcemap: true,
      format: &quot;iife&quot;,
      name: &quot;app&quot;,
      file: &quot;public/build/bundle.js&quot;
    },
    plugins: [
      babel({
        exclude: &quot;node_modules/**&quot;
      }),
     
      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 =&gt; {
          css.write(&quot;bundle.css&quot;);
        }
      }),
  
      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: [&quot;svelte&quot;]
      }),
      commonjs(),
  
      // In dev mode, call `npm run start` once
      // the bundle has been generated
      !production &amp;&amp; serve(),
  
      // Watch the `public` directory and refresh the
      // browser on changes when not in production
      !production &amp;&amp; livereload(&quot;public&quot;),
  
      // If we're building for production (npm run build
      // instead of npm run dev), minify
      production &amp;&amp; terser(),
  
      // for absolut imports
      // i.e., instead of
      // import Component  from &quot;../../../../components/Component.svelte&quot;;
      // we will be able to say
      // import Component from &quot;components/Component.svelte&quot;;
      aliases
    ],
    watch: {
      clearScreen: false
    }
  };
  </code></pre>
  <p>rollup -c will output the bundle.js. My index.html is below</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot; /&gt;
  
      &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;76x76&quot; href=&quot;/apple-icon.png&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/build/bundle.css&quot; /&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css&quot;
      /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/styles/tailwind.css&quot; /&gt;
      &lt;title&gt;Teach Me Sensei&lt;/title&gt;
  
      &lt;script&gt;
        if (process === undefined) {
          var process = { env: {} };
        }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body class=&quot;text-gray-800 antialiased&quot;&gt;
      &lt;noscript&gt;
        &lt;strong
          &gt;We're sorry but notus-svelte doesn't work properly without JavaScript
          enabled. Please enable it to continue.&lt;/strong
        &gt;
      &lt;/noscript&gt;
      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
      &lt;script src=&quot;/build/bundle.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here is a picture of what the chrome console looks like when running livereload. rollup -c -w</p>
  <p><a href="https://i.stack.imgur.com/rZw5i.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rZw5i.png" alt="a picture of the chrome console when running dev server" /></a></p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/JMBab.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JMBab.png" alt="A picture of the application being serve by anything other than livereload" /></a></p>