Svelte main framework framework

An example of a project on a reactive framework (the page interface automatically and constantly reacts to changes in data on it) framework Svelte… Swelt easily integrates into any web programming language where it works JavaScript

Standard file structure in Svelte:

Let’s take a look at the main directories and files separately. Those directories or files that will not be described below, but are present in the images, are optional.

svelte / rollup.config.js

The svelte config builds on the basics of the rollup.js builder.

Inside, we import the modules we need in the project that are responsible for processing images, styles, JavaScript code and templates on Svelte.

Working code example:

import svelte from ‘rollup-plugin-svelte’;
import resolve from ‘@ rollup / plugin-node-resolve’;
import commonjs from ‘@ rollup / plugin-commonjs’;
import livereload from ‘rollup-plugin-livereload’;
import {terser} from ‘rollup-plugin-terser’;
import copy from ‘rollup-plugin-copy’

const production = !process.envROLLUP_WATCH;

import sveltePreprocess from ‘svelte-preprocess’;

const preprocess = sveltePreprocess({
postcss: {
plugins: [require(‘autoprefixer’)],

export default [
        input: ‘templates/portfolio.js’,
        output: {
            sourcemap: true,
            format: ‘iife’,
            file: ‘public/portfolio/build/portfolio.js’,
        plugins: [
                // enable run-time checks when not in production
                dev: !production,
                // we’ll extract any component CSS out into
                // a separate file – better for performance
                css: css => {

                // SCSS

            // If you have external dependencies installed from
            // npm, you’ll most likely need these plugins. In
            // some cases you’ll need additional configuration –
            // consult the documentation for details:
                browser: true,
                dedupe: [‘svelte’]

// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),

// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload(‘public / portfolio’),

// If we’re building for production (npm run build
// instead of npm run dev), minify
production && terser(),

targets: [
                    {src: ‘templates/img/*’, dest: ‘public/portfolio/build/img’}

watch: {
clearScreen: false

function serve() {
let started = false;

return {
writeBundle() {
if (!started) {
started = true;

require(‘child_process’)spawn(‘npm’, [‘run’, ‘start’, ‘–‘, ‘–dev’], {
stdio: [‘ignore’, ‘inherit’, ‘inherit’],
shell: true

svelte / templates /

The template directory looks like this:

svelte / templates / portfolio.js

This is the main connection file of the template. Inside the code:

import Portfolio from ‘./Portfolio.svelte’;

const portfolio = new Portfolio({
target: document.body,
props: {
name: ‘Portfolio’

export default [

svelte / templates / Portfolio.svelte

This is a regular svelte template.

The file structure has three parts:

1. Scripts (imports) and js code

import {Tabs, Tab, TabList, TabPanel} from ‘svelte-tabs’;
import {onMount} from “svelte”;

import Settings from ‘./portfolio/Settings.svelte’;
import {getCookieName, getFetch} from “./main”;

let nameOfShare = getCookieName(‘nameOfShare’);
let ticker = getFetch(‘get-share-in-portfolio /’ + nameOfShare);

2. The main block of code

<div class=“flex-table”>
<div class=“tables-column”>

<div class=“tables-column”>

<div class=“tables-column”>


3. Styles.

Styles can be global (import from another file) or specific (if styles are written inside the template) for the current file (template).

It might be normal css or preprocessor scss… (If enabled in the rollup.config.js file. We have it connected.)

<style lang=“scss”>
@import ‘scss / app’;

tablescolumn {
margin: 8px 0 0;

svelte / public / portfolio

svelte / public / portfolio / index.html

The content of the file (connects our js, which consists of the page and styles to it):

<html lang=“en”>
<meta charset=‘utf-8’>
<meta name=‘viewport’ content=‘width = device-width, initial-scale = 1’>

<link rel=‘stylesheet’ href=‘global.css’>
<link rel=‘stylesheet’ href=‘build / portfolio.css’>

<script defer src=‘build / portfolio.js’> </script>


svelte / public / portfolio / build

The contents of this directory will be generated automatically when we run:

Similar Posts

Leave a Reply