# Sygnal Site Engine ( SSE2 )

**Sygnal Site Engine ( SSE )** is a framework for *client-side* script development in Webflow-hosted sites. It combines a range of best-practices and modern technologies to create an ideal development environment for Webflow.

{% hint style="success" %}
**SSE v2.0.0 Released!** We've released a major update with new base classes, automatic Webflow context detection, and improved lifecycle methods. See [What's New](https://engine.sygnal.com/whats-new) for details.
{% endhint %}

We focus on using...

* Modern development IDEs such as VS Code or Cursor
* Modern languages, specifically TypeScript and SASS
* Structured development practices- multiple classes and files to organize your code
* Source control to protect your code and history
* Development, test, and production environment separation
* CI/CD pipeline support to deploy your code changes
* Monorepo- a consolidated codebase approach for your Webflow client-side development to ensure smooth integration into your Webflow site
* Switchable debugging- turn on console logging centrally, and only when you need it

{% hint style="success" %}
**Zero Cost.** A complete setup can be built 100% free, as all of these technologies are freely available or utilize free plans. All it requires is learning the tech, and the setup.
{% endhint %}

## Core Technologies Used

SSE's architecture is highly flexible, but this is our typical configuration;

* **TypeScript** for structured, modern code development with type-safety. Makes code far more manageable, more reusable, better bug-proofing, and offers better testing.
* **SASS** for modern structured CSS development which support robust commenting
* **GitHub** for full source control management ( SCM ), ensures your code is safe, and that you have a full history of changes.
* **Jest** for full unit-testing support
* **VSCode** as a full modern IDE for development
* **Netlify** for the production code-delivery CDN.
* **Sygnal DevProxy** for full DEV/TEST and PROD environments. Allows your developers, team, and clients to fully test new features before they are public.

## Key Benefits

This setup gives us a ton of benefits;

* Easy code management in your Webflow site. There is no code editing anywhere, on any pages through the Webflow designer. Everything is done directly in VS code.
* Monorepo for code safety- there is no risk of breaking your site or deleting important pieces, everything is safe in GitHub and you can revert any time.
* Solid versioning, tracking, and production deployment controls.
* Realtime development. Change, save, refresh, you're looking at live code against your current Webflow staged site.
* Persistent testing. Check in code anytime, and your client and testing team can review the latest changes immediately on e.g. `test.mysite.com` or whatever URL or subdomain you choose.
* Easy access to add-on libraries, like Luxon for dates, cookie.js for cookie management, or GSAP for animation.
* CI/CD setup for easy, live deployment support. There is no need to change code or URLs in Webflow, you can deploy your code updates to your production site through a simple GitHub pull request.

{% hint style="success" %}
We're continually adding new features as well, because our team utilizes this setup in all of our client sites.
{% endhint %}

## Video Tour

Here's a quick video overview of how SSE benefits our team and projects.

{% embed url="<https://www.loom.com/share/a65258f54d424511a1a1373428723922>" %}