VS Code + Webflow = 😍

[@webflowandcode]

One thing I forgot to say is obviously with VS Code you get all the benefits of AI (if you're subscribed) and code hinting which you don't get writing code directly in Webflow. Don't forget your merch: flowst8.dev/store Join the community: twitter.com/i/communities/1737357986903753004

[@LoneRanger.801]

Accidentally discovered your channel. What a find! 😊

[@webflowandcode]

Welcome aboard!

[@nanozone3706]

thanks man

[@webflowandcode]

No problem!

[@TOM-gw3pi]

with this, could I design my code on webflow and then it automatically updates on vs code?

[@webflowandcode]

No. What are you trying to achieve by doing this?

[@qamar7]

This is really helpful! Have you installed gsap using npm in VS code or using cdn in Webflow?

[@webflowandcode]

NPM

[@qamar7]

@@webflowandcode similarly we use for three.js I hope. Can you make a tutorial how to publish these file to GitHub over cdn?

[@webflowandcode]

Already done. Search “hosting” “assets” or “serve images next gen”. It’s all the same concept. Ps I’m deeply against using a service like jsdelvr + GitHub for commercial projects which a lot of content creators promote. Personal projects, fine so if this is relevant, search that.

[@qamar7]

@@webflowandcode Ohh okay, but what if the code exceeds more than 10000 chars then how do we host it? I think we should not use github we shall use npm. Any tutorials on that how to host on npm+jsdeliver?

[@webflowandcode]

It’s painfully easy to do. You shouldn’t need a tutorial. Just go to JSDelvrs website. You just paste the URL of your files into the input field

[@MatthewJaekel]

just to clear my confusion, this code could then be pushed to github and then i could use a cdn to deliver it to webflow?

[@webflowandcode]

Exactly that.

[@tancdiscovery9432]

Im guessing this works for CSS files too?..

[@webflowandcode]

Yes but this requires setup that’s not mentioned at all in the video. Please look into MiniCssExtractPlugin and the documentation tells you exactly how you’d go about this

[@tancdiscovery9432]

Cheers man, will look it up. Using codesandbox for the most part , but its buggy, never remembers your setting & doesn't have AI @@webflowandcode

[@webflowandcode]

I did a bit of research this morning on this. Really code sandbox is a development environment. It's not really for the sort of thing you're using it for. Maybe for pet projects and playground but commercial applications and client work I think you really need to look for an appropriate solution like what we've described here or Slater.app.

[@dane6752]

Hi @webflowandcode. Thanks for the awesome tutorial. However I'm having an issue where Webflow is refusing to run the code: "not allowed to run insecure code from localhost..."

[@webflowandcode]

I had this issue in Brave browser and used Chrome. What browser are you using?

[@dane6752]

@@webflowandcode Thanks for replying, I was not expecting a response on a Sunday you absolute legend! I was using chrome. A while back I remember reading that Webflow only runs code served from https else it throws this error. After watching your video I thought local-host may have been an exception to the rule but I still seem to be getting the error. I usually use code-sandbox which serves from https but I would love to get a local vs-code setup running like you have in your video. For full disclosure, I haven't tried using Webpack yet. In testing I just severed a test project with a js file using (npx http-server). Not sure if the Webpack setup itself could be doing anything to prevent the error perhaps?

[@webflowandcode]

Check out my video on proxyman. It might add a bit of extra insight. kzbin.info/www/bejne/eaHci4Wmn7NqatEsi=lEhRhgl9kg0eUiG9

[@ajuhpark]

Hi, thank you for the tutorial. I’m curious about workflow. When I’m working on the js file, I run the server to check things out but it affects my production site. I understand that when I turn the server off, my site is back to normal until I push the changes but is there a way to possibly only work on the staging site that webflow offers and then have it work on production when it’s ready? Or if you have a different workflow solution that doesn’t show my js changes on the production site, please let me know.

[@webflowandcode]

This is a pretty complicated setup. You might look into slater.app for this

[@ajuhpark]

@@webflowandcode Thank you, I will check it out. For now, I just did a makeshift solution of putting the setup code to in webflow and only publishing the staging site so that's the only site that the js file can affect.

[@webflowandcode]

Ok but just to be clear, when you run your code locally in this way, this doesn’t actually affect the live site (production or staging). It’s literally just on your machine that the code runs.