Svelte webpack-babel-scss app

This is a project template for Svelte apps. It lives at https://github.com/markoboy/svelte-webpack-babel-scss. It is an expansion of https://github.com/sveltejs/template-webpack repository.

To create a new project based on this template using degit:

npx degit markoboy/svelte-webpack-babel-scss svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Table of Contents

• Get started
• Deploying to the web
  • With now
  • With surge
• Folder structure
• Available npm scripts
• Depedencies used
• VSCode extensions
• Todo

Get started

(Back to top)

Install the dependencies...

cd svelte-app
npm install

...then start webpack:

npm start

Navigate to localhost:8080. You should see your app running. Edit a component file in src, save it, and the page should reload with your changes.

Deploying to the web

With now

(Back to top)

Install now if you haven't already:

npm install -g now

Then, from within your project folder:

now

Find out more at now website.

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

(Back to top)

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public

Find out more at surge website.

Folder structure

(Back to top)

An overview of the folder structure that comes with this template:

svelte-webpack-babel-scss
│   README.md
│   svelte.config.js
│   webpack.config.js
│   babel.config.js
│   config files...
│
└───public
│   │   logo.png
│   │
│   └───dist
│   │   boundle files...
│
└───src
    │   index.html  // Html file used by webpack
    │   main.js     // Main entry file used by webpack
    │   app.scss    // Global scss file used by the app
    │   app.svelte  // Main application component used by the entry file
    │
    └───components    // Each component is stored in a separate folder with *.svelte and *.scss file
    │   └───component-name
    │   │   component-name.svelte
    │   │   component-name.scss
    │
    └───models    // Each javascript model (class) should be stored here
    │   model.js
    │
    └───scss    // All scss styling that can be injected in components or globally
    │   └───base
    │   └───layout
    │   └───mixins
    │   └───modules
    │   └───theme
    │   _essential.scss   // Should contain theming/mixins and styles that can be shared with application and components
    │   application.scss  // Global scss styles
    │
    └───stores    // All stores stored here
    │   store.js
    │
    └───utils   // All utility functions
    │   util.js
    │
    └───views   // All views of the application
    │   └───view-name
    │   │   view-name.svelte
    │   │   view-name.scss

This template has a few utilities, scss, views and components to demonstrate their usage. Any pull request is welcomed. Open an issue ticket if you have any problems.

Available npm scripts

(Back to top)

Depedencies used

(Back to top)

• Svelte
• Svelte Preprocess
• Webpack
• Babel
• Node sass
• Eslint

For more information for the packages check package.json

VSCode extensions

(Back to top)

• Svelte
• Svelte Intellisense
• Svelte 3 Snippets
• Path Intellisense

Todo

(Back to top)

• Webpack
• Update README file
• Jsconfigs for VSCode
• VSCode folder with settings
• Babel
• Eslint
• Scss
• Jest