Laravel Project from scratch

 

composer create-project  --prefer-dist  laravel/laravel . -vvv

the "." tell composer to place Laravel in the current directory
-vvv flag just means composer will be verbose as it downloads it so you see what is being dowloaded.

---

Update .env in your projects root directory

Replace 

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

with you database credentials

DB_CONNECTION=mysql
DB_HOST=hostname.db.ondigitalocean.com
DB_PORT=port
DB_DATABASE=databasename_local
DB_USERNAME=username
DB_PASSWORD=password

You may also want  to create a test email server. I like to use https://mailtrap.io/

Replace the code blcok in .env

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

with your mail trap credentials. You would later update this in our product .env 
 

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=port
MAIL_USERNAME=username
MAIL_PASSWORD=password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=your@emailaddress.com
MAIL_FROM_NAME="${APP_NAME}"

---

Set up a testing environment Testing is essential. You will constantly be refreshing the database in testing so you need to set up a separate database.

create a .env.testing configuration file in uour root directory

add your testing database credentials

DB_CONNECTION=mysql
DB_HOST=hostname.db.ondigitalocean.com
DB_PORT=port
DB_DATABASE=databasename_testing
DB_USERNAME=username
DB_PASSWORD=password

---

$ php artisan migrate

Several tables will be created in both the local and testing database

 

   INFO  Preparing database.

  Creating migration table ............................................................................................................... 66ms DONE

   INFO  Running migrations.

  2014_10_12_000000_create_users_table .................................................................................................. 139ms DONE
  2014_10_12_100000_create_password_reset_tokens_table .................................................................................. 146ms DONE
  2019_08_19_000000_create_failed_jobs_table ............................................................................................ 142ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ................................................................................. 207ms DONE

---

 

You will likely be using javascript and CSS stylesheets Laravel 10 uses Vite  to manage all that

Run to install all the packages in package.json 

$ npm install && npm run build

later you can simply use npm run dev but npm run build is required at least onece for Vite to not throw an error

 

---

You will most like want to use an HTML framwork rather than role your own. Boostrap is very popular and common

You could save yourself some time and user Laravel UI

or install Boostrap yourself

npm install bootstrap@5.3.0-alpha3 --save-dev

you will also need a corresponding CSS pre-processor. Boostrap uses SaaS

npm install sass --save-dev

This will add your desired npm library to package.json under the devDependencies section

{
...
    "devDependencies": {
        "axios": "^1.1.2",
        "bootstrap": "^5.3.0-alpha3",
        "laravel-vite-plugin": "^0.7.2",
        "vite": "^4.0.0"
    }
}

Create resources/sass directory the files 
 

resources/sass/_variables.scss

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

resources/sass/app.scss

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';

update vite.config.js to from looking in the css folder to the sass directory
 from
 

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

to

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

---

adding boostrap fonts

npm i bootstrap-icons --save-dev

update app.scss

 

// Variables
@import 'variables';

// Bootstrap
@import 'bootstrap/scss/bootstrap';
@import "bootstrap-icons/font/bootstrap-icons.css";