TheLazy.Dev
Portfolio GitHub

Blog

svelte |laravel |laravelsvelte |tutorial

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

shuv1824

Shah Nawaz Shuvo

Posted on June 11, 2019

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

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

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

We shall get the following output.

Laravel development server started: <http://127.0.0.1:8000>
Enter fullscreen mode Exit fullscreen mode

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

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

$ php artisan preset svelte
Enter fullscreen mode Exit fullscreen mode

Now to install the JavaScript dependencies.

npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

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

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.

💖 💪 🙅 🚩
shuv1824
Shah Nawaz Shuvo

Posted on June 11, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

September 9, 2019

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

June 11, 2019