Webstudio
Log in

Join the Webstudio community

Updated 3 months ago

Connecting VS Studio with Webstudio for Local and Production Development

At a glance

The community members are discussing ways to connect Visual Studio (VS) Studio with Webstudio for local and production development. They mention using Finsweet's TypeScript template and Vite combined with Cloudflare Workers, but are looking for a solution that allows them to push scripts directly to production smoothly. The comments suggest embedding the scripts into the website, using a staging environment to test changes before pushing to production, and potentially using GitHub to host the scripts and embed them via a CDN like jsDelivr.

MMikhael
Hey is there a way to easily connect VS Studio with Webstudio for local development and maybe even production development?

I know finsweet has a github dev template based on typescript, and some others used Vite combined with cloudfare workers. But yet to find a solution that let’s me
push scripts directly to production smoothly.
O
M
M
19 comments
OOleg Isonen
hi, basically you have custom scripts included on the page and you want to edit them locally and push to some place for production?
MMikhael
That's right, attached you can see example structure. Preferably I'd skip embeds and just host those js files
Attachment
Screenshot_2024-08-29_at_12.55.29.png
OOleg Isonen
well you def. need to embed it into the site in some way and only then edit it
OOleg Isonen
also you will want to only push it to prod when its ready and have a staging and prod versions so you can test things on stagin (yoursite.wstd.io)
OOleg Isonen
we are adding ability to publish separately to staging right now
OOleg Isonen
how are you doing it right now in webflow?
MMikhael
I embed the code thats finished, either in html or with CDN jsdeliver.
For local testing I use Finsweets typescript template.
MMikhael
But I want to skip that part and be able to publish straight to production through an IDE
OOleg Isonen
to production you can push it by embedding it directly from production
OOleg Isonen
e.g. you could use github for that
OOleg Isonen
you can push your script to github, embed it into your site via jsdeliver
MMikeoxygen
I am trying to do something similar for local development. i am using this template ( https://github.com/Blazing-Mike/vite-webstudio) i put this code into an html embed but nothing happens.

<script type="module" src="http://localhost:3000/@vite/client"></script> <script type="module" src="http://localhost:3000/js/index.js"></script>

what am i doing wrong
MMikeoxygen
so i put it in the head in custom code section of project settings instead. still not working though
OOleg Isonen
  • Check your console for errors
  • Try loading those js files from the browser and see if you are even providing them from your local server
MMikeoxygen
The description in head says it custom code only have effect on published site
MMikeoxygen
can this be the issue
MMikeoxygen
When I preview my site I can't see this script but when I publish o see the script showing in the head
OOleg Isonen
Yes project settings scripts will not be executed on canvas, put it into html embed
MMikeoxygen
@Mikhael what your local development setup for webstudio and how did you get it to work. would appreciate help here.
Add a reply
Sign up and join the conversation on Discord
\nwhat am i doing wrong","dateCreated":"2025-04-06T19:25:53.321Z","dateModified":"2025-04-06T19:25:53.321Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/9e1318c8-24c1-4128-9f53-d48cf8129d0a","name":"Mikeoxygen","identifier":"9e1318c8-24c1-4128-9f53-d48cf8129d0a","image":"https://cdn.discordapp.com/avatars/797038367724011550/abedd9c40201583d807e94423a3b7013.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0},{"@type":"Comment","text":"so i put it in the head in custom code section of project settings instead. still not working though","dateCreated":"2025-04-06T19:47:38.160Z","dateModified":"2025-04-06T19:47:38.160Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/9e1318c8-24c1-4128-9f53-d48cf8129d0a","name":"Mikeoxygen","identifier":"9e1318c8-24c1-4128-9f53-d48cf8129d0a","image":"https://cdn.discordapp.com/avatars/797038367724011550/abedd9c40201583d807e94423a3b7013.webp?size=256"},"commentCount":0,"comment":[],"position":13,"upvoteCount":0},{"@type":"Comment","text":"Check your console for errorsTry loading those js files from the browser and see if you are even providing them from your local server","dateCreated":"2025-04-06T19:56:54.136Z","dateModified":"2025-04-06T19:57:14.487Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":14,"upvoteCount":0},{"@type":"Comment","text":"The description in head says it custom code only have effect on published site","dateCreated":"2025-04-06T20:36:34.225Z","dateModified":"2025-04-06T20:36:34.225Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/9e1318c8-24c1-4128-9f53-d48cf8129d0a","name":"Mikeoxygen","identifier":"9e1318c8-24c1-4128-9f53-d48cf8129d0a","image":"https://cdn.discordapp.com/avatars/797038367724011550/abedd9c40201583d807e94423a3b7013.webp?size=256"},"commentCount":0,"comment":[],"position":15,"upvoteCount":0},{"@type":"Comment","text":"can this be the issue","dateCreated":"2025-04-06T20:36:40.832Z","dateModified":"2025-04-06T20:36:40.832Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/9e1318c8-24c1-4128-9f53-d48cf8129d0a","name":"Mikeoxygen","identifier":"9e1318c8-24c1-4128-9f53-d48cf8129d0a","image":"https://cdn.discordapp.com/avatars/797038367724011550/abedd9c40201583d807e94423a3b7013.webp?size=256"},"commentCount":0,"comment":[],"position":16,"upvoteCount":0},{"@type":"Comment","text":"When I preview my site I can't see this script but when I publish o see the script showing in the head","dateCreated":"2025-04-06T20:37:10.218Z","dateModified":"2025-04-06T20:37:10.218Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/9e1318c8-24c1-4128-9f53-d48cf8129d0a","name":"Mikeoxygen","identifier":"9e1318c8-24c1-4128-9f53-d48cf8129d0a","image":"https://cdn.discordapp.com/avatars/797038367724011550/abedd9c40201583d807e94423a3b7013.webp?size=256"},"commentCount":0,"comment":[],"position":17,"upvoteCount":0},{"@type":"Comment","text":"Yes project settings scripts will not be executed on canvas, put it into html embed","dateCreated":"2025-04-06T20:49:50.499Z","dateModified":"2025-04-07T11:05:48.017Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":18,"upvoteCount":0},{"@type":"Comment","text":"@Mikhael what your local development setup for webstudio and how did you get it to work. would appreciate help here.","dateCreated":"2025-04-07T11:00:49.007Z","dateModified":"2025-04-07T11:00:49.007Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/9e1318c8-24c1-4128-9f53-d48cf8129d0a","name":"Mikeoxygen","identifier":"9e1318c8-24c1-4128-9f53-d48cf8129d0a","image":"https://cdn.discordapp.com/avatars/797038367724011550/abedd9c40201583d807e94423a3b7013.webp?size=256"},"commentCount":0,"comment":[],"position":19,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/3aa5f5d7-88bd-4dec-a5a8-9f7eff77c68f","name":"Mikhael","identifier":"3aa5f5d7-88bd-4dec-a5a8-9f7eff77c68f","image":"https://cdn.discordapp.com/avatars/790283390557356042/f81ceaea23b2d5d6a8a484caed0f2146.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]