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.
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
}
};
Wow, sorry. I just re-read what I wrote and it is super confusing.
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.
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.
