Using Svelte.js with Laravel Part 2: Make Svelte scaffold in Laravel 6
Tags: svelte, laravel, laravelsvelte, tutorial
Published: 2019-09-09 15:49:15

---
title: Using Svelte.js with Laravel Part 2: Make Svelte scaffold in Laravel 6 
published: true
description: Svelte is a radical new approach to building user interfaces. In my last post I used a package called laravel-svelte-preset to get Svelte scaffolding in Laravel 5.8. But this package is not yet compatible with new Laravel 6. In this post we will manually make a Svelte scaffold in Laravel 6.
series: Using Svelte.js with Laravel
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ym3u6eyiksxg2emiphkz.jpg
tags: svelte, laravel, laravelsvelte, tutorial
---
Svelte is a radical new approach to building user interfaces. In my last post I used a package called laravel-svelte-preset to get Svelte scaffolding in Laravel 5.8. But this package is not yet compatible with new Laravel 6. In this post we will manually make a Svelte scaffold in Laravel 6. For this we will start fresh. 

First install a fresh Laravel 6 project.

```bash
$ composer create-project --prefer-dist laravel/laravel laravelt
```

After installation complete move to project directory.

```bash
$ cd laravelt
```

Now we have to install an `npm` package. This package is also from [WeWowWeb](https://github.com/wewowweb). The package is called [laravel-mix-svelte](https://github.com/wewowweb/laravel-mix-svelte). This will simply add to Laravel Mix the capability to compile Svelte code.

```bash
$ npm install wewowweb/laravel-mix-svelte
```

After installation is finished open your `webpack.mix.js` file and make it look like the following.

```javascript
// webpack.mix.js
const mix = require('laravel-mix');

require('laravel-mix-svelte');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .svelte();
```

After this install the following dependencies.

```bash
$ npm install --save jquery popper.js bootstrap svelte
```

Now we have to make some files manually and code a little bit by ourselves. Inside your `resources/js` directory make a directory named `components` and inside `components` make a file named `App.svelte`. Your `App.svelte` should look like this.

```javascript
// App.svelte
<script>
	import { onMount } from "svelte";

	onMount(() => {
	  console.log("the component has mounted");
	});
</script>

<main>
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-md-8">
				<div class="card">
					<div class="card-header">
                        Example Component
                    </div>
					<div class="card-body">
						I'm an example component.
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
```

Now edit your `resources/js/app.js`.

```javascript
// app.js
require('./bootstrap');

import App from "./components/App.svelte";

const app = new App({
  target: document.body
});

window.app = app;

export default app;
```
Now for the `resources/views/welcome.blade.php` file. It should look like the following.

```php
// welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    </head>
    <body>

        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
```

Finally we have to add bootstrap to the mix. Make two `.scss` files in the `resources/sass` directory named `_variables.scss` and `app.scss`.

```scss
// _variables.scss
// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;
```

```scss
// app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
```

We are almost done here. We literally made a Svelte.js scaffold in our Laravel 6 application. Now we can transpile Svelte by webpack and get our Svelte component in Laravel application.

```bash
$ npm run dev && php artisan serve
```

Now hopefully we will see a page containing a sample Svelte component when we browse our local server. I hope you guys will try it out and please let me know how it goes. I'm just experimenting with this a little. Hope you all like it. Cheers.