Using Svelte.js with Laravel Part 2: Make Svelte scaffold in Laravel 6

#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.

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

After installation complete move to project directory.

$ cd laravelt

Now we have to install an npm package. This package is also from WeWowWeb. The package is called laravel-mix-svelte. This will simply add to Laravel Mix the capability to compile Svelte code.

$ npm install wewowweb/laravel-mix-svelte

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

// 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.

$ 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.

// 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.

// 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.

// 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.

// _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;

// 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.

$ 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.