A basic boilerplate for Svelte Framework containing:
- TypeScript
- WebPack
- Bootstrap 3
- Font-Awesome
- RxJS
- Lodash
- node-fetch
This demo uses jquery.dataTables and Toastr plugins.
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 |
In the original form main.ts contains only two lines of code that instantiate the demo app. In a more realistic project this script would usually comprise of several imports that'd constitute your booting mechanism.
import { Main } from 'app/components';
Main('#svelte-app');In the script above 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:
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.
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).
npm install
Then type
npm run start:server
to run demo app in webpack-dev-server.
To create a development build type
npm run build:dev
Then copy the content from newly created dist folder to your web server.
For productive builds use build:prod.