Rebuild Twitter with Laravel – Laravel Mix

Rebuild Twitter with Laravel - Laravel Mix

This is Part 5 of Rebuild Twitter with Laravel. Previously, you created the foundation, built profile and timeline, and introduced the tweeting feature. And the most important, you’ve upgraded to Laravel 5.4. You’re ready for the Laravel 5.5 which will be released in August of 2017 (Laravel 5.5).

In this part, you’re not bringing any new feature to your user. Instead, you improve your development process with Laravel Mix.

Previous parts of Rebuild Twitter with Laravel
Part 1 – Rebuild Twitter with Laravel — User and Authentication
Part 2 – Rebuild Twitter with Laravel — Followers
Part 3 – Rebuild Twitter with Laravel — Timeline
Part 4 – Rebuild Twitter with Laravel — Upgrade to 5.4, Post Tweet, Link Preview, URL Shortener

Offline version

If you are interested to study without the internet, you can get the FREE tutorials of this series in PDFs. Subscribe to my email list and I’ll deliver the PDF to your inbox.

iteachyouhowtocode.com

Setup project for the first time

I’ve moved the setup instruction to the project README.MD.

Planning

Today we don’t talk about Twitter. We focus on organizing our frontend resources to be more manageable and reusable.

Let’s summarise your planning,
1. Replace Elixir with Mix
2. Move javascript code from blade template to javascript file
3. Version javascript and CSS files

Laravel Mix

Laravel Mix is a new project which replaced Laravel Elixir in Laravel 5.4.

Elixir and Mix are wrappers around popular frontend toolkits that aim to automate your development workflow. They are the tools that help you to combine, minify, uglify, and pre-process your javascript and CSS. Their end goal is to make developer’s life easier.

Laravel Elixir is built around Gulp and Laravel Mix is built around Webpack.

Replace Laravel Elixir with Mix

If you’ve been following Rebuild Twitter with Laravel, your project probably has no Mix even after upgrading to 5.4.

Here you manually replace Elixir with Mix.

You download the necessary files from the Laravel Github project.

Head to https://github.com/laravel/laravel/tree/v5.4.23
Replace these files in your project with Github project
1. /package.json replaces with https://github.com/laravel/laravel/blob/v5.4.23/package.json
2. /webpack.mix.js downloads from https://github.com/laravel/laravel/blob/v5.4.23/webpack.mix.js
3. /resources/assets/js/app.js replaces with https://github.com/laravel/laravel/blob/v5.4.23/resources/assets/js/app.js
4. /resources/assets/js/bootstrap.js replaces with https://github.com/laravel/laravel/blob/v5.4.23/resources/assets/js/bootstrap.js

Execute command to download packages.

When you hit errors on building scripts for development, delete the folder node_modules and package-lock.json. After that, execute the commands again.

Terminal

It’s all set.

Move javascript code from blade template to javascript file

First of all, you remove all the javascript dependencies from blade file.

Then, you install the javascript dependencies with NPM.

Require the dependencies in the app.js.

Next, move the tweet-component to Tweet.vue.

Declare the component.

Remove the app constant from app.js

This constant will override the Vue object in home page.

Oh, wait. What about the javascript code on view file?

Move your javascript code in home.blade.php to resources/assets/js/pages/home.js.

Then, update the webpack build script.

Alright, now remove all the unnecessary javascript code and import the home.js.

Move the javascript code from Profile layout to a single javascript file.

Not the least of which, import the important javascript files on layout file.

Well. It doesn’t work yet because the username and isFollowing are from PHP blade template.

How do we inject them into Javascript?

Here I have a simple hack, which probably not an elegant solution. If you have better suggestion, let me know.

Refer to the App.

You injected the variables into the javascript through window.App.

Run all Mix tasks.

Terminal

Development

During development, you can automatic the build steps by watching the javascript and css files.

Build steps will run every time you save the changes to the file.

Versioning

Versioning is crucial in web development. Browser cache JS and CSS files for better performance. However, the downside is it won’t detect the changes in the file and download the newer version. Unless the user clears the cache in the browser. This is not a common practice for most of the people, especially not a web developer.

In a simple way, you can manually versioning your files by appending the ‘?version=1’ to the link to the file.
Laravel Mix provides a handy way for you. It version the file by appending a hash value to the file name to prevent repeating file name by mistake.

Terminal

Chrome Dev Tools

You can version the files only for production.

There are two things you can do
1. Subscribe to my email list, I will email you when the next post is ready.
2. If you find this guide helpful, share this guide to your friend. I feel grateful if you do that, I’m sure your friend will thank you as well.


Also published on Medium.