AppDividend provides latest Code Tutorials on various fields like Data science in Machine Learning, Python, and AI. Latest web development technologies like Angular, Laravel, Node js, React js, Vue js, PHP, ASP.NET, and Javascript. Mobile technologies like Swift, iOS, Android, React Native, Unity. JavaScript is everywhere now, as is React, and having strong React skills is a great way to get ahead with building modern web apps right now. Wes' teaching style is amongst the best in our industry and I'd recommend this course to anyone looking to get better at both JavaScript and React. Actionable insights to resolve Laravel performance bottlenecks and errors. Improve your monitoring workflow with a full view of releases so you can mark Laravel errors as resolved and prioritize live issues. Laravel is a great framework! It offers a full stack development that enables us to build a frontend and backend website in one place. So we can deliver/build web projects in no.
- Writing JavaScript
Introduction
While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.
The Bootstrap and Vue scaffolding provided by Laravel is located in the
laravel/ui
Composer package, which may be installed using Composer:Once the
laravel/ui
package has been installed, you may install the frontend scaffolding using the ui
Artisan command:CSS
Laravel Mix provides a clean, expressive API over compiling SASS or Less, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable. In this document, we will briefly discuss CSS compilation in general; however, you should consult the full Laravel Mix documentation for more information on compiling SASS or Less.
JavaScript
Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using the Vue library. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Laravel Mix to easily compile JavaScript components into a single, browser-ready JavaScript file.
Writing CSS
After installing the
laravel/ui
Composer package and generating the frontend scaffolding, Laravel's package.json
file will include the bootstrap
package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from the package.json
file as needed for your own application. You are not required to use the Bootstrap framework to build your Laravel application - it is provided as a good starting point for those who choose to use it.Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):
Once the dependencies have been installed using
npm install
, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev
command will process the instructions in your webpack.mix.js
file. Typically, your compiled CSS will be placed in the public/css
directory:The
webpack.mix.js
file included with Laravel's frontend scaffolding will compile the resources/sass/app.scss
SASS file. This app.scss
file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss
file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.Writing JavaScript
All of the JavaScript dependencies required by your application can be found in the
package.json
file in the project's root directory. This file is similar to a composer.json
file except it specifies JavaScript dependencies instead of PHP dependencies. You can install these dependencies using the Node package manager (NPM):{tip} By default, the Laravel
package.json
file includes a few packages such as lodash
and axios
to help you get started building your JavaScript application. Feel free to add or remove from the package.json
file as needed for your own application.Once the packages are installed, you can use the
npm run dev
command to compile your assets. Webpack is a module bundler for modern JavaScript applications. When you run the npm run dev
command, Webpack will execute the instructions in your webpack.mix.js
file:By default, the Laravel
webpack.mix.js
file compiles your SASS and the resources/js/app.js
file. Within the app.js
file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the public/js
directory.{tip} The
app.js
file will load the resources/js/bootstrap.js
file which bootstraps and configures Vue, Axios, jQuery, and all other JavaScript dependencies. If you have additional JavaScript dependencies to configure, you may do so in this file.Writing Vue Components
When using the
laravel/ui
package to scaffold your frontend, an ExampleComponent.vue
Vue component will be placed in the resources/js/components
directory. The ExampleComponent.vue
file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your app.js
file:To use the component in your application, you may drop it into one of your HTML templates. For example, after running the
php artisan ui vue --auth
Artisan command to scaffold your application's authentication and registration screens, you could drop the component into the home.blade.php
Blade template:{tip} Remember, you should run the
npm run dev
command each time you change a Vue component. Or, you may run the npm run watch
command to monitor and automatically recompile your components each time they are modified.If you are interested in learning more about writing Vue components, you should read the Vue documentation, which provides a thorough, easy-to-read overview of the entire Vue framework.
Using React
If you prefer to use React to build your JavaScript application, Laravel makes it a cinch to swap the Vue scaffolding with React scaffolding:
Adding Presets
Presets are 'macroable', which allows you to add additional methods to the
UiCommand
class at runtime. For example, the following code adds a nextjs
method to the UiCommand
class. Typically, you should declare preset macros in a service provider:Then, you may call the new preset via the
ui
command:- Working With Stylesheets
- Working With JavaScript
Introduction
Laravel Mix, a package developed by Laracasts creator Jeffrey Way, provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors.
In other words, Mix makes it a cinch to compile and minify your application's CSS and JavaScript files. Through simple method chaining, you can fluently define your asset pipeline. For example:
If you've ever been confused and overwhelmed about getting started with webpack and asset compilation, you will love Laravel Mix. However, you are not required to use it while developing your application; you are free to use any asset pipeline tool you wish, or even none at all.
{tip} If you need a head start building your application with Laravel and Tailwind CSS, check out one of our application starter kits.
Installation & Setup
Installing Node
Before running Mix, you must first ensure that Node.js and NPM are installed on your machine:
You can easily install the latest version of Node and NPM using simple graphical installers from the official Node website. Or, if you are using Laravel Sail, you may invoke Node and NPM through Sail:
Installing Laravel Mix
The only remaining step is to install Laravel Mix. Within a fresh installation of Laravel, you'll find a
package.json
file in the root of your directory structure. The default package.json
file already includes everything you need to get started using Laravel Mix. Think of this file like your composer.json
file, except it defines Node dependencies instead of PHP dependencies. You may install the dependencies it references by running:Running Mix
Tribine fs19. Mix is a configuration layer on top of webpack, so to run your Mix tasks you only need to execute one of the NPM scripts that are included in the default Laravel
package.json
file. When you run the dev
or production
scripts, all of your application's CSS and JavaScript assets will be compiled and placed in your application's public
directory:Watching Assets For Changes
The
npm run watch
command will continue running in your terminal and watch all relevant CSS and JavaScript files for changes. Webpack will automatically recompile your assets when it detects a change to one of these files:Webpack may not be able to detect your file changes in certain local development environments. If this is the case on your system, consider using the
watch-poll
command:Working With Stylesheets
Your application's
webpack.mix.js
file is your entry point for all asset compilation. Think of it as a light configuration wrapper around webpack. Mix tasks can be chained together to define exactly how your assets should be compiled.Tailwind CSS
Tailwind CSS is a modern, utility-first framework for building amazing sites without ever leaving your HTML. Let's dig into how to start using it in a Laravel project with Laravel Mix. First, we should install Tailwind using NPM and generate our Tailwind configuration file:
The
init
command will generate a tailwind.config.js
file. Within this file, you may configure the paths to all of your application's templates and JavaScript so that Tailwind can tree-shake unused styles when optimizing your CSS for production:Next, you should add each of Tailwind's 'layers' to your application's
resources/css/app.css
file:Once you have configured Tailwind's layers, you are ready to update your application's
webpack.mix.js
file to compile your Tailwind powered CSS:Finally, you should reference your stylesheet in your application's primary layout template. Many applications choose to store this template at
resources/views/layouts/app.blade.php
. In addition, ensure you add the responsive viewport meta
tag if it's not already present:PostCSS
PostCSS, a powerful tool for transforming your CSS, is included with Laravel Mix out of the box. By default, Mix leverages the popular Autoprefixer plugin to automatically apply all necessary CSS3 vendor prefixes. However, you're free to add any additional plugins that are appropriate for your application.
First, install the desired plugin through NPM and include it in your array of plugins when calling Mix's
postCss
method. The postCss
method accepts the path to your CSS file as its first argument and the directory where the compiled file should be placed as its second argument:Or, you may execute
postCss
with no additional plugins in order to achieve simple CSS compilation and minification:Sass
The
sass
method allows you to compile Sass into CSS that can be understood by web browsers. The sass
method accepts the path to your Sass file as its first argument and the directory where the compiled file should be placed as its second argument:You may compile multiple Sass files into their own respective CSS files and even customize the output directory of the resulting CSS by calling the
sass
method multiple times:URL Processing
Because Laravel Mix is built on top of webpack, it's important to understand a few webpack concepts. For CSS compilation, webpack will rewrite and optimize any
url()
calls within your stylesheets. While this might initially sound strange, it's an incredibly powerful piece of functionality. Imagine that we want to compile Sass that includes a relative URL to an image:{note} Absolute paths for any given
url()
will be excluded from URL-rewriting. For example, url('/images/thing.png')
or url('http://example.com/images/thing.png')
won't be modified.By default, Laravel Mix and webpack will find
example.png
, copy it to your public/images
folder, and then rewrite the url()
within your generated stylesheet. As such, your compiled CSS will be:As useful as this feature may be, your existing folder structure may already be configured in a way you like. If this is the case, you may disable
url()
rewriting like so:With this addition to your
webpack.mix.js
file, Mix will no longer match any url()
or copy assets to your public directory. In other words, the compiled CSS will look just like how you originally typed it:Source Maps
Though disabled by default, source maps may be activated by calling the
mix.sourceMaps()
method in your webpack.mix.js
file. Though it comes with a compile/performance cost, this will provide extra debugging information to your browser's developer tools when using compiled assets:Style Of Source Mapping
Webpack offers a variety of source mapping styles. By default, Mix's source mapping style is set to
eval-source-map
, which provides a fast rebuild time. If you want to change the mapping style, you may do so using the sourceMaps
method:Working With JavaScript
Mix provides several features to help you work with your JavaScript files, such as compiling modern ECMAScript, module bundling, minification, and concatenating plain JavaScript files. Even better, this all works seamlessly, without requiring an ounce of custom configuration:
With this single line of code, you may now take advantage of:
- The latest EcmaScript syntax.
- Modules
- Minification for production environments.
Vue
Mix will automatically install the Babel plugins necessary for Vue single-file component compilation support when using the
vue
method. No further configuration is required:Once your JavaScript has been compiled, you can reference it in your application:
React
Mix can automatically install the Babel plugins necessary for React support. To get started, add a call to the
react
method:Behind the scenes, Mix will download and include the appropriate
babel-preset-react
Babel plugin. Once your JavaScript has been compiled, you can reference it in your application:Vendor Extraction
One potential downside to bundling all of your application-specific JavaScript with your vendor libraries such as React and Vue is that it makes long-term caching more difficult. For example, a single update to your application code will force the browser to re-download all of your vendor libraries even if they haven't changed.
If you intend to make frequent updates to your application's JavaScript, you should consider extracting all of your vendor libraries into their own file. This way, a change to your application code will not affect the caching of your large
vendor.js
file. Mix's extract
method makes this a breeze:The
extract
method accepts an array of all libraries or modules that you wish to extract into a vendor.js
file. Using the snippet above as an example, Mix will generate the following files:public/js/manifest.js
: The Webpack manifest runtimepublic/js/vendor.js
: Your vendor librariespublic/js/app.js
: Your application code
To avoid JavaScript errors, be sure to load these files in the proper order:
Custom Webpack Configuration
Occasionally, you may need to manually modify the underlying Webpack configuration. For example, you might have a special loader or plugin that needs to be referenced.
Mix provides a useful
webpackConfig
method that allows you to merge any short Webpack configuration overrides. This is particularly appealing, as it doesn't require you to copy and maintain your own copy of the webpack.config.js
file. The webpackConfig
method accepts an object, which should contain any Webpack-specific configuration that you wish to apply.Versioning / Cache Busting
Many developers suffix their compiled assets with a timestamp or unique token to force browsers to load the fresh assets instead of serving stale copies of the code. Mix can automatically handle this for you using the
version
method.The
version
method will append a unique hash to the filenames of all compiled files, allowing for more convenient cache busting:After generating the versioned file, you won't know the exact filename. So, you should use Laravel's global
mix
function within your views to load the appropriately hashed asset. The mix
function will automatically determine the current name of the hashed file:Because versioned files are usually unnecessary in development, you may instruct the versioning process to only run during
npm run prod
:Custom Mix Base URLs
If your Mix compiled assets are deployed to a CDN separate from your application, you will need to change the base URL generated by the
mix
function. You may do so by adding a mix_url
configuration option to your application's config/app.php
configuration file:After configuring the Mix URL, The
mix
function will prefix the configured URL when generating URLs to assets:Browsersync Reloading
BrowserSync can automatically monitor your files for changes, and inject your changes into the browser without requiring a manual refresh. You may enable support for this by calling the
mix.browserSync()
method:BrowserSync options may be specified by passing a JavaScript object to the
browserSync
method:Next, start webpack's development server using the
npm run watch
command. Now, when you modify a script or PHP file you can watch as the browser instantly refreshes the page to reflect your changes.Laravel React Crud
Environment Variables
Laravel React Tutorial
You may inject environment variables into your
webpack.mix.js
script by prefixing one of the environment variables in your .env
file with MIX_
:After the variable has been defined in your
.env
file, you may access it via the process.env
object. However, you will need to restart the task if the environment variable's value changes while the task is running:Notifications
Laravel React Typescript
When available, Mix will automatically display OS notifications when compiling, giving you instant feedback as to whether the compilation was successful or not. However, there may be instances when you would prefer to disable these notifications. One such example might be triggering Mix on your production server. Notifications may be deactivated using the
disableNotifications
method: