Developing with SSE

The basics of developing with Sygnal Site Engine.

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

Now, any changes you make to the project will be immediately recompiled when you SAVE, and will be available at the URL.

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;

<!-- 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.

Publish your webflow.io site ONLY.

Now, any code changes you make and save will immediately, and you can view them immediately on your published webflow.io site.

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 if you'd like this setup for your projects.

Make sure to change the script tag back after your work, most especially before you publish your site to production.