This is a basic setup with ViteJs that you can use for your Webflow website

Overview

ViteJs + JS + Webflow = ❤️

This is a basic setup with ViteJs that you can use for your Webflow website. jQuery is already installed and declared as an external dependency.

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.

If you prefer TypeScript you can use this template

Live demo

You can find a simple example of a Webflow site using this setup here. The code is hosted on Netlify here. If you want to see the Webflow preview, it's here 👍

How to use with Webflow

⚠️ if you are using Brave as a web browser or an ad blocker, you will need to disable it on your pre-production Webflow live site. 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 type="module" src="http://localhost:3000/@vite/client">script>
<script type="module" src="http://localhost:3000/src/main.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 local dev code. This code is not due to be used in production.

<script>
  (function () {
    const LOCALHOST_URL = [
      'http://localhost:3000/@vite/client',
      'http://localhost:3000/src/main.js',
    ]
    const PROD_URL = ['https://MY-PROJECT.netlify.app/main.js']

    function createScripts(arr, isDevMode) {
      return arr.map(function (url) {
        const s = document.createElement('script')
        s.src = url

        if (isDevMode) {
          s.type = 'module'
        }

        return s
      })
    }

    function insertScript(scriptArr) {
      scriptArr.forEach(function (script) {
        document.body.appendChild(script)
      })
    }

    const localhostScripts = createScripts(LOCALHOST_URL, true)
    const prodScripts = createScripts(PROD_URL, false)

    let choosedScripts = null

    fetch(LOCALHOST_URL[0], {})
      .then(() => {
        choosedScripts = localhostScripts
      })
      .catch((e) => {
        choosedScripts = prodScripts
        console.error(e)
      })
      .finally(() => {
        if (choosedScripts) {
          insertScript(choosedScripts)

          return
        }

        console.error('something went wrong, no scripts loaded')
      })
  })()
script>

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

">
<script src="https://YOUR_DOMAIN.netlify.app/main.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

To clean the local /dist folder:

yarn clean

To lint the code with ESLint and Prettier:

yarn lint:fix
Comments
  • Specified tab size in settings.json & disabled cache for vite eslint plugin

    Specified tab size in settings.json & disabled cache for vite eslint plugin

    Had some issues getting this template to work initially.

    • Specified editor.tabSize: 2 in settings.json to avoid issues for anyone using default VS Code settings.
    • Disabled cache for vite-plugin-eslint since it wasn't working properly. I would see linting errors after fixing & saving, emptying the file still wouldn't resolve it.
      • https://github.com/gxmari007/vite-plugin-eslint/issues/17
      • https://github.com/gxmari007/vite-plugin-eslint/issues/11
    opened by dannymout 3
  • Runing into an issue on a clean vs code build

    Runing into an issue on a clean vs code build

    im running into this error message when the second i start the local server

    Plugin: vite:eslint
     File: C:/Users/X/Documents/GitHub/Mariam-development/src/main.js
         at formatError (C:\Users\X\Documents\GitHub\Mariam-development\node_modules\vite\dist\node\chunks\dep-f5552faa.js:36769:46)
         at TransformContext.error (C:\Users\X\Documents\GitHub\Mariam-development\node_modules\vite\dist\node\chunks\dep-f5552faa.js:36765:19)
         at TransformContext.transform (C:\Users\X\Documents\GitHub\Mariam-development\node_modules\vite-plugin-eslint\dist\index.js:87:14)
         at async Object.transform (C:\Users\X\Documents\GitHub\Mariam-development\node_modules\vite\dist\node\chunks\dep-f5552faa.js:36985:30)
         at async doTransform (C:\Users\X\Documents\GitHub\Mariam-development\node_modules\vite\dist\node\chunks\dep-f5552faa.js:52060:29) (x6)
    22:20:12 [vite] Internal server error: 
    C:\Users\X\Documents\GitHub\Mariam-development\src\main.js
     1:51  error  Delete `␍`  prettier/prettier
     2:49  error  Delete `␍`  prettier/prettier
     3:28  error  Delete `␍`  prettier/prettier
     4:1   error  Delete `␍`  prettier/prettier
     5:47  error  Delete `␍`  prettier/prettier
     6:1   error  Delete `␍`  prettier/prettier
     7:14  error  Delete `␍`  prettier/prettier
     8:15  error  Delete `␍`  prettier/prettier
    
    opened by Retr0view 2
  • Loading separate scripts for each page?

    Loading separate scripts for each page?

    I'm newer to JS build tools/modules. Would I need to create separate modules for each page of my Webflow project?

    My first thought is to call a function in main.js, depending on the current path.

    opened by dannymout 0
  • Prevent cache on prod

    Prevent cache on prod

    Hello Armand,

    Sometimes, clients, project manager, users... has cached the dist js file generated.

    I made this :

    const d = new Date(); let seconds = d.getSeconds(); const PROD_URL = ['my_dist_url.js?'+ seconds]

    What do you think ?

    opened by c0c0t3 1
  • Better way to handle environment

    Better way to handle environment

    Hi, and first of all, thank you for your work !

    I helped a friend of mine to setup this template andI noticed a small problem with the way you manage the different environments : Actually, when you're on the production build, you first try to fetch localhost, and if it fails, you then try to fetch the correct build deployed on Netlify. To me, this is a problem because you have to wait for the localhost request to time out before getting the correct bundle (which can be up to 4 seconds !).

    What I suggest would be to have two environements files (dev and prod) with the same variables declared but with the correct values according to the env (the main.js absolute urls) . You would then use the dev env file by default when developing, and swap it with the prod env file on build time, with the help of yarn build.

    Of course, instead of files, you could just use a variable framed by an if :

    let url;
    if(prod){
      url = env.prod.url
    }
    else{
      url = env.dev.url
    }
    

    What do you think ?

    opened by brice-noowu 1
