How to connect Webflow, VSCode, and Github for a better custom code workflow
How do you connect Webflow, VSCode, and Github for a better custom code workflow? That’s exactly what we are going to explore in today’s post.
Integrating Visual Studio Code (VSCode) into your Webflow projects can make a significant difference in how you code and test custom code for your Webflow website.
This makes coding your Webflow project smoother and more efficient.
Why use VSCode alongside Webflow?
VSCode is not just another code editor; it's a robust tool that offers a suite of features designed to improve the efficiency and quality of your development work. VSCode offers features Webflow’s code editor doesn’t.
- Syntax highlighting
- Intelligent autocompletion, which helps to reduce errors and speed up the coding process.
- Extensive library of extensions, like Prettier, that will help format your code and GitHub Copilot that brings AI to programming to help speed up the coding process, just to name a few of the many useful extensions VSCode offers.
- Integrated Terminal to install and use packages.
The list can go on and on for why VSCode is useful. But the biggest feature for those pairing VSCode with Webflow is the ability to write and test code without having to publish your project every time you make a change to the code.
Part 1 - How do you pair VSCode with Webflow?
Here is a step by step guide on how to pair VSCode with Webflow, so you can start effortlessly testing your custom code in your Webflow project today.
It is not as difficult as you might think.
Let’s get started.
First, Install and Launch VSCode
If you don’t have VSCode on your machine, you can install it by downloading VSCode.
Once VSCode is installed and launched, we need to get the project setup.
Second, Create a new folder
Name it something like “Custom Code Webflow Project”. This folder will be our primary workspace for our code.
Now its time to start setting up the needed files for our project.
I named mine 'app.js'.
This code will do two things:
In case you are curious, here is a more detailed explanation:
Fifth, Check for Node and NPM Dependencies
Let’s check to see if you have Node and NPM setup on your machine so we can get Parcel installed, which optimizes our files and serves them on a local server for later integration into Webflow.
Open the terminal in VSCode
Terminal —> New Terminal
Verify Node.JS is installed
With the new terminal open, let’s check if Node is installed on your system
Verify if Node.JS is installed with the following command:
If node is installed, a version will be returned.
If it's not installed, download Node JS from https://nodejs.org/en/.
Follow the instructions to install Node JS
Verify NPM is installed
Let’s check to see if NPM is installed on your machine with the following command.
Again, if it is installed, a version will be returned.
If not, follow the installation guide at https://www.npmjs.com/get-npm to install NPM on your machine.
Sixth, Initialize NPM
Now, initialize NPM in your project.
This is a necessary step as initializing NPM (Node Package Manager) in a project involves creating a package.json file in the project's root directory. This file is fundamental in managing project dependencies, scripts, and metadata.
Run the following command:
Answer the prompts.
- You answer the prompts either by typing in the necessary information and hitting enter. Or just hitting enter.
- For this simple use case, you will simple hit enter without entering in any information.
The only thing you need to make sure of is that 'app.js' is set as the entry point, which should be set automatically.
When you finish, you must hit enter to answer the question at the end.
After you hit enter, a package.json file will be created in your folder and the terminal will look like the example below.
Seventh, Install Parcel Package
Next we need to install Parcel.
What does Parcel do?
While the primary function of Parcel is as a bundler, it does facilitate hosting our code locally for development purposes. This provides a convenient and efficient environment for developing and testing our web applications in Webflow.
Run the command to install Parcel
Install Parcel with the following command
(Refer to https://www.npmjs.com/package/parcel for details)
Once you run the command, a number of packages will be added.
You will have one folder and a new file added.
Eighth, Update the Package.Json file with a Start Command
Open your package.json file and in the scripts area, you need to add the following start command:
This command will allow us to start parcel and spin up a local development server which we will add to Webflow in the next step.
A Note about the start command
When adding the start command, make sure to add a “,” after the text command. Also, make sure to wrap both start and the command in quotes. Before running "npm start", install Parcel JS:
Ninth, Execute the Start Command
We are finally at the step where we are going to execute the start command, spin up a local development server, and connect our Webflow Project to VSCode
Execute the following command in the terminal:
Once the command is executed, a local server will start running.
Tenth, Add the Local Server to Your Webflow Project
We are almost there!
The last step is to add the local server to your Webflow project.
Add the code
Copy the code below and paste it into the head section of the page you want to execute the code on. Or you can paste it into the head section for your entire site through the settings area of your project.
Items to note:
- Your server will most likely be hosted at 1234, but double check in your terminal.
- Wrap everything in a Script tag
- Add src
Publish your site and visit the page
Publish your site.
Visit the page to which you added the code.
When you visit the page, you should see an alert immediately upon load. If you see the alert you have added everything correctly.
At this point, you can delete the alert from your code, if you would like.
When writing your code, make sure to add it in the same code block where the alert is added.
Part 2 - Backup Your Webflow Custom Code Project with Github
You don’t have to backup your project to Github, but it is a good idea, especially if you are writing more than a few lines and will be working with the code over the span of the project.
How do you add your project to Github?
Step 1: Create a Github account
If you don’t already have a Github account, then you need will need to create one.
Head over to Github.com and create an account.
Step 2: Download Github Desktop
Github desktop is by far one of the easier ways to work with Github. It simplifies the process into a GUI instead of having to memorize and work with the command line in the Terminal.
Step 3: Create a New Repository
Click add —> Create New Repository
Name it whatever you would like.
Then click create repository.
Don’t worry about the license or the Git Ignore section. We will add a Git Ignore file in Step 5
Step 4: Add your files to the new repository
Here is what you need to do:
- Click show in finder to view the repository you just created. The folder will be empty. We need to add the files we created in Part 1 to the repository.
- Open the folder from Part 1 in your Finder.
- Copy the files from this folder into your new repository folder.
- VSCode will inform you that your files are no longer available.
- Close the VSCode window.
- Open up the folder to which you copied the files in VSCode.
NOTE: In this instance, we are creating a repository and adding our files to GitHub after the fact. You can combine these steps at the beginning of the process when setting up your project.
Simple start with GitHub desktop and create a repository. Add the files we created in Part 1 to that repository, along with the Git Ignore file we are going to add in the next step.
Step 5: Add a Git Ignore File
Create a .gitignore file and adding the following to it:
The Git Ignore file will tell GitHub to ignore these files and folders. In other words, they won’t be uploaded to GitHub.
You will see that these files and folder disappear in GitHub Desktop from the left hand menu.
Step 5: Publish Repository to GitHub
Click Publish Repository. This will publish your repository to GitHub.
It will ask you for:
- The Name
- A Description
- Whether you want the code base to be kept private or not
Step 6: Make your first Commit
Once you publish your repository, you want to make a commit.
After you make your commit, you want to then Push to Origin
Once you Push to Origin, your files are in the repository on GitHub.
Step 7: Make changes to your file and push changes to GitHub.
Now GitHub will track any changes you make in your app.js file.
When you are finished making changes, or periodically during the development process, you can push the changes to your GitHub Repository.
In this instance, I deleted the console.log. GitHub recognized I deleted it. The deletion is highlighted in red.
To add this change to GitHub, you would need to use the box on the bottom left to make a commit.
Then push the changes to GitHub on the next screen by clicking the blue button - Push Origin, just like in the image above.
Now, you can write your code in Visual Studio Code and simply refresh the page to see updates in Webflow.
As well as you can periodically push your code to GitHub to keep it safe and secure in the Cloud.
This method will significantly enhance your productivity and efficiency in custom Webflow development.
Enjoy your enhanced workflow!
Want to 2x Your Leads and Conversions?
Join the exclusive community receiving our 5-Minute SEO and Web Design Tips.
Every week, we deliver expert insights straight to your inbox, designed to propel your business to the top of Google rankings, resulting in more website visits and more sales.
With years of proven experience, our tips are concise, actionable, and tailored to fit your busy schedule.
Transform your website into a lead-generating powerhouse without spending hours on research.
We design custom Webflow websites that are unique, SEO optimized, and designed to convert.
Gain peace of mind knowing that a Webflow Professional Partner is maintaining your website.
We develop custom Webflow websites that are robust, secure, and easy to update.
SEO services that help you rank on Google and get found by your ideal clients.
Position Your Business for Success Today!
Book your FREE website consultation to get started.