Using Svelte.js with Laravel Part 1: Setting up Laravel application with Svelte

#svelte #laravel #laravelsvelte #tutorial

Svelte is a radical new approach to building user interfaces. It is not a frontend framework. It is lightweight and has simple syntax that compiles to vanilla JavaScript. In this post we will integrate Svelte.js with laravel and build a small application.

In this first part we will be setting up a fresh Laravel project locally and replace the Vue.js scaffolding that comes with Laravel with Svelte.js scaffolding. We can do it with the following steps.

Installing Laravel

To install a fresh Laravel project we need Composer. Make sure we have PHP 7.2 and composer installed first. I am not going to get into installing PHP, composer, Node.js, npm etc. and setting up local server for Laravel. I assume we have all that initial things set up and we are ready to go. You can use XAMPP/ WAMPP/ MAMPP or any other dev server you prefer.

To create a new Laravel project via composer we need to use the following command in our desired directory where we want our project to be stored.

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

This will install a fresh Laravel project on our local machine. lets cd into our new project directory and run the project.

$ cd project_name
$ php artisan serve

We shall get the following output.

Laravel development server started: <http://127.0.0.1:8000>

Our project is served on http://127.0.0.1:8000. Browse this link and we will see the Laravel 5 welcome page.

Installing Svelte Preset

Now we will be installing laravel-svelte-preset by We Wow Web. To do that run the following commands.

$ composer require wewowweb/laravel-svelte-preset

Now to get the initial scaffolding of the project run the following.

$ php artisan preset svelte

Now to install the JavaScript dependencies.

npm install && npm run dev

The package will provide us with the initial set of files.

/js/app.js
/js/components/App.svelte
webpack.mix.js

Now our Svelte is fully set up with our Laravel project instead of Vue.

Svelte Application Setup

Now to mount the Svelte app in our Laravel blade file we need to open the resources/views/welcome.blade.php file in our preferred editor and replace everything from the page with the following.


<!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>

This will mount our Svelte app from resources/js/components/App.svelte file into welcome.blade.php. Now if we check our browser we will get the following page instead of Laravel 5 welcome page.

This is a short and simple way to integrate Svelte.js with Laravel 5.8 with laravel-svelte-preset. In this series we will be building a simple app with Svelte frontend and Laravel API. We will be starting our project in the next part of this series. Let me know what you think of it and what type of project we can build here. Cheers.

Update: This preset only works in Laravel 5.8. But now Laravel 6 has been released and this does not work in Laravel 6. To make this work for Larvel 6 we have to do some little tweaks ourselves. I will explain it in the next part.

Top comments (6)

waldo saavedra • Oct 1 '19

Hi, I was watching your application in dev "Using Svelte.js with Laravel Part 1" excellent guide, I am currently learning Svelte and Laravel, I am assembling an architecture with these programs to update an old application.
well, I have installed svelte and tailwind in laravel.
I have managed to integrate the views of laravel tailwind but not the components of Svelte, I need to configure something that I do not know how to do it can help me it would be an excellent development platform since both minimize the js and css.
regards

Amjad Iqbal Khan • Aug 27 '19 • Edited

next part? i think a simple crud app will be great

Shah Nawaz Shuvo • Aug 27 '19

Thank you so much for your comment Sir. I will definitely try to build a small app and share it with you all soon. Stay tuned.

lk-stone • Sep 4 '19

Yes, a small CRUD app would be great. I'm currently learning Svelte and Laravel with the intent of interaction with a Google sheets (csv) file, etc., to learn CRUD. Thank you in advance! Cheers!