Localnetwork configuring, CDN libraries, global styles and much more in Svelte
Tags: svelte, webdev, beginners
Published: 2020-03-23 21:32:20

- 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.
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:
```json
 "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:

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:

<br/>
*public/index.html*
```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*
```javascript
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. 

1. ``npm install svelte-preprocess``
2. In your **rollup.config.js** import autoProcess and implement this 
```javascript
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: 
```html
<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*
```html
<style type="text/scss">
  @import "./tip.scss";
</style>

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

*src/components/tip/tip.scss*
```css
.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*
```html
<h1 class="header"> This header has got pink color </h1>

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

```

*src/components/second.svelte*
```html
<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.**
```scss
    :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*
```scss
:global(html){
 --color-grey: #AEAEAE;
}

```

*src/components/third.svelte*
```html
<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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3akki2t34183jdn5jwjc.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1w3q9s3as75svc1f657z.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fbf6yyo6pbagemp6xmwi.jpg)

2) Login to Netlify and click **Create new site from git**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1x84hgq1pczhlf0d7fku.jpg)

3) Login with your GitHub account
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xh9bg5ep7z1ujycq2tg4.jpg)

4) If you don't see your repo to select, click this link on the bottom of the page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4mtpjt284y6qkhs5fkk7.jpg)

5) Find your repository and save it
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pf65mw0qkbm0j5dt5ezl.jpg)

6) Type ``npm run build`` in *Build command* input and ``public`` in *Publish directory* and then click **deploy site**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i43o7917aa0tacgzwu3j.jpg)

7) And it works! If you want, you can change your domain name in Domain settings > Custom domains > Options
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wh5twus4fgi2ui1swkp3.jpg)
And then change name 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gcqivn46tvtkt4dg21bg.jpg)

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