Let's say that you want to add some interactive feature to the frontend of your site. You could of course use vanilla JS for that if it's something simple. But if you need to build something more complicated you would probably reach for some sort of frontend framework.

Now if you want to use Vue for that, that would be pretty simple, you could just call Vue with script tags to your page and immediatley start using it. Unfortunately that can't be said for Svelte. Because Svelte is a compiler, you would need to add a build step to your build pipeline. So in this episode I'm going to show you how to do that using Gulp and Webpack.

In this episode I'm going to show you how to add Svelte to your existing site using Gulp and Webpack.

How To Add Svelte To Your Site?

In this episode we are going to install Sage, check out what the theme structure looks like, and what specific files and directories do. And then I'm also going to show you how to make compilation of SCSS a little bit faster. Because Sage is using Webpack for SCSS compilation, and that is unfortunate because Webpack is not very fast when dealing with SCSS.

In this miniseries we are going to take a look at Sage WordPress starter theme, and how it can make our lives as theme developers much  easier.

Install and Overview

We have been using this method of organising JavaScript files at work for a few months now, and are pretty happy with it. I'm not saying it's the best method but works very well for us. Hope you can find this method usefull and feel free to use it on your projects. Of course we will be using [webpack](http://watch-learn.com/video-tutorials/basic-frontend-tools-webpack) to set this up. But nothing complicated.

In this episode I'm going to talk about and show you one cool way of organising your projects JavaScript files.

Organising JavaScript

Webpack is used to bundle your .js modules into a single file, and you can think of modules as files. 

JavaScript does not natively support file includes like some other languages. So that is where Webpack comes in, it will bundle your files so that almost all browsers can read them.

It also helps us organise our JavaScript app into multiple files. Which we can then import and use them when needed. 

Webpack is also much more than just module bundler, it could also be used as task runner, and some developers are using it exactly like that. Although in this video we are not going to go into detail about Webpacks capabilities,  I will show you an example of how you can compile scss files with Webpack, so that you can get a taste of what Webpack can do.

In this episode we are going to cover basics of Webpack module bundler.

Webpack

In this first episode of Vue 2 and October CMS Todo App series we are going to set up our development environment.

First we'll install a fresh copy of October CMS, and then in the same folder I'm going to show you how to very easily setup Vue.js 2.0 with Webpack and scaffold our application with Vue CLI.

As you will see this is all very easy stuff.

In this series we are going to create a todo app using October CMS as backend and Vue.js 2 as frontend of our App.

Setup

At the beginning of this series I [showed you how to use Laravel Elixir](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-04-setting-up-laravel-elixir) for your assets pipeline. And in this episode we are going to cover something similar, evolution of Laravel Elixir into Laravel Mix.

Laravel Mix is a wrapper around Webpack that allows you to very easily write Webpack configuration files. In this episode I'm going to show you how to easily set it up for October CMS, I'm also going to show you how to bundle your modules with Webpack and how to use BrowserSync to reload your page every time you make a change.

In this episode we are going to take a look at how you can use Laravel Mix (wrapper around Webpack) to create your asset pipeline in October CMS.

Tutorials tagged with: webpack

Get in touch