DEV Community

Mateusz Iwaniuk
Mateusz Iwaniuk

Posted on • Edited on

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

#svelte #webdev #beginners

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.

  1. Open your package.json
  2. Look at your ”scripts” section
  3. Add --host 0.0.0.0 to the end of the dev and start line
  4. 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"
  },
Enter fullscreen mode Exit fullscreen mode

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:

  1. Open your index.html file (located in public folder)
  2. Insert <div id="my-app"> into your <body> tag
  3. Insert all external CDN links to the end of your </body> tag
  4. Open your main.js file
  5. 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>
Enter fullscreen mode Exit fullscreen mode

src/main.js

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

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.

  1. npm install svelte-preprocess
  2. In your rollup.config.js import autoProcess and implement this 
import autoPreprocess from 'svelte-preprocess';

export default {
  plugins: [
    svelte({
      preprocess: autoPreprocess()
    })
  }),
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

src/components/tip/tip.scss

.tip {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

src/components/second.svelte

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

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;
    }
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Alt Text

Alt Text

Alt Text

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

3) Login with your GitHub account
Alt Text

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

5) Find your repository and save it
Alt Text

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

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

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.

Top comments (0)

Read next

danieljcafonso profile image

This Month in Solid #9: SolidHack started, new fellow and API change 😎

Daniel Afonso -

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -

nikhilxd profile image

Understanding LinkedIn Authwall: How it Works, Benefits, and Implementing it on Your Website

Nikhil Soman Sahu -

tsudhishnair profile image

Creating blurred or virtual backgrounds in real-time video in React apps

T Sudhish Nair -