Introduction
Today, we are going to be talking about setting up a smooth workflow on laravel for better and easier development. laraavel-mix is a wrapper around webpack and broswersync help to refresh during development. we are going to learn how to use these packages.
Requirement
the following should be installed on your machine.
- composer.exe
- Node
- python
- xampp or wamp
all latest versions
difficulty level
This tutorial is rated intermediate.
What would i learn?
- We are going to learn how to start or initiate a laravel App from scratch
- We are going know how to use composer.
- We are going to know how to compile and minify(compress) our sass and j
avascript files with laravel mix - We are also going to know how to use browserSyn to refresh our script automatically
Lets begin
After installing the above, we need we are going to use the htdocs folder as our working directory.
For this tutorial, My operating system is windows 7, and we are going to be using xampp install for our development.
Am going to assume you hav e completely installed the above requirements.
Head over to your xampp folder in the C: directory look for htdocs open it up, this is where we are going to install our laravel app for development.
Installation
Once the folder above is opened, How shift and right click the click on open command window here
On the newly opened command window enter
composer create-project --prefer-dist laravel/laravel newapp
newapp can be any name of your choice.
next up on the command line enter
npm install
next on the command line, enter
php artisan serve to run the laravel server.
once this done you can now go to you browser and enter localhost:8000
you should see the default laravel page.
Setting up Sass, laravelmix and BroswerSync to to work with laravel
laravel mix wasn't used in the old version of laravel, it is a wrapper around webpack which was used with elixir. BrowserSync is used during development, to help refresh your browser window to increase speed of development.
getting started.
Installation
We are to start by installing the npm dependencies
head over to the command line on your installation directory and run the command below to download the dependencies.
There are two methods in adding the dependencies
- Using your package.json file to add the devDependencies
add in the devDependencies block
"laravel-mix": "^0.10.0",
"browserSync:" "2.0.0",
Then run npm install on the command line
- using npm direct fom the command line
run npm install browser-sync browser-sync-webpack-plugin webpack-dev-server --save-dev
After the down completes on the command line you would notice we now have browserSync and laravel-mix folders inside our vendor
Setting up
image
open up `webpack.mix.js file found on the root directory of your application
Before setting up, we ave install bootstrap-sass by run the command
npm install bootstrap-sass
now lets set up our webpack.mix.js file for development
open and paste the code below
const { mix } = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'css', {
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets'],
})
.sass('resources/assets/sass/pages/home/home.scss', 'public/css/pages/home', null, {
'output': 'compressed'
})
mix.browserSync({
proxy: '127.0.0.1:8000'
})
yeep this is the magic file, first, we require laravel mix,
This mix.js('resources/assets/js/app.js', 'public/js') sends our javascript files in the resource folder to the public directory.
.sass('resources/assets/sass/app.scss', 'css', { includePaths: ['node_modules/bootstrap-sass/assets/stylesheets'], }) it include the bootstrap-sass to the assets folder for importation by other files
lastly
mix.browserSync({
proxy: '127.0.0.1:8000'
})
listen for the url localhost:8000 which is the laravel server
yepppp!!! we done
run npm dev watch
you have successfully set everything up. now go to localhost:3000 for development
see you
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @freemanity I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x