How to Import Custom Code into Webflow

Today, we are setting up a template to import some custom code into Webflow.
Link to Armand's Twiiter : / armandsalle
Link to the repository : github.com/arm...
------------
We created a series of courses for freelancers, web designers, Webflow developers, and business builders.
CREATE HIGH-END WEBSITE FROM A TO Z ► www.tambien.st... (Coming Soon)
------------
Discover the behind the scene of the studio with our weekly podcast
PODCAST ► open.spotify.c...
------------
Stay up to date with our latest news by joining our Newsletter:
NEWSLETTER ► www.tambien.st...
------------
Share with our community on Discord :
DISCORD ► / discord
------------
We created free tools to help Webflow developer to have an easier life:
Our Style Guide ► www.tambien.st...
Fluid Responsive ► www.tambien.st...
------------
Other links
WEBSITE ► www.tambien.st...
TWITTER ► / tambien_studio
LINKEDIN ► / tambienstudio
INSTAGRAM ► / tambien_studio

[@armandsalle8447]

That’s so a great idea 💡 I’m wondering why I didn’t use this setup before 🤔 I will use it for my next project for sure ❤️

[@davidprioul]

😁

[@dimitrisqq]

siiiiick! Thank you Armand!

[@carlyharvey7880]

This is so awesome. Thanks so much for the step-by-step walkthrough.

[@alextourgis]

Thanks, i'm glad you like it :)

[@LoneRanger.801]

Accidentally found your website. What a great find. 😊

[@thematteovalentino]

I followed the tutorial step by step but netlify has problems with the dependencies. Can someone help me?

[@templa946]

The moment I delete everything but "import './styles/style.css' " in the main.js file it stops working, both the JS & CSS do not load. Also the moment I add any JS, perfectly good code, everything stops working. If I add a single space at the end of the code it stops working

[@rannjanjoawn]

This is really awesome Tambien! Thank you for this! Would there be any episode where you can show how to host stylesheets outside webflow while working on the project and whenever we make the changes ..we just need to refresh the page. And when going live finally place all the final css codes on the webflow site?. That would be cool!! Thanks

[@dpk_10]

Absolute genius 👏 🙌 👌 😍 ❤️ ✨️ 👏

[@pablocortes682]

This is awesome, thank you so much!

[@alextourgis]

Thanks a lot Pablo :)

[@tancdiscovery9432]

Is there a way of splitting up the code so that it goes to different pages on the site. I need different different css on different pages. Can do ti through codesandbox, but it woul be great here as the refresh is instant.

[@jorgesa4244]

Can we use that to webscrap another site? One problem I find with this low code tools is that we can't webscrapt to have dynamic data on the site. Do you know if this works for that?

[@Otto-D]

Coucou, est ce que c'est une extension qui te permet d'avoir des explications de définitions quand tu hover au-dessus d'un terme dans VSC ? Merci pour la video!

[@user-dj6cm1cf6c]

This is cool! Thanks a lots!

[@hakanaki]

I bought a website template from Envato, is it possible to import it to webflow?

[@ylee150]

Amazing.

[@alextourgis]

Thanks a lot

[@labruda]

This is awesome! Thank you for the video. Do you know if this method works with a very visited page? Or netlify would break due to the bandwidth limits? Isn't it better to use a cdn provider?

[@konohadesign1471]

Hi, seems interesting. Just one question: What is the advantage of using webflow? Couldn't you handcode the HTML/CSS yourself as well? Just discovered webflow, so i was wondering about that. Thank you

[@alextourgis]

Yes you could but webflow is so much faster ! A lot of people who use webflow are designers who prefer to focus on improving their design skills than to learn how to code so webflow is a good option ! But i think it's also a great solution for front-end developers, building the page in webflow is much more enjoyable and fast than to code it from scratch, and once the page is built you can import any modules you want using the template

[@salzpro]

Hey, is it possible if project uses react? Or maybe just parcel to compile js?

[@gemin1546]

Thanks so much for this! For page specific code, are you just seperating them into their own module in the vite project? Is there a better way to seperate out code that's page specific?

[@alextourgis]

Using page specific files is working fine for me but i guess it depend on the project you are working on!

[@Ujwl666]

I just want to know what if we design some components in webflow and add this, would this overwrite the components we added ?

[@alextourgis]

I'm not sur i understand the question, but this would not overwrite any components created in webflow as it is just javascript !

[@cloutcobain123]

I got a script from Codrops and they have no instructions. Can I use it for that? I'm new to this, sorry for the noob question.

[@alextourgis]

I would need more informations to help you with that, we have a discord where you can ask your questions if you want to join i'll be happy to help you : discord.com/invite/XvVn7QQpdw :)

[@bamojk]

Genius! have you tried to import a complex ThreeJS project with custom shaders? would it still be working in the Webflow? I've been planning to do this for a long time, so thank you!

[@MilesRoxas]

I know you posted this 10 months ago but yes. it works! the beauty of this approach is you can install dependencies as much as you want and will never really get any CORS issues or other weird things. Just build like you would normally and it all renders on webflow just fine.

[@user-rx8jv5iv2t]

What if the machine is shutdown. is the website is going to offline ?

[@alextourgis]

I show how to host your code on Netlify at the end on the video so you don't have that problem

[@liamgrosjean]

Does Devlink allow us to avoid this process ?

[@alextourgis]

Its seems like DevLink allows us to take components built in Webflow to React ! This template allows us to write our code in VS Code and import it in webflow without having to use the basic code editor!

[@liamgrosjean]

@@alextourgis could we import some python for the back end of a webflow website ?

[@user-mr8ng9er1k]

that prettier formatting is nerving the shit out of me😭😭😭

[@vinceofscandal]

thanks really interesting but for me just NOTHING IS WORKING lol

[@alextourgis]

Don't hesitate to tell me what kind of error you get or where you're stuck because it's hard for me to help you without any information ! You can also join our discord, it's a good way for us to exchange and give people more details about the videos : discord.com/app/invite-with-guild-onboarding/XvVn7QQpdw

[@vinceofscandal]

@@alextourgis oh thats really nice from you to answer. Well i followed your steps until npm install command where ive got my first error telling me that this command does not exist... Restarted visual and worked. Then "npm run dev" gave me error about "delete cr prettier/prettier". I tried many solutions found online and decided to ignore. Finally load the code in webflow and new error in the console while testing like in your video. As i said, nothing really worked out for me ...

[@vinceofscandal]

@@alextourgis just in case, iam french

[@alextourgis]

I'll answer is English just in case that could help people with the same problem ! :) First make sur you have node installed on your computer ! Then it looks like the error comes from prettier, go to extensions in VS Code and install it ! If you want more help or informations you can also join our Discord discord.com/invite/XvVn7QQpdw ! I'll be happy to help you make this work as this has been a game changer for me :)

[@vinceofscandal]

@@alextourgis thx again for your Time. Well iam using codesandbox instead now. I did all you suggested in your answer but still didnt manage to make it work. Btw iam following your chanel keep UP the good content !