V5.0.2 + Svelte: missing "start" in package.json

I have a fresh version of uilbuilder v5.0.2 installed, and a new Svelte template folder created. When I run "npm dev" it starts the file watch, but errors on the server bit. It appears the package.json in the Svelte template does not contain a start function (dev server). According to the docs, it should start a dev server to auto-reload any connected clients. (uibuilder Technical Documentation v3 item #5).

I tried implementing the nodered directory watch and "_uib" { "reload" : true} trick, but it clears the page to a blank page and I must manually refresh for the changes to load.

Help?

The package.json should look something like this:

--

Update: no ignore that, see below.

What does yours look like? The template is built around a default svelte setup.

Yes, that doesn't really help too much for a Svelte app.

I've just checked the template package.json and it does contain a dev script:

{
  "name": "svelte-basic",
  "description": "A basic Svelte template for uibuilder and Node-RED.",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c --environment NODE_ENV:production",
    "dev": "rollup -c -w --environment NODE_ENV:development"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.0"
  }
}

It needs a rollup.config.js that looks like this:

import svelte from 'rollup-plugin-svelte'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import css from 'rollup-plugin-css-only'

// Added for uibuilder - the build output folder
const uibDist = 'dist'

// Assume production mode if not running dev
const production = !process.env.ROLLUP_WATCH;
console.log(`Production mode?: ${ production }. Output Folder: ${__dirname}/${uibDist}/build/`)

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: `${uibDist}/build/bundle.js`
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// we'll extract any component CSS out into
		// a separate file - better for performance
		css({ output: 'bundle.css' }),

		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		!production && serve(),

		// Watch the `src` directory and refresh the
		// browser on changes when not in production
		!production && livereload(uibDist),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		production && terser({ 
			ecma: 2015, // ES6
			mangle: { toplevel: true },
			compress: {
				module: true,
				toplevel: true,
				unsafe_arrows: true,
				drop_console: production,
				drop_debugger: production,
          	},
			output: { comments: false } ,
		})
	],
	watch: {
		clearScreen: false
	}
};

Hi EchoMike,
my solution(?)/ workaround for this message is to edit the package.json file to include
"start": "" within the scripts section:-

"scripts":
{
"build": "rollup -c --environment NODE_ENV:production",
"dev": "rollup -c -w --environment NODE_ENV:development",
"start": ""
},

Warning – I’m an enthusiastic amateur make these changes at your own risk!
Andrew

If someone can confirm that the start script is required, I can add it to the template for a future release & also update the documentation.

I do have the following in the package.json scripts in my test Svelte flow:

"start": "sirv public --no-clear"

Wow, sorry. I just re-read what I wrote and it is super confusing. :stuck_out_tongue:

I have the default rollup config and package.json that UIBuilder installed. Running the "npm run dev" prints 3 errors after starting a file watch saying "missing script: start". The file watch still works, its' just the errors that threw me for a loop the first time I ran it.

I can edit my files to get rid of the error, but it would also be good to fix the repo to either remove the start command from the rollup config, or to include a blank command in the package.json. Since I'm using Node-Red to serve the page: keeping an empty start command is probably ideal since without it the dev command still watches and recompiles on file change just fine.

I would personally have an empty start command (or remove it from the rollup config) and provide a seperate command to self-serve. Maybe "npm run serve" for example.

Just kidding: adding an empty start command locks up the watch command. I just removed it from the rollup config and it works nicely now.

Thanks for that, I will fix the template and docs. Will be in the next release.

Ah, actually, not sure that is correct. Looking at the rollup config, I think you NEED the start as it starts the dev server in dev mode. That is actually useful because it works seamlessly with Node-RED and does a live reload.

So you don't actually use the dev server directly but it gives you the auto-reload when you make changes which is really nice.

The start script is only called when you run the dev script.

So, I will add the correct start script back into the template.

Code change committed to GitHub. Will be published next time I publish an update.