SMC Gateway Svelte Library

This library is only of use for developers writing Web Applications to run on an SMC Gateway V2.

Quick start (recommended)

1. npx create-smcgateway-sv my-app

Creates an SMC Gateway Svelte webapp, pre-configured with svelte-5, SMC Gateway related libraries, bootstrap CSS as a single page application compatible with the SMC Gateway WebApp module.

Quick start (manual)

Create a new svelte app my-app

1. npm create vite@latest my-app -- --template svelte-ts
2. cd my-app
3. Optionally add commonly used dependencies npm install --save bootstrap @tabler/icons-svelte svelte-spa-router
4. npm i --save smcgateway-sv
5. If using Bootstrap, add the following to the main.ts file:

   import 'bootstrap/dist/css/bootstrap.css'
   import 'bootstrap/dist/js/bootstrap'

6. npm install
7. npm run dev

App.svelte

<script lang="ts">
  import {auth, LoginForm} from "smcgateway-sv";
</script>

{#if auth.user}
  <div class="container">
    <h3>Hello {auth.user.name}</h3>
    <button class="btn btn-secondary" onclick={auth.logout}>Logout</button>
  </div>
{:else}
  <LoginForm></LoginForm>
{/if}

vite.config.ts

This library requires a SMC Gateway, and during development whilst running npm run dev you can proxy api calls using the following vite.config.ts file. Setting base to "" ensures the build application can run from a relative path.

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

const target = {
	target: 'http://192.168.100.250',
	changeOrigin: true,
	secure: false,
	ws: true,
}

// https://vite.dev/config/
export default defineConfig({
	base: "",
	plugins: [svelte()],
	server: {
		proxy: {
			'/api': target
		}
	}
})

Creating a webapp zip for loading onto the SMC Gateway

Run make build after creating this Makefile in projects root directory, along side package.json:

-include .env

NAME := $(notdir $(CURDIR))
WEBAPP_DIR ?= ../
DIR = $(abspath ${WEBAPP_DIR})
ts = `date +%Y-%m-%d_%H%M`
zipfile = ${NAME}-webapp_${ts}.zip

dev:
	npm run dev

build: checkclean
	@echo Building ${zipfile}
	@npm run build \
		&& cd dist \
		&& zip -rg ${DIR}/${zipfile} . \
		&& cd .. \
		&& echo ${zipfile} > version.txt \
		&& git add version.txt \
		&& git commit -m "${zipfile}" \
		&& echo \
		&& echo Saved ${DIR}/${zipfile}

update: checkclean
	@if ! command -v ncu >/dev/null 2>&1; then \
		@echo Error, missing `ncu` - try `npm install -g npm-check-updates` \
		exit 1; \
	fi;
	ncu

checkclean:
	@status=$$(git status --porcelain); \
	if [ ! -z "$${status}" ]; \
	then \
		echo "Error - working directory is dirty. Commit those changes!"; \
		exit 1; \
	fi;

Notes

How to upgrade dependencies

1. npm install -g npm-check-updates
2. ncu to view available updates
3. ncu -u to update package.json
4. npm install to download newer packages

Library development

• npm run dev will run a local server
• npm run build to build the library
• npm publish to push the library to npm