How to make index.html appear in svelte npm run build

Question

Hi guys i am new to Svelte and i have a question.

I have made a small app in svelte that runs smoothly in dev.

But when i am running npm run build for production the output in the public folder are 3 itemsbundle.css bundle.js and bundle.js.map There is no index.html Can anyone please help me because as it seems the public folder should have the index.html in it.

Stephane Vanraes · Accepted Answer · 2020-12-11 06:20:32Z

1

The starter template assumes the index.html and all other static files (favicon, images, ...) are already in your public folder. They do not get any special treatment from the build script. If you want to copy extra files during build you can use special plugins for that.

rollup-plugin-copy-assets could be an option

answered Dec 11, 2020 at 6:20

Stephane Vanraes

16.5k3 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Vasilakopoulos Over a year ago

So if i want to take all the necessary items for production i take the items in build folder and the index html outside of this folder? In order to paste it in web host directory?

user2528534 Over a year ago

This is the right answer. OP may have assumed that public should be gitignored and that its content is generated at build time. That's not the case. Instead, public should be part of your repo, the index.html, global.css and favicon.png (and anything else) should remain in there and the subfolder build is the only thing that gets .gitignored and built at compile time

Nick Vasilakopoulos · Accepted Answer · 2020-12-12 01:15:38Z

1

So i found my answer. After i builded the proj, i pasted in the webhost all the items from public folder(assets,build,rest of items) and it worked . It was an issue with host also.

answered Dec 12, 2020 at 1:15

Nick Vasilakopoulos

431 silver badge4 bronze badges

Comments

Brady · Accepted Answer · 2020-12-12 21:06:47Z

0

The public folder should contain a subfolder named "build", inside that folder is where the bundle files should be located. Your static assets, the index.html file, and service-worker.js (if used) should reside in the public folder along side the build folder.

Setup a base project again and look for the index.html file in the public folder before writing a single line of code.

$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project
$ npm install
$ npm run dev

edited Dec 12, 2020 at 21:06

answered Dec 11, 2020 at 15:18

Brady

4292 silver badges7 bronze badges

2 Comments

Nick Vasilakopoulos Over a year ago

Yeah the structure is as you said but this wasnt the problem i was addressing. The build folder must contain as i suppose all the necessary js and static files for production. I dont know how recreating an empty template will help in my situation tbh.

Brady Over a year ago

The workflow for svelte is to first run "npm run build" and then copy all objects inside the public folder to your static hosting bucket. This includes the build folder as well as all the objects outside the build folder but inside the public folder. Re-creating the starter project was a check to ensure there were no errors in the base configuration on your computer.

Collectives™ on Stack Overflow

How to make index.html appear in svelte npm run build

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related