A template for starting all your Webflow projects requiring code. It looks like the one of finsweet but it's easily customizable.
Install pnpm on your computer
npm i -g pnpmGot a npm token (named NPM_TOKEN) : How to do
- Click on Use this template > Create a repository
- Change some settings in your repository
Settings > Actions > General > Workflow Permissions
- Read and write permissions.
- Allow GitHub Actions to create and approve pull requests.
Settings > Secrets and variables > Actions > New repository secret
- Name: NPM_TOKEN
- Secret: you token
- Install dependencies
pnpm installYou can start your project! Here are two useful scripts:
Dev mode (with live reload)
pnpm devBuild (for production)
pnpm build- Write your code in src/index.ts (don't touch Webflow.push but you should remove console.log)
Webflow.push(() => {
//Write your code here
console.log('Hello World')
})pnpm changesetThen push your code,
In GitHub, when CI/CD is finished, you will have a pull request, merge it and you're done!
Your package will appear in npm.
The advantage of this template is you can easily change each tool to suit your configuration.
Finsweet did a HUGE work by typing the Webflow.js file included in all Webflow projects.
With this, you can access many types and methods not provided by Webflow.
A fast JavaScript bundler and minifier that compiles and packages JavaScript and TypeScript code for deployment.
Update builder/esbuild.js
It includes a live reload in builder/live-reload.js
A configuration file for TypeScript that specifies the compiler options and file paths required to compile a TypeScript project.
Update tsconfig.json
A static code analysis tool for JavaScript that identifies and fixes problems in your code to ensure adherence to specified coding standards and best practices.
Update eslint.config.js
A code formatter for JavaScript that enforces consistent style by parsing code and reprinting it with its own rules.
Update .prettierrc file.
A tool that enables Git hook scripts to run automatically, helping to enforce quality checks and other tasks during the development process.
Add hooks in .husky folder
A tool for managing and automating the versioning and changelog generation process for projects, especially those using monorepos, by tracking changes across packages.
Update .changeset/config.json
This pipeline uses GitHub Actions
Check if your code got errors before going to production
Update .github/workflows.ci.yml
Publish package to npm
Update .github/workflows.realease.yml