https://github.com/armandsalle/webflow-typescript-webpack
☀️ Basic TypeScript config with Webpack to let you code while using Webflow 🙌
https://github.com/armandsalle/webflow-typescript-webpack
prettier-eslint typescript webflow webpack
Last synced: about 2 months ago
JSON representation
☀️ Basic TypeScript config with Webpack to let you code while using Webflow 🙌
- Host: GitHub
- URL: https://github.com/armandsalle/webflow-typescript-webpack
- Owner: armandsalle
- Created: 2021-09-12T09:34:16.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-14T13:38:03.000Z (over 4 years ago)
- Last Synced: 2025-04-26T21:33:45.427Z (about 1 year ago)
- Topics: prettier-eslint, typescript, webflow, webpack
- Language: JavaScript
- Homepage:
- Size: 787 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```html
```
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.
```html
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)
})
```
For a production-ready code, add a script tag with your production URL.
```html
```
## Building and running on localhost
This project is using `yarn`.
First, install dependencies:
```sh
yarn
```
To launch a local dev server:
```sh
yarn dev
```
To create a production build:
```sh
yarn build
```