Owner
Armand SALLE
hello 👋
Armand SALLE
VSCode Serial Port Extension. You can connect any serial port used to read / write data.

Serial Port Helper You can connect any serial port used to read / write data. Features Serial Port View; Serial Port Config; TX / RX; Send Hex Buffer:

Hancel Lin 30 Sep 18, 2022
Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

Nishant Tomar 1 Dec 25, 2021
HTML Framework that allows you not to write JavaScript code.

EHTML (or Extended HTML) can be described as a set of custom elements that you can put on HTML page for different purposes and use cases. The main ide

Guseyn Ismayylov 172 Dec 22, 2022
A Zero config CLI to quick-start your web projects.

Quick-strapper A Zero-config cli to help you bootstrap web projects with best templates. Quick-strapper Usage Templates Commands Usage You can start u

Sidharth Rathi 3 Jun 14, 2022
Japanese translation of vitejs.dev

Vite Docs JA Vite ドキュメントの日本語翻訳レポジトリです。現状、本レポジトリは翻訳作業用のものとして一時的に用意されています。将来的に、本レポジトリは別場所に移動される可能性があります。 貢献ガイド Vite 日本語翻訳ガイド を一読お願いします! はじめかた 本ドキュメントは V

vite 50 Dec 14, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A "Basic-to-Lisp" compiler. But Basic is not real Basic, and Lisp is not real Lisp.

Basic2Lisp A "Basic-to-Lisp" compiler. But Basic is not real Basic, and Lisp is not real Lisp. Syntax Print-Sth Put some-value to standard output. PRI

Hana Yabuki 5 Jul 10, 2022
This project will be a basic website that allows users to add/remove books from a list. The main objective is to understand how to use JavaScript objects and arrays and dynamically modify the DOM and add basic events.

Awesome-books Awesome Books This project will be a basic website that allows users to add/remove books from a list. This project is part of the Microv

Aleksandra Ujvari 10 Oct 3, 2022
Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the DOM and adding basic events.

Awesome Books Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the

Didier Peran Ganthier 6 Dec 20, 2022
Webpack is an open-source JavaScript module bundler. This includes basic setup files to help me not redo all the setups for webpack when starting a new project.

Webpack Setup Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as

Nemwel Boniface 14 Jun 23, 2022
Basic https setup using an automatically generated self-signed certificate

@vitejs/plugin-basic-ssl A plugin to generate untrusted certificates which still allows to access the page after proceeding a wall with warning. In mo

vite 81 Jan 2, 2023
The website which can help you to organize your daily or weekly activities and review them when you need them. you can add, remove and delete an activity

To Do list To do project is webpack project that list activities someone can do at a specific time In this TO-DO list, you can add or remove you activ

Joffrey NKESHIMANA 5 Jul 21, 2022
This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do

Shinu 5 Nov 12, 2022
This project was created to help discord.js developers start their own bot, you can take this project as a basic for your bot and add things to it as you want. 🙂

Discord.js Starter-Bot A small & basic discord.js bot to help you get started ??️ This project was created to help discord.js developers start their o

Strike 3 Nov 29, 2022
BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway.

BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway. Supported by all operating system, need an internet connection for working properly.

IRUTHAYA SANTHOSE I 1 Dec 19, 2021
Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links

rebrandly-express Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links Rebra

null 3 Dec 13, 2022