TypeFlow

A local development server for working with TypeScript/JavaScript and CSS files in Webflow projects. Inspired by and intended to replace Finsweet's Developer Starter with a more streamlined approach.

Features

• Local Development Server - Serve TypeScript/JavaScript and CSS files locally during Webflow development
• Live Reload - Automatic browser refresh when files change
• TypeScript Compilation - Fast compilation using esbuild
• Production Build - Optimized builds with optional minification and source maps

Quick Start

1. Set up your project

Option A: Use the starter template

git clone https://github.com/j0srisk/typeflow-starter.git your-project
cd your-project
npm install

Option B: Create your own project structure

Install TypeFlow in your project:

npm install j0srisk/typeflow

Create your project structure (this is just an example - organize files however works best for your project):

your-project/
├── src/
│   ├── pages/
│   │   └── home/
│   │       ├── main.ts
│   │       └── styles.css
│   ├── components/
│   │   └── slider/
│   │       ├── main.ts
│   │       └── styles.css
│   └── global.css

3. Start development server

typeflow dev --reload

3. Copy script and style tags

Visit http://localhost:3000 in your browser to see the development server page. Copy the HTML script and style tags provided.

4. Paste into Webflow

Paste the copied tags into your Webflow site's custom code section or code embed elements and publish.

5. Develop with live reload

• Make changes to your TypeScript/CSS files
• See changes instantly on your Webflow site without republishing
• JavaScript changes automatically reload the page.

6. Build for production

When finished developing:

typeflow build --minify --drop-console --drop-debugger

7. Deploy production files

Replace the localhost tags in your Webflow site with either:

• Copy and paste the built code directly into custom code
• Host the production files elsewhere (jsdelivr, CDN, etc.) and update the URLs

Commands

Development Server

Start the development server with live reload:

npx typeflow dev --reload

Or using the shorthand:

npx typeflow --reload

Development Options

• -r, --reload - Enable live reload

Production Build

Build your files for production:

npx typeflow build --minify --drop-console --drop-debugger

Build Options

• --minify - Minify output files
• --drop-console - Remove console statements
• --drop-debugger - Remove debugger statements

Configuration

TypeFlow works out of the box with sensible defaults. The server will automatically detect and compile TypeScript files using esbuild.

Requirements

• Node.js 16 or higher
• TypeScript files (optional, JavaScript also supported)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.