Hello Everyone 
New to Java script so appologies if this is a dumb question, I am trying to deploy my webpage and it is building sucessfully however whenever I visit the webpage I get:
The website can be found here: https://main--aom-swgoh.netlify.app/
404 Not Found
I belive this is because my bundle.js is returning error 404 when it shouldnt be. When I deploy the site locally with npm build or npx serve it works fine and everything is where it should be. When deployed locally the public folder has the correct index.html file and the build folder has the correct bundle[hash].js
Any advice would be appriciated as I am completly lost at this point. The site is currently hosted at
Here is index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SWGoH Status</title>
<link rel="icon" type="image/png" href="/favicon_chewie.png">
<link rel="stylesheet" href="/bundle.[hash].css">
<script defer="" src="/bundle.[hash].js"></script>
</head>
<body>
</body>
</html>
Here is Rollup.config.js
import fs from 'fs';
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 { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import posthtml from 'posthtml';
import { hash } from 'posthtml-hash';
import rimraf from 'rimraf';
import copy from 'rollup-plugin-copy';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
function hashAssets() {
return {
name: 'hash-assets',
buildStart() {
rimraf.sync('build');
},
writeBundle() {
posthtml([
hash({ path: 'build/' }),
])
.process(fs.readFileSync('./build/index.html'))
.then((result) => fs.writeFileSync('./build/index.html', result.html));
}
}
}
export default {
input: 'src/main.ts',
output: {
sourcemap: !production,
format: 'iife',
name: 'app',
file: 'build/bundle.[hash].js'
},
plugins: [
copy({
targets: [{
src: 'public/*',
dest: 'build',
}],
}),
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.[hash].css', !production);
},
preprocess: sveltePreprocess(),
}),
// 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(),
typescript({
sourceMap: !production,
inlineSources: !production
}),
// 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('build'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser(),
production && hashAssets()
],
watch: {
clearScreen: false
}
};
lastly here is tsconfig.json
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}
I’m not sure if what I’ve provided here is enough to give a detailed answer so if I can provided anything further please let me know.