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.sveltewebpack.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)
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
next part? i think a simple crud app will be great
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.
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!
Why would one use Svelte within Laravel (or is it Laravel within Svelte)?
Couldn't one use just SvelteKit for the backend operations?
Nicee,