Using SmartUI with SvelteKit

Setup Svelte Application

We have to create new project, we are going to use the following commands:

npm create svelte@latest smart-app
cd smart-app
npm install
npm run dev

When you run the first command, a few questions will appear

1. The first one will be for the template. Choose Skeleton project
2. The second is for adding TypeScript, choose no.
3. On the last one, just press enter.

Install SmartUI

It is time to install SmartUI, run the following command to install it.

npm i smart-webcomponents

Copy smart-webcomponents/source/styles/smart.default.css into the static folder.

Now open app.html and add link for the css:

<link rel="stylesheet" href="%sveltekit.assets%/smart.default.css">

Single Page Application or No?

If you now try importing a component and using it, an error will occur. 'window is not defined'.

The problem occurs because Smart Components rely on the browser APIs.

You have two options: to disable the ssr or by creating a custom server and mock these APIs.

If first solution is the easies one, just create new file src/routes/+layout.js and add this

export const ssr = false;

Now just open +page.svelte and import SmartUI's component:

<script>
    import "smart-webcomponents/source/modules/smart.button.js";
</script>

<h1>Welcome to SvelteKit</h1>
<smart-button>Button</smart-button>

Creating custom server

If you want to use SSR, create a custom server with the following steps:

1. To use a standalone server, Svelte suggests us to install a special adapter
2. Run this command to install it:

   npm i -D @sveltejs/adapter-node

3. After installing it, add it to the svelte.config.js:

   import adapter from '@sveltejs/adapter-node';
   
   export default {
       kit: {
           adapter: adapter()
       }
   };

4. Now, create a custom-server.js in the root folder
5. Install express and @davidloiret/domino-custom-elements

   npm install express @davidloiret/domino-custom-elements

6. Open the server file and paste the following:

   import express from 'express';
   
   async function run() {
       const domino = await import('@davidloiret/domino-custom-elements')
   
       const win = domino.createWindow();
   
       global.window = win;
       global.document = win.document;
       global.navigator = win.navigator;
       global.HTMLElement = win.HTMLElement;
       global.Element = win.Element;
       global.DOMTokenList = win.DOMTokenList;
       global.Node = win.Node;
       global.Text = win.Text;
   
       await import('smart-webcomponents/framework/smart.element.js');
   
       global.Smart = window.Smart;
   
       const app = express();
   
       const { handler } = await import('./build/handler.js');
   
       // let SvelteKit handle everything else, including serving prerendered pages and static assets
       app.use(handler);
       app.use(express.static('static'))
   
       app.listen(3000, () => {
           console.log('listening on port 3000');
       });
   }
   
   run()

7. You may have seen this 'handler', which is imported from the build folder. To generate it, simply run

   npm run build

   This build should be done on each change.
8. To run the application, edit the package.json and add a script for starting the server:

"scripts": {
		"dev": "vite dev",
		"server": "node custom-server.js",
		"build": "vite build",
		"preview": "vite preview"
    }

You can safely start the application using npm run server and navigate to http://localhost:3000