ㅤ

0. Overview

ㅤ

🤔 The why:

If you’ve done any kind of custom coding using Webflow you’ve likely encountered some or all of the following pain points:

• Poor syntax highlighting
• No autocomplete
• Endless clicking through menus to edit/publish your code
• Waiting for the site to re-publish every time you make any change to the code
• Character limits
• Having to upload code to a CDN
• Can’t use NPM to easily install libraries
• Can’t easily segment code into individual files, leading to a bloated, endless file or lots of script-src to keep track of
• No integration with GitHub or robust version control/collaboration tool

This article will show you how to tackle all of these, allowing you to efficiently inject advanced functionalities and effects into your Webflow site. Let’s get into the How!

ㅤ

1. Prerequisites

• Visual Studio Code
• Webflow Core/Growth Seat (for custom code)
• GitHub Account
  • Make sure you’ve gone through the GitHub Quickstart
• Node.js and NPM

ㅤ

2. Setting up LocalHost + Webflow using Parcel.js

1. Create a new GitHub Repository and make it public
2. Clone your Repository to your desktop
3. Open your Repository in VS Code and create a new app.js file
4. Open the integrated terminal (Ctrl+Shift) and make sure you have downloaded & installed node & npm
5. Initialize NPM, by running npm init in the terminal
6. Install Parcel.js, by running npm i parcel in the terminal
7. Before you commit to your Git Repo, make sure to create a .gitignore with the following so that we don’t track our cache or node_modules

   # dependencies
   /node_modules
   
   # misc
   .parcel-cache/**
   .parcel-cache/data.mdb

   ㅤ

8. A package.json was created in step 5 let’s add a run command to it so we can simply run npm start in the terminal to package our app and serve it on localhost.

     "scripts": {
       "start": "parcel app.js --hmr-port 50619"
     }

   We specify a WebSocket port to avoid potential connection errors

   ㅤ

   {
     "name": "repo-name",
     "version": "1.0.0",
     "description": "repo description",
     "main": "app.js",
     "scripts": {
       "start": "parcel app.js --hmr-port 50619"
     },
     "repository": {
       "type": "git",
       "url": "git+https://github.com/psychoactive-studios/repo-name.git"
     },
     "author": "Author Name",
     "license": "ISC",
     "bugs": {
       "url": "https://github.com/psychoactive-studios/repo-name/issues"
     },
     "homepage": "https://github.com/psychoactive-studios/repo-name#readme",
     "dependencies": {
       "parcel": "^2.7.0",
     },
   }

   Complete package.json file should look something like this

   ㅤ

9. Run npm start we’ll see that our parcel server is running at http://localhost:1234/
10. We can now add the following to the Webflow project’s head custom code section and publish our Webflow site:

    <script src="http://localhost:1234/app.js"></script>

11. Now as long as your parcel.js localhost server is running, any saved change to app.js will be reflected when you reload your Webflow site in your browser - no need to re-publish your project every time.
    
    To check this is working try adding an alert to app.js:

    alert('Hello World')

    ㅤ

12. You can now use NPM to install libraries, split your code into multiple files and import files into your code:

    import {Curtains, Plane, RenderTarget, PingPongPlane, ShaderPass} from 'curtainsjs';
    import {TextTexture} from './TextTexture';
    import sliderShader from './sliderShader';
    import textShader from './textShader';
    import ThreeD from './3d';
    import svg from './svg.glb'
    import glb from './icon.glb'

    Importing from libraries, other files.js, a vector.svg and a 3D mesh.glb
13. You may want to import files which parcel doesn’t know how to parse/transform:

    @parcel/core: No transformers found for icon.glb.

    Error message when trying to import a .glb 3D file

    ㅤ

    If so you’ll have to add a .parcelrc file with something like the following:

    {
        "extends": "@parcel/config-default",
        "transformers": {
            "*.glb": ["@parcel/transformer-raw"]
        }
    }

    .parcelrc content for transforming .glb files

    ㅤ

    ⚠️

    Importing assets this way is likely fine while developing or for small files like simple .svg and .glb with no textures - for production, you likely want a proper CDN to handle 100s or 1000s of kb

    ㅤ

3. Hosting our Code using GitHub Pages

ㅤ

1. Got to your github.com and navigate to your repository settings > general

   ㅤ

2. Make sure the repository visibility is set to public if it isn’t already - look at the bottom of the settings page settings > general > Danger Zone

   ㅤ

3. In settings > pages create a site from your main branch /root

   ㅤ

4. Once your site is live, your parceljs-bundled app.js (and every other tracked file) will be hosted under your page domain, something like:
   
   https://psychoactive-studios.github.io/repo-name/dist/app.js

   ㅤ

5. At the top of your app.js define the following variable - we will use this to check if our parceled app is loaded

   const parceled = true

   ㅤ

6. In our Webflow project, we can now add some logic so that if localhost:1234/app.js isn’t available the site will pull the address with the bundled app.js from GitHub Pages:

   <script src="http://localhost:1234/app.js"></script>  
   <!-- tries to load from local host -->
   
   <script>
   if(typeof parceled === 'undefined') {
   		let script = document.createElement('script')
   		script.type = 'text/javascript'
   		script.src = 'https://psychoactive-studios.github.io/repo-name/dist/app.js';
   		document.head.appendChild(script)
   	}
   //checks if the parceled variable from app.js is undefined - meaning local host isn't up and running
   //if not loads from the github pages
   </script>

   Make sure to point to the bundled file in repo-name/dist/app, not repo-name/app.js

   ㅤ

   This allows us to work locally from localhost and make changes without temporarily breaking the site for users, or having to make any edits to the Webflow project’s Head Code.

   ㅤ

7. Every time we commit our code to main (or whatever branch we set our GitHub page to publish from in 3.) our app.js will update and so will our Webflow site.
   💡

   Ensure you’ve run npm start before committing so that dist/app.js is up to date

ㅤ