A proof-of-concept integration of Vite.js (modern JS/assets bundler) with Phoenix + Liveview

IIRC, the publicDir: "./static config, copies everything from assets/static to priv/static. So there should be no problem in deleting those files in development. Make sure you are not mixing approaches like the one used with the new esbuild (where everything is put directly into priv/static).

What do you mean exactly? By changing that config above files are copied but the directory is not erased. For sure you could also move those files but I don’t see much of a difference of both solutions.

The emptyOutDir config empties the priv/static directory, which is the default behavior you get from Vite to make things easier to check while in development. But here we have to configure it manually to do that.

You mentioned that your robots.txt file was being deleted from priv/static, but you are not supposed to keep the original files there. Using the config I provided, everything from assets/static is copied over to priv/static (both files and directories). So, if you want to keep your robots.txt file, it should be placed inside assets/static - like we used to do before esbuild.

The emptyOutDir config defaults to true because otherwise, you would end up with old trash being kept in the outDir while you organize your files (eg: if you rename files or remove directories from the publicDir) which is not desirable in the majority of cases.

Could you kindly update this article to work with Phoenix 1.7? I am new to Phoenix, I have tried several options by reading a few articles online as well as consulting chatGPT but non is working.

Phoenix 1.7 uses esbuild, so you shouldn’t need Vite, unless you really want to. In that case, I recommend that you take a look at the getting started guide - it shouldn’t be that different.

I was talking about an article on how to integrate Bootstrap into phoenix 1.7. I tried out your instructions above but they didn’t work. I want to removed tailwind css and replace it with bootstrap

Have you checked this comment? You shouldn’t need anything special to integrate Bootstrap with Phoenix 1.7. I’d say that it’s even easier now that we have the Esbuild CLI built-in.

I think if you just follow the instructions on the docs you’ll get it to work, they even have a Vite-specific section there now: Get started with Bootstrap · Bootstrap v5.3.

About the thread, I won’t be updating it because the focus here is on ViteJs. However, I’m almost sure if you search the forum you’ll find threads like this one that goes step by step on how to configure Bootstrap itself: Phoenix 1.7 Bootstrap CSS for Core Components.

Cheers!