Laravel Logo

Here are two useful commands that you can use every day and one that’s good for getting yourself setup.

serve

Why It Exists

The serve command exists to wrap the built in PHP development server so you can use it to develop your Laravel application.

Scotts-Air:hdtgmcacher scottkeckwarren$ php artisan serve
Laravel development server started: http://127.0.0.1:8000

Now you can access your application by visiting http://127.0.0.1:8000 in your browser.

When Should You Use It

The build in web server is an awesome tool if you don’t need the more complex setup that Laravel Homestead or a custom VM would provide.

tinker

The tinker command provides an interactive tool to interact with your application.

ubuntu@ubuntu-xenial:/var/www$ php artisan tinker
Psy Shell v0.9.9 (PHP 7.3.9-1+ubuntu16.04.1+deb.sury.org+1 — cli) by Justin Hileman
>>>

When you’re inside tinker you can enter any command you would like and it will be executed using your application’s classes. You can even do crazy things like persist data to the database.

>>> $task = new \App\Task();
=> App\Task {#3000}
>>> $task->save();

Why It Exists

To provide a place to run quick commands and interact with your data using eloquent.

When Should You Use It

Any time you need to quickly run a command to interact with your data or want to search for something and then use Collections to interact with the data.

preset

Why It Exists

The preset command allows you to quickly change the front-end scaffolding for your application. It allows you to switch between using none, bootstrap, vue, and react.

For example, if we run this with the “bootstrap” option:

ubuntu@ubuntu-xenial:/var/www$ php artisan preset bootstrap
Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

Then we can look at what has changed and see it’s added bootstrap’s files and settings to our “package.json” file:

Scotts-Air:hdtgmcacher scottkeckwarren$ git diff
diff --git a/package.json b/package.json
index 9fcb8ee..aea4e61 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,12 @@
     },
     "devDependencies": {
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.13",
+        "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0"

And our “app.scss” file:

diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 8337712..3f1850e 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1 +1,13 @@
-//
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+.navbar-laravel {
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}

We can also do this for “vue” as well to see what’s changed.

ubuntu@ubuntu-xenial:/var/www$ php artisan preset vue
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Scotts-Air:hdtgmcacher scottkeckwarren$ git diff
diff --git a/package.json b/package.json
index 9fcb8ee..348df55 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "lodash": "^4.17.13",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
-        "sass-loader": "^7.1.0"
+        "sass-loader": "^7.1.0",
+        "vue": "^2.5.17"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 40c55f6..aa19e31 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,32 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
 require('./bootstrap');
+
+window.Vue = require('vue');
+
+/**
+ * The following block of code may be used to automatically register your
+ * Vue components. It will recursively scan this directory for the Vue
+ * components and automatically register them with their "basename".
+ *
+ * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
+ */
+
+// const files = require.context('./', true, /\.vue$/i)
+// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+
+Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const app = new Vue({
+    el: '#app',
+});

As you can see it’s added a lot more JS.

When Should You Use It

When you’re initially setting up your application. I imagine if you ran this after you’ve already developed some code it would make your life miserable.

Hopefully this has been as helpful to you as it has to me and check back soon for more artisan commands.