ptzagk / svelte-typescript-webpack-starter

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

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.

• main.ts
• polyfills.ts
• vendor.ts

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).

Installation

npm install

Then type

npm run start:server

to run the app on http://localhost:3000.

To create a development build type

npm run build:dev

Afterwards, either copy the newly created dist folder to your web server or type

npm run server:prod

to launch a local server on http://localhost:8080

For productive builds use build:prod.

License

MIT