loading...

My dream Svelte template using Sapper and Material UI

csaltos profile image Carlos Saltos Updated on ・2 min read

What ?

A web app template using Sapper 0.28.0 and Svelte 3.17.3 with a Material UI theme based on Smelte 1.0.15 updated to September 25th, 2020

NOTE: TypeScript, PostCSS and CSS purging are included as a bonus.

Why ?

Because Material UI is cool and when used with Sapper and Svelte is really productive and powerful.

How ?

Run the commands:

npx degit csaltos/sapper-svelte-material-ui app1
cd app1
npm i
npm run dev

And open the browser at http://localhost:3000 to see a Sapper page done with a Material UI using Svelte.

Where ?

At https://github.com/csaltos/sapper-svelte-material-ui you will find the source code as a reference which is based on the original Sapper with Svelte template.

Please take special attention to the commit at 17a3021 which contains the exact change details to activate Material UI with Sapper using Smelte.

Who ?

This template is possible thanks to Maxim Matyunin and his cool Smelte project and also Jacob Babich for his excellent template based on PostCSS. Also especial thanks to dan for his reference code.

IMPORTANT: obviously this is only a starting point, please review the documentation at https://smeltejs.com/ and https://www.apostrof.co/blog/getting-tailwind-css-to-integrate-nicely-with-svelte-sapper/ for further steps.

NOTE: if you prefer to use Tailwind CSS with other UI please give it a check to a base project on https://dev.to/csaltos/tailwindcss-with-sapper-and-svelte-50ll

Posted on by:

csaltos profile

Carlos Saltos

@csaltos

I code in Scala, Javascript, Python and Ruby. Now trying to learn Svelte, Elixir, Haskell and Rust.

Discussion

pic
Editor guide