Last active
February 2, 2023 08:12
-
-
Save ahmadshuami/ca42bbad1b29a65252022228b1746ee5 to your computer and use it in GitHub Desktop.
How to create a simple laravel application (using bootstrap 5)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Install Apache / Nginx | |
- Install PHP | |
- Install Composer | |
- on Windows, download the installer and install (https://getcomposer.org/download/) | |
- on macOS, you can install using brew | |
- on macOS, make sure to place Composer's system-wide vendor bin directory in your $PATH | |
$ echo 'export PATH="$PATH:$HOME/.composer/vendor/bin"' >> ~/.zshrc | |
- Install nodejs | |
- on Windows, download the installer and install (choose LTS version, https://nodejs.org) | |
- on macOS, you can install using brew | |
- OR you can download the installer for mac and install (choose LTS version, https://nodejs.org) | |
- Install the Laravel Installer as a global Composer dependency: | |
$ composer global require laravel/installer | |
- How to update / upgrade laravel installer | |
$ composer global remove laravel/installer | |
$ composer global require laravel/installer | |
- Create new app with the latest laravel version (using laravel installer) | |
$ laravel new project-name | |
OR | |
- Create new app with the specific laravel version (using composer) | |
$ composer create-project laravel/laravel="8.*" project-name | |
- * => replace with your choice of version | |
## Laravel has released "laravel 9.19" with a major change. There is no more webpack.mix.js file in the laravel root | |
in the place of the webpack.mix.js file vite.config.js file is introduced. | |
- Install ui | |
$ composer require laravel/ui | |
- Install bootstrap ui and auth | |
$ php artisan ui bootstrap --auth | |
$ npm install && npm run dev | |
- open webpack.mix.js and make sure the content is like this | |
mix.js('resources/js/app.js', 'public/js') | |
.sass('resources/sass/app.scss', 'public/css') | |
.sourceMaps() | |
.version(); | |
- Install node modules / packages (it is up to your requirement) | |
$ npm install bootstrap@latest bootstrap-icons @popperjs/core --save-dev | |
$ npm install autoprefixer@latest | |
$ npm install jquery-ui --save-dev | |
$ npm install sweetalert2 | |
$ npm install aos --save | |
$ npm install animate.css --save | |
$ npm install moment | |
***$ npm install postcss@latest | |
***$ npm install popper.js --save | |
***$ npm install @popperjs/core --save | |
***$ npm install --save @fortawesome/fontawesome-free | |
***$ npm install chokidar | |
- Edit your bootstrap.js | |
- open resources/js/bootstrap.js | |
try { | |
window.$ = window.jQuery = require('jquery'); | |
require('bootstrap'); | |
} catch (e) {} | |
/* AOS */ | |
window.Aos = require('aos'); | |
/* SweetAlert2 */ | |
window.Swal = require('sweetalert2'); | |
/* Moment */ | |
window.moment = require('moment'); | |
/* jquery-ui */ | |
import 'jquery-ui/ui/widgets/autocomplete.js'; | |
- Edit your scss | |
- open sass/app.scss | |
@import '~bootstrap-icons/font/bootstrap-icons'; | |
@import '~jquery-ui/themes/base/all.css'; | |
@import '~aos/dist/aos'; | |
@import 'node_modules/animate.css/animate'; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment