Svelte-TypeScript-WebPack-Starter
Svelte-TypeScript-WebPack-Starter copied to clipboard
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.
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.
![](http://i.imgur.com/ya9WMuH.png)
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.
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
.