Localnetwork configuring, CDN libraries, global styles and much more in Svelte

My live page from article: https://my-svelte-app.netlify.com/
My repo with code from article : https://github.com/Iwaniukooo11/my-svelte-project

JavaScript language is still growing. Nowadays, there are many different frameworks, which are commonly used in web development. One of them is Svelte – I call it ”a half-framework” because of its ease and flexibility. Programmers, who move to other frameworks are often confused and they need answer for common issues. People, who start their journey with svelte might be a little bit uncertain about basic subjects like f.e configuring local-network and adding libraries. In this article I’m going to show you how to:

configure your local network with svelte
add external JS libraries using CDN
add sass prepocessor and use it
declaring global scss styles and variables
deploy your app to Netlify

Configuring your local network

During your development time, regardless of state of your app progress,you want to have a view on your website. Basic local-host comes with npm run dev but there is one problem – you can’t see your project using mobile phone or any other device. Solving this issue is quite simple.

Open your package.json
Look at your ”scripts” section
Add --host 0.0.0.0 to the end of the dev and start line
Your package.json scripts should look like this:

 "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w --host 0.0.0.0",
    "start": "sirv public --host 0.0.0.0"
  },

Now typing either npm run dev and npm start command, your svelte app will be opened on local network and thanks to that, you will be able to see your project state on each device connected to your network (example: 182.165.1.10:5000).

Adding External CDN libraries

There is a moment, when you need to use any JS library (particlejs for simple example) but you don’t know how to do it. Your first think is to append it to your index.html which is located in public folder, but everything which is located in <body> tag is filled with your transpiled svelte code.
Solving this issue is also quiet simple – all you have to do is to change the place, which is filled by your svelte code.It may sound a little bit weird,but I’m going to explain it in 5 easy steps:

Open your index.html file (located in public folder)
Insert <div id="my-app"> into your <body> tag
Insert all external CDN links to the end of your </body> tag
Open your main.js file
Find and change the target value to document.getElementById('my-app') everything should look like that:

public/index.html

<body>
  <div id="my-app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
</body>

src/main.js

import App from "./App.svelte";
const app = new App({
  target: document.getElementById("my-app")
});

Now you are able to add external CDN Libraries and use them.

Adding SCSS

Nowadays,using sass is very common. Most of web-developers can’t imagine doing any project without using sass – it’s absolutely understandable. You can implement sass into your svelte app in very easy way. All you have to do is to download npm package responsible for sass, configure it in rollup.config.js file and you can use it in your project.

npm install svelte-preprocess
In your rollup.config.js import autoProcess and implement this

import autoPreprocess from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: autoPreprocess()
    })
  }),
}

Now if you want to use scss in your project, you’ll just have to add type parameter in style tag.It should look like that:

<style type="text/scss">
h1{
 color:royalblue
}
</style>

tip:
You are not obligated to have your whole scss code in the one style tag. You can write it in the different files and import it.

src/components/tip/tip.svelte

<style type="text/scss">
  @import "./tip.scss";
</style>

<h1 class="tip">Red color comes from different scss file:)</h1>

src/components/tip/tip.scss

.tip {
    color: red;
}

Declaring global styles and variables

Now that you’ve installed and implemented sass preprocessor,it’s time to show you how does the scope in svelte work and how to use global styles and variables.

If you add any simple code,you will see,that these styles don't work for components in other files, which have even the same class structure. Let me show you this, using example files in unreal project.

src/components/first.svelte

<h1 class="header"> This header has got pink color </h1>

<style type="text/scss">
.header{
 color:pink;
}
</style>

src/components/second.svelte

<h1 class="header"> 
And this header is no color-styled,
 there are literally no styles in this file
</h1>

Working with that is kind of specific in svelte,but I will show you how it works.
The way to handle global styles is to put your styles into :global class.

Everything which is included in global class will affect every element on your webpage.

    :global(.header) {
        font-size:22px;
        text-transform:capitalize;
    }

Thanks to this line of code, each of elements on your webpage with .header class will have a specific font-size and text-transform, regardless of it's location in any file.

The best place to declare your global CSS variables and styles is in Svelte.App file.

The global variables work in very similar way. To make sure, that your variables are available in each of files in your projects, the best option is to have it in one, :global class.

src/App.svelte

:global(html){
 --color-grey: #AEAEAE;
}

src/components/third.svelte

<h2 class="grey"> 
I have a color, which comes from 
--color-grey variable
</h2>

<style type="text/scss">
.grey{
 color:var(--color-grey);
}
</style>

Deploying to netfliy

When you are ready to show your project to the world,it’s time to depoly it. The best and the easiest way to do it is netlify, but you can do it with literally every hosting that you want.

1) Connect your project with github
It's so simple - All you have to do is to create new repo and follow given instructions

2) Login to Netlify and click Create new site from git

3) Login with your GitHub account

4) If you don't see your repo to select, click this link on the bottom of the page

5) Find your repository and save it

6) Type npm run build in Build command input and public in Publish directory and then click deploy site

7) And it works! If you want, you can change your domain name in Domain settings > Custom domains > Options

And then change name

Everything should work fine.

Conclusion

Svelte is amazing framework and it works perfect with small projects. It may be hard to find yourself and to configure basic things, but I believe that I could help you.

My live page from article: https://my-svelte-app.netlify.com/
My repo with code from article : https://github.com/Iwaniukooo11/my-svelte-project

Blog