How to develop locally a Laravel app using Laragon

In this article I'll show you how to develop locally a new Laravel app using Laragon.
In the far 2017 I wrote an article about how to setup Laravel Homestead: the process is not as quick and easy as you can wish but following each step you can end up with a working development environment for Laravel. At that time, Laragon was already 2 years old but I never heard anything about it. And other 2 years should go by before I see the Laragon light.
As you can read in Laragon repo,

Laragon is a portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.

In just a few clicks it will install in your Windows* machine everything you need to develop web applications in your local environment: Apache, Nginx, MySql and more (for a full detailed list refer to Laragon page, please). In other words, just forget WAMP, XAMPP or any other tool you've used till now: Laragon is incredibly fast and offers a range of tools and features that let you focus on develop your apps, doing all the dirty work for you. And you'll can access it using a pretty url like your-app-name.test not the horrible localhost/your-app-name.

Unfortunately, Laragon is available only on Windows. if you use a Linux box and you wish to take a look at this wonderful tool, you can use one of these packages to run Windows software on Linux

One of the features I love more is the Quick app command: with just a click you can get your new application up and running, ready to be developed by you. Today, I want to show how easy it can be start a new Laravel application using Laragon, and how to add Bootstrap to it.

Step 1: install Laragon

Go to Laragon download page, download the last version then just run the installer: Next, Next, Next...
Laragon starts instantly and I recommend to set it up to run when Windows starts.

Step 2: create a Laravel application

Just a right click on the Laragon window or on the Laragon tray icon to open a rich menu: just click on Quick app->Laravel, type the name of your new application (in this article I'll use "laraone") and let Laragon work for you.
A command prompt will be open and you'll see the process going on. If you have installed Laragon with the defaults, a new folder with your app name will be created in C:\laragon\www directory and everything will be installed there.
When the process is completed you should see something like this in your command prompt:

***** NOTE: Now, you can use pretty url for your awesome project :) *****
-------------------------------------------------------
(Laragon) Project path: C:/laragon/www/test
(Laragon) Pretty url: http://test.test
-------------------------------------------------------

Sometimes, in Windows the command prompt seems to stuck, with a blinking cursor in a black desert: if this is the case click on the Laravel tray icon and this should just fix the issue. Otherwise reload Laragon.

If you go to C:\laragon\etc\apache2\sites-enabled folder, you will see that Laragon has created a new configuration file called auto.laraone.test.conf. In this file is defined the Virtual Host for your new application. You can take a look just to see how Laragon works.

Step 2: install node_modules

Now Laravel is already installed and ready to start but I want to use Bootstrap and to install it I need to install npm first.
The Windows command prompt should already be in your new application directory: if this is not the case, move there manually or just open a new command prompt in C:\laragon\www\laraone directory and type

npm install --no-bin-links

This installs node_modules in your application

Step 3: fix package.json

Now we have to correctly set the path to cross-env.js in package.json file.
Open the file package.json and replace the constant "cross-env" with the actual path to cross-env.js: in my last installation cross-env.js was located in node_modules/cross-enc/src/bin.
The final result should look like:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue-template-compiler": "^2.6.11"
    }
}

Step 4: installing Bootstrap

To install Bootstrap we just need to type some more commands in the command prompt:

a) composer require laravel/ui: it can takes some time
b) php artisan ui bootstrap: this will actually install bootstrap
c) as required, run npm install && npm run dev

That's all! Now Bootstrap is installed and all its stuff is in C:\laragon\www\laraone\resources\sass\app.scss and in C:\laragon\www\laraone\public\css\app.css.
Reload Laragon once ore time and type laraone.test in your browser.
Ready to go to write your code!

More about Laragon and its magic in a next article. Because this is important to notice: Laragon is not only Laravel: Wordpress, Joomla, Drupal, PrestaSHop, CakePhp... And it's not only about Php, not only about MySql, not only about... Okay, in a next article :)