[Resolved] Generating Plain HTML, CSS, and JS with Webstudio CLI
[Resolved] Generating Plain HTML, CSS, and JS with Webstudio CLI
At a glance
The community member had an issue with exporting a project when self-hosting the Webstudio builder. The export button did not provide vanilla HTML, CSS, and JavaScript, unlike the export feature in the Webstudio web app. After some discussion, the community members determined that to achieve the desired output, the user needs to run npm run build in the resulting folder generated by choosing the SSG template in the CLI. This will produce the final static files in the dist/client folder, which is similar to the output from the Webstudio web app's export button.
I read in the help section that when the builder is self-hosted, the export button does not work for exporting the project. Instead, I need to use the CLI. However, the CLI does not provide vanilla HTML, CSS, and JavaScript like the export button on Webstudio does. How can I achieve this when self-hosting the builder?
Thank you for your swift replies, much appreciated!
I tried the SSG template on the local builder, but the exported output includes dependencies and is not in vanilla JavaScript. The results I got are shown in the left image.
Meanwhile, when I export another project using the Webstudio web app's export button, I receive a simpler vanilla output, as shown in the right image.
I would like to achieve the latter while self-hosting the builder. How can I do this?
Ahaaaaaa 🤩 I ran npm run build in the resulting folder generated by choosing the SSG template in CLI and I got what I was asking for in dist/client 🎉 🎉 🎉 🎉 🎉
It’s probably due to my limited JavaScript knowledge and experience. 😅 I wasn’t aware that the built files go by default into the dist/client directory and that they would result in exactly what I needed. 🤭
Thank you, guys! You've been a huge help! 🫡
I think it might be helpful for newbies like me if you added something like this at the very end of the Build a Static Site section:
"Note: After running this command, the exported output will still contain dependencies. To generate a fully static vanilla HTML, CSS, and JavaScript version (similar to using the Webstudio web app’s export button), you must run:
npm run build
This will produce the final static files in the dist/client folder."
That way, it would look something like this in the docs (image attached). Of course, this might be obvious for people with JavaScript 101 knowledge. 😆 If that’s the case, feel free to ignore my suggestion! ^_^
