webflow-webpack

This is a basic setup with Webpack and Typescript that you can use for your Webflow website. jQuery is already installed and declared as an external dependency. By default, Webpack bundles multiple files for better performances (one file by page to avoid heavy JS load on a page that doesn't need it), but you can change this in the webpack.config.js. I'm using Netlify to build and host my code because it's easy to use, free, and has serverless functions out of the box. Feel free to use your favorite CDN.

How to use with Webflow

⚠️ if you are using Brave as a web browser or an ad blocker, you will need to disable it. Else it can block the fetching of the js files. ⚠️

If you are developing the site and coding at the same time, you can just add a script tag on pages that need your code

<script src="http://localhost:9000/index.js"></script>

But if you only code and don't have access to the project you can use this code to check if there is a local dev server running on your machine and switch between production code hosted on Netlify or not. This code is not due to be used in production.

<script>
  const LOCALHOST_URL = 'http://localhost:9000/index.js'
  const PROD_URL = 'https://YOUR_DOMAIN.netlify.app/index.js'

  const s = document.createElement('script')

  fetch(LOCALHOST_URL, {
    mode: 'no-cors',
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  })
    .then(() => {
      s.src = LOCALHOST_URL
    })
    .catch((e) => {
      s.src = PROD_URL
      console.error(e)
    })
    .finally(() => {
      document.body.appendChild(s)
    })
</script>

For a production-ready code, add a script tag with your production URL.

<script src="https://YOUR_DOMAIN.netlify.app/index.js"></script>

Building and running on localhost

This project is using yarn.

First, install dependencies:

yarn

To launch a local dev server:

yarn dev

To create a production build:

yarn build