Better Webflow Custom Code Workflows (Typescript, VS Code)

//TRY WEBFLOW!

// FREE resources

// Premium content

// Discounts
🎢 Get 10% GSAP: WEBBAE10

// Connect

⬇️ Share your development environment below! ⬇️

// Timestamps
00:00 Intro
00:15 Agenda Overview
01:42 Scaffold the page in Webflow
03:50 Webflow Code Editor - Change text on button click
08:52 Webflow - CMS Slider from Splide
11:35 Webflow Code Editor - Splide Setup
14:45 Fix Splide Styles
16:10 Live Debugging Splide
27:00 VS Code Project Setup
28:20 Serving code to Webflow from VS Code
31:10 Parse Typescript with esbuild
37:05 Bundling Splide with esbuild
39:30 Create a build script
42:10 Create a build configuration file
44:20 Minify code
45:40 Typescript compiler and esbuild TS limitations
51:10 Serving Code from Github with jsDelivr
1:02:19 Outro

[HeyNoah]

A trick to formatting in Webflow is highlighting all the code you want to format and press "shift + tab"
Just a little tip 😉 Great video!!

[kudz]

Great video!
I want to start exploring how to use threejs in webflow and this is a great start. We need more videos like this 👍👍👍

[labruda]

I just discovered you recently through the Webflow Conf...your channel is AMAZING.
This is truly THE BEST tutorial I've seen about CDN <3 thank you!

[JimmyCeeTV]

God damn did I need this kinda Webflow+JS info like months ago! Still great to find it now. Awesome resource 👏

[gjb]

super helpful! been really enjoying your content ⚡🔥

[kudz]

Update:
If you try to run "build-by-file" it will throw an error because of the "watch:true" option in your builder.ts file. This was an intentional change made to esbuild beyon v0.16.


I wanted to figure out how to make it work in v0.17 but it's 1 AM and I'm not ready to read through all that documentation😛

[qamar]

Hi Web Bae,

I have used your method to host a file on CDN, I was thinking how to host multiple files for same project? how to modify outfile? can you make a video on that?

[seb-astian-design]

Hi, idk why but my link doesn't get highlighted in the inspector and it's also missing in the source panel. I've done exactly what you've shown.

[Grifanos]

Thanks, Keegan, at least I have an environment to write custom JS. I'm not familiar with Typescript, do you have a video where you explain what TypeScript is and why it helps us with Webflow custom code?

[Grifanos]

I to serve the js code from JSDeliver safe? I mean, I like the idea of serving all my custom code from one place and minified, but is this the real-life method? Are you done this fro clients' projects too?

[beamdotd]

Hey Keegan, great vid, thank you! I am having an issue I'm hoping you can help me with. When I try to import code from sandbox to webflow, I get a CORB error when I publish the code. Can you explain how I can prevent this?

[ihsaan]

Hey Web bae, Alex just added live reload to the finsweet starter template, how would you implement it in this workflow? Thanks.

[liamlegaillard]

Why i can't add "serve": "serve" like you at 29:24