This is a Svelte Starter-Project containing:
- Svelte v2.9.9
- TypeScript
- jQuery 3
- WebPack 4
- Bootstrap 3
- Font-Awesome
- RxJS
- Lodash
- whatwg-fetch
This demo uses jquery.dataTables and Toastr plugins. Toastr is currently inactive but its package still available.
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:
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 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.