Setup Svelte Material UI

1. Install svelte-preprocess

   npm install -D svelte-preprocess

2. Install any Svelte Material UI comonent:

   npm install --save-dev @smui/button

   Note: you need to install at least one component otherwise you cannot compile the theme css.
3. Install smui-theme and create a template at src/theme

   npm install -D smui-theme
   npx smui-theme template src/theme

4. Add following script to scripts section of package.json

   "prepare": "smui-theme compile public/build/smui.css -i src/theme"

5. Compile the css from smui-theme template:

   npm run prepare

   It should create public/build/smui.css
6. Add the compiled css to public/index.html file:

   <link rel='stylesheet' href='/build/smui.css'>

7. Add Material Fonts to public/index.html

   <link
     rel="stylesheet"
     href="https://fonts.googleapis.com/icon?family=Material+Icons"
   />
   <!-- Roboto -->
   <link
     rel="stylesheet"
     href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
   />
   <!-- Roboto Mono -->
   <link
     rel="stylesheet"
     href="https://fonts.googleapis.com/css?family=Roboto+Mono"
   />

Set up http proxy for Svelte web app using rollup-plugin-dev

• Install rollup-plugin-dev:

  npm install -D rollup-plugin-dev

• Modify rollup.config.js:

  import dev from 'rollup-plugin-dev';
  ... ...
  export default {
  	... ...
      plugins: [
      	... ...
          !production && dev({
          	host: 'localhost',
  			port: 5000,
  			dirs: ['public'],
  			proxy: [{ from: '/__mflux_svc__', to: 'http://localhost:8086' }]
  		}),
      
      // !production && serve(),
      ... ...
      ]
  }
  	

see also

• rollup-plugin-dev github
• rollup-plugin-dev v2.0.0 release notes

Create a Svelte Typescript app from rollup template

1. Initialize Svelte Web App:

   npx degit sveltejs/template svelte-ts-app
   cd svelte-ts-app
   node scripts/setupTypeScript.js
   npm install
   

2. [Optional] Install rollup-plugin-dev to enable http proxy
3. [Optional] Setup Svelte Material UI components
4. Starts rollup dev mode:

   npm run dev

5. Building and running in production mode:

   npm run dev
   npm run start
     

see also

• Svelte App Template (Rollup)
• Svelte App Template (Webpack)
• How to get rid of the "@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps." warning?