# Developing with SSE

## Open the Project

* Start VS Code 
* Open a GitHub codespace for your project, or check it out locally with GitHub 
* Make whatever changes you like 

## Build the Project

Open a terminal `CTRL`+`SHIFT`+`~`

Type;

```
npm run watch
```

Click the split plane button, top right of the bottom terminal pane. 

Type; 

```
npm run serve
```

{% hint style="info" %}
Now, any changes you make to the project will be immediately recompiled when you SAVE, and will be available at the URL.
{% endhint %}

<http://127.0.0.1:3000/>

## Test your work, in realitime

Typically we test our changes in the `webflow.io` staging site.  To see your code live, you can make a simple, temporary modification to your library include;

```html
<!-- Site Engine (SSE)
     https://engine.sygnal.com
--> 
<script 
  src1="https://mysite.netlify.app/index.js"
  dev- src="http://127.0.0.1:3000/dist/index.js"
  ></script> 
```

Note how the `src` attribute has been changed to `src1`, you can use anything here to suppress it.  A space has been added after the `dev-` as well, so that that `src` will now be loaded by the browser.&#x20;

Publish your `webflow.io` site ONLY.&#x20;

**Now, any code changes you make and save will immediately, and you can view them immediately on your published `webflow.io` site.**&#x20;

{% hint style="info" %}
This tag-edit approach is simple, but it is a hack.  At Sygnal we use an additional piece of infrastructure we call DevProxy which automatically makes these script changes at a persistent URL, e.g. `dev.mysite.com`.

[Talk to us](https://www.sygnal.com/contact) if you'd like this setup for your projects.&#x20;
{% endhint %}

{% hint style="warning" %}
Make sure to change the script tag back after your work, most especially before you publish your site to production.&#x20;
{% endhint %}

&#x20;