Svelte Typescript Webpack Starter

Svelte-Framework Starter with TypeScript, WebPack, Bootstrap, Font-Awesome, and some other goodies

#svelte-components #svelte #boilerplate #typescript #javascript #webapp-boilerplate

Download

Svelte-TypeScript-WebPack-Starter

This is a Svelte Starter-Project containing:

Svelte v2.9.9
TypeScript
jQuery 3
WebPack 4
Bootstrap 3
Font-Awesome
RxJS
Lodash
whatwg-fetch

Demo app

This demo uses jquery.dataTables and Toastr plugins. Toastr is currently inactive but its package still available.

Structure

The core of the app is located in the init directory.

File	Function
main.ts	boots the initial code
polyfills.ts	imports browser polyfills
vendor.ts	imports all 3rd party scripts

main.ts contains these two lines of code that instantiate the app.

import { Main } from 'app/components';
Main('#svelte-app');

We import the Main function that takes a CSS selector to hook up the Svelte component. The definition of the component itself is located main.sve.

After a successful start the app will also provide a reference to itself in a globally available object window.app.

Of course, this is for testing purposes only.

There's no rule that Svelte components have to be named with a *.sve extension. It's just my own way of distinguishing between 'ordinary' HTMLs and those containing Svelte code. If you don't like this approach, simply change the regex for svelte-loader in webpack.common.js.

The Svelte component from this demo is located here and comprises of three parts:

Style (between <style> tags)
Structure (between <div> tags)
Logic (between <script> tags)

I've tried to produce a demo that does something more complex than Hello World!

It fetches JSON-data from a remote server
Presents those data in a nicely looking table
It even displays a toast! :-)

The fetch-functionality is located in a separate API that'll be of some use to you in more complex scenarios, I hope.

The handling of tabular data is located in a few custom methods that follow Svelte's rules.

All the Styles are located here.

WebPack Configuration

Many parts of the webpack configuration are based on the configs from Angular2-WebPack-Starter.

The main Webpack.config.js in the root directory contains a simple switch statement that selects the appropriate version depending on your current settings (prod or dev).