Streaming live at 10am (PST)

Import webflow.js to Reactjs App


#1

Hi!

Hi! I´am integrating webflow with react. I want to know if necessary to require the webflow.js file in my React App. If yes, How does I can do that? i´ve used require() but a “an error has occured” message appears inmediatly the page is showed.

Thanks in advanced!


#2

Yes, if you are using any Webflow components on your site, like Slider, Lightbox, Dropdown, Forms, Interactions, etc. How to integrate I’m not so sure about that.


#3

@jmcataldo Could you elaborate on exactly how you’re trying to integrate Webflow and React? In a nutshell, I would expect you’ll have a hard time using Webflow-built stuff inside a React project, but it shouldn’t be too difficult to use React-built components within a Webflow project, provided you can hook them up with custom code/embeds.


#4

You might be able to pull this off by having shouldComponentUpdate return false; but this also means you’ll need to manually manage any state/rendering the component needs to do.

To @jmcataldo’s origininal question:

How you include it will depend on exactly how you’re integrating it… but at a high level, Webflow’s bundle is configured and built specifically for the dependencies on your site (note: currently per-site, not per-page); if you look at the source of your published page, you’ll see at least 2 scripts included by webflow: jquery (currently 2.2.0), and the webflow.js bundle, which should have a cache-buster name like webflow.e4ebd3d34.js.

You’d need to include jQuery and the Webflow bundle in your app’s page; note these are bundled for use in a webpage, and are not intended to be used in a Node.js environment (you could probably get around this with jsdom). You can access the Webflow global; requiring this via a bundling tool will require a special hack, such as Webpack’s externals directive.

Hope that helps.


#5

Btw, we’d love to see what this turns into. Always exciting to see people pushing the boundaries of Webflow.


#6

Hi Lou! I’ am very happy surprised about your engagement (including David too) with my issue. I really appreciate it!

The current stack i´am trying to put to work is the following:

  1. Designing, prototyping and css with the benefits of Webflow.
  2. Leverage a static site with Next.js
  3. Data Fetching with Firebase.

But some challenges did appear from the begining:

  1. Learn the webflow tool: fortunately, was a low learning curve!
  2. Migrate the css code provided by webflow to Nextjs: here the first hard thing, because Nextjs suggest to use styled-components. But for now, i`ll use the traditional css styling via link tag.
  3. Data Fetching: pending to do yet.

I`ll be in touch with this thread to update my progress with the proyect. Plus i´am tweeting about this in my twitter @jmcataldo if you want to follow it.

Thanks a lot!


#7

Thanks David for your reply!

Ive decided to skip the interactions and additional behaviors provided by the webflow.js file. Ill import some react components that helps me to do the needed tasks ( validations, tool-tips, progress bar, etc )


#8

I know it’s an old topic, but just wanted to let y’all know that I’ve created a tool that does that automatically - it migrates a Webflow project into a React app with a single command. Checkout the following link if this is what your’e looking for: https://github.com/DAB0mB/Appfairy


#9

@Eytan_Manor, does your project work with Webflow interactions as well?