A template for starting all your Webflow projects requiring code using Typescript. It looks like the one of finsweet but it's easily customizable and the deployement is easier.
Install pnpm on your computer
npm i -g pnpmGot a npm access token : How to do
- Click on Use this template > Create a repository
- Change some settings in your repository
Settings > Secrets and variables > Actions > New repository secret
- Name: NPM_TOKEN
- Secret: you token from npm
- 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')
})Commit all your work
Then write :
pnpm releaseChoose between Major, Minor or Patch and write a commit message for the deployment
Push your code,
When CI/CD is finished in Github, 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 script for managing and automating versioning.
Update builder/bump-version.js
This pipeline uses GitHub Actions
Publish package to npm
Update .github/workflows.realease.yml