Using Svelte.js with Laravel Part 1: Setting up Laravel application with Svelte
Tags: svelte, laravel, laravelsvelte, tutorial
Published: 2019-06-11 16:38:54

---
title: Using Svelte.js with Laravel Part 1: Setting up Laravel application with Svelte 
published: true
description: 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. A laravel svelte tutorial for beginners.
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. 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](https://getcomposer.org/download/). 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.
```bash
$ 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.
```bash 
$ cd project_name
$ php artisan serve
```
We shall get the following output.
```bash
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](https://github.com/wewowweb). To do that run the following commands.
```bash
$ composer require wewowweb/laravel-svelte-preset
```
Now to get the initial scaffolding of the project run the following.
```bash
$ php artisan preset svelte
```
Now to install the JavaScript dependencies.
```bash
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.
```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>
```
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.
![](https://thepracticaldev.s3.amazonaws.com/i/dnytxjdipydjg9kdczwo.png)

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.