DEV Community: Jasmine Tracey

Adding two-factor auth to Laravel 8 bootstrap livewire fortify project

Jasmine Tracey — Mon, 27 Sep 2021 22:19:08 +0000

In part one of this article, we created our authentication setup using fortify, laravel and bootstrap.

In part two of this article, we covered updating your profile information and how to change your password from your profile page using livewire

Part 2

In this tutorial, We will cover:

adding two-factor auth to your project

Clone part one of our project



git clone --branch starter2 git@github.com:jasminetracey/lara8auth.git
cd lara8auth

Open your cloned project in IDE of choice I will be using Visual Studio Code

Install Alpine.js

We will be installing alpine.js to do some showing and hiding in the two factor form



npm install --save alpinejs

Import package in the resources/js/app.js file



...

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

...

Update Fortify Provider

To begin we will be updating our fortify provider to enable the 2factor page when the user logs in.



public function boot()
{
    ...

    Fortify::twoFactorChallengeView(function () {
        return view('auth.two-factor-challenge');
    });

    ...
}

Create two-factor auth view



touch resources/views/auth/two-factor-challenge.blade.php



@extends('layouts.app') 

@section('content')
<div class="container" x-data="{ recovery: false }">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Login') }}</div>

                <div class="card-body">
                    <div class="alert alert-info" role="alert" x-show="! recovery">
                        {{ __('Please confirm access to your account by entering the authentication
                        code provided by your authenticator application.') }}
                    </div>

                    <div class="alert alert-info" role="alert" x-show="recovery">
                        {{ __('Please confirm access to your account by entering one of your
                        emergency recovery codes.') }}
                    </div>

                    <form method="POST" action="{{ route('two-factor.login') }}">
                        @csrf

                        <div class="form-group row" x-show="! recovery">
                            <label for="code" class="col-md-4 col-form-label text-md-right"
                                >{{ __('Code') }}</label
                            >

                            <div class="col-md-6">
                                <input
                                    id="code"
                                    type="text"
                                    class="form-control @error('code') is-invalid @enderror"
                                    name="code"
                                    value="{{ old('code') }}"
                                    autocomplete="one-time-code"
                                />

                                @error('code')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row" x-show="recovery">
                            <label for="recovery_code" class="col-md-4 col-form-label text-md-right"
                                >{{ __('Recovery Code') }}</label
                            >

                            <div class="col-md-6">
                                <input
                                    id="recovery_code"
                                    type="text"
                                    class="form-control @error('recovery_code') is-invalid @enderror"
                                    name="recovery_code"
                                    value="{{ old('recovery_code') }}"
                                    autocomplete="one-time-code"
                                />

                                @error('recovery_code')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <div class="flex items-center justify-end mt-4"></div>

                        <div class="mb-0 form-group row">
                            <div class="col-md-3 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Login') }}
                                </button>
                            </div>

                            <div class="col-md-5">
                                <button
                                    type="button"
                                    class="btn btn-secondary"
                                    x-show="! recovery"
                                    x-on:click="
                                                                    recovery = true;
                                                                    $nextTick(() => { $refs.recovery_code.focus() })
                                                                "
                                >
                                    {{ __('Use a recovery code') }}
                                </button>

                                <button
                                    type="button"
                                    class="btn btn-secondary"
                                    x-show="recovery"
                                    x-on:click="
                                                                    recovery = false;
                                                                    $nextTick(() => { $refs.code.focus() })
                                                                "
                                >
                                    {{ __('Use an authentication code') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Update User Model

We also need to tell our user model that we will be enabling 2factor authentication so we need to add a trait TwoFactorAuthenticatable



...
use Laravel\Fortify\TwoFactorAuthenticatable;

class User extends Authenticatable implements MustVerifyEmail
{
    use HasFactory, Notifiable, TwoFactorAuthenticatable;
...

Create livewire enable two-factor form

This form will be used to manage 2factor authentication. This includes enabling, disabling, and regenerating recovery codes.

From your terminal run the following command php artisan livewire:make two-factor-form This will create our livewire component.

In your resources/views/livewire/profile-form.blade.php add the following code to create our form fields.



<section class="my-5">
    @if (session('status') == 'two-factor-authentication-enabled')
    <div class="mb-4 text-sm font-medium text-green-600">
        Two factor authentication has been enabled.
    </div>
    @endif

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Two-Factor Authentication</h5>

            @if (!empty($this->user->two_factor_secret)) 

                @if ($showQrCode)
                    <p>
                        Two factor authentication is now enabled. Scan the following QR code using your
                        phone's authenticator application.
                    </p>

                    <div>{!! $this->user->twoFactorQrCodeSvg() !!}</div>
                @endif 

                @if ($showRecoveryCodes)
                    <div class="mt-4">
                        <p>
                            Store these recovery codes in a secure password manager. They can be used to
                            recover access to your account if your two factor authentication device is lost.
                        </p>

                        <div>
                            @foreach (json_decode(decrypt($this->user->two_factor_recovery_codes), true) as
                            $code)
                                <div>{{ $code }}</div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="mt-4">
                    @if ($showRecoveryCodes)
                        <button wire:click="regenerateRecoveryCodes" class="btn btn-secondary">
                            Regenerate Recovery Codes
                        </button>
                    @else
                        <button wire:click="showRecoveryCodes" class="btn btn-secondary">
                            Show Recovery Codes
                        </button>
                    @endif

                    <button wire:click="disableTwoFactorAuth" class="btn btn-primary">
                        Disable Two-Factor Authentication
                    </button>
                </div>

            @else
                <div>
                    <p>You have not enabled two factor authentication.</p>

                    <button wire:click="enableTwoFactorAuth" class="btn btn-primary">
                        Enable Two-Factor Authentication
                    </button>
                </div>
            @endif
        </div>
    </div>
</section>

After adding our view we need to add the code in the livewire component file app\Http\Livewire\TwoFactorForm.php to interact with fields.

We will first add two fields to the component to hide and show QRCode and the RecoveryCode. And the function to toggle showing the recovery codes.



public $showQrCode = false;
public $showRecoveryCodes = false;

public function showRecoveryCodes()
{
    $this->showRecoveryCodes = true;
}

Next we will include a user property to the component because we will be interacting with a couple fields on the authenticated user.



public function getUserProperty()
{
    return Auth::user();
}

The first function we will be adding is the enableTwoFactorAuth function. This is the one that gets the ball rolling and allowing the user to setup two-factor authentication. We will be using the EnableTwoFactorAuthentication action that comes with fortify.



public function enableTwoFactorAuth(EnableTwoFactorAuthentication $enable)
{
    $enable(Auth::user());

    $this->showQrCode = true;
    $this->showRecoveryCodes = true;
}

Remember to import the EnableTwoFactorAuthentication action

The next function will be the disableTwoFactorAuth function. If for some reason the user no longer wishes to have to factor authentication on their account we will provide the option to disable it. Again we will be using a fortify action DisableTwoFactorAuthentication.



public function disableTwoFactorAuth(DisableTwoFactorAuthentication $disable)
{
    $disable(Auth::user());
}

Remember to import the DisableTwoFactorAuthentication action

Finally we will be adding a function to regenerate recovery codes. These recovery codes allow the user to authenticate if they lose access to their mobile device.



public function regenerateRecoveryCodes(GenerateNewRecoveryCodes $generate)
{
    $generate(Auth::user());

    $this->showRecoveryCodes = true;
}

Remember to import the GenerateNewRecoveryCodes action

Finally, we will add our component to the resources/views/profile.blade.php page so that we can see the form when we visit the profile page.



@extends('layouts.app') 

@section('content')
    <div class="container">
        <livewire:profile-form />

        <livewire:password-change-form />

        <livewire:two-factor-form />
    </div>
@endsection

Now when you go to /profile you should have the working 2factor form.

Conclusion

To find out more about laravel fortify features you can go the the github respository Fortify and for livewire documentation you can go to livewire

Thanks for reading please comment below and share if you found this article helpful.

jasminetracey / lara8auth

This is a simple auth starter setup for laravel 8 projects using bootstrap and laravel fortify

BOOTSTRAP 4 LARAVEL FORTIFY AUTHENTICATION

This is a simple auth starter setup for laravel 8 projects

Features

User Login
User Registration
Email Verification
Forget Password
Reset Password
Change Password
Update User Profile
TwoFactor Authentication
Browser Session Management

View on GitHub

Updating Laravel 8 User profile information using bootstrap livewire and fortify

Jasmine Tracey — Fri, 29 Jan 2021 14:09:42 +0000

In part one of this article, we created our authentication setup using fortify, laravel and bootstrap.

Laravel 8 authentication with Bootstrap and Fortify

Jasmine Tracey ・ Oct 10 '20

#laravel #fortify #bootstrap #auth

In this tutorial, We will cover:

updating your profile information using livewire
changing your password from your profile page using livewire

Clone part one of our project

git clone --branch starter git@github.com:jasminetracey/lara8auth.git
cd lara8auth

Open your newly created project in IDE of choice I will be using Visual Studio Code

Install Livewire

composer require livewire/livewire

Next, we will load livewire assets in our layout files:

...

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<livewire:styles />

...

<livewire:scripts />

</body>
</html>

also, we will publish the config file php artisan livewire:publish --config

Create profile page

Add profile page touch resources/views/profile.blade.php

After doing that we will add a route in our routes/web.php file so that we can access the page.

Route::middleware(['auth', 'verified'])->group(function () {
    Route::view('home', 'home')->name('home');

    Route::view('profile','profile')->name('profile');
});

Now we will update our navbar section in our resources/layouts/app.blade.php file so will we have a visible link to navigate to our page.


@else
    <li class="nav-item {{ request()->routeIs('home') ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('home') }}">{{ __('Home') }}</a>
    </li>
    <li class="nav-item {{ request()->routeIs('profile') ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('profile') }}">{{ __('Profile') }}</a>
    </li>

Create livewire profile information form

If you are are new to livewire Caleb the creator of laravel-livewire have created some tutorial videos here to get you started

From your terminal run the following command
php artisan livewire:make profile-form
This will create our first livewire component.

In your resources/views/livewire/profile-form.blade.php add the following code to create our form fields.

<section class="my-5">
    @if (session()->has('status'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('status') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Update Profile Information</h5>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form wire:submit.prevent="updateProfileInformation" role="form">

                <div class="form-group">
                    <label for="state.email">Name</label>
                    <input type="text" class="form-control" id="state.name" wire:model="state.name"/>
                </div>

                <div class="form-group">
                    <label for="state.email">Email Address</label>
                    <input type="email" class="form-control" id="state.email"  wire:model="state.email"/>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Update Info</button>
                </div>
            </form>
        </div>
    </div>
</section>

After adding our view we need to add the code in the livewire component file app\Http\Livewire\ProfileForm.php to interact with fields.

We will first add a public array which will store the fields that we will interact with

public $state = [];

Then we will add the mount method. This is a function that runs when the component is populated. We will use this method to populate the state array.

public function mount()
{
    $this->state = auth()->user()->withoutRelations()->toArray();
}

Next, we will add the updateProfileInformation method that will use the UpdateUserProfileInformation action that comes with Fortify.

public function updateProfileInformation(UpdateUserProfileInformation $updater)
{
    $this->resetErrorBag();

    $updater->update(auth()->user(), $this->state);

    session()->flash('status', 'Profile successfully updated');
}

Remember to import the UpdateUserProfileInformation action

Finally, we will add our component to the resources/views/profile.blade.php page so that we can see the form when we visit the profile page.

@extends('layouts.app')

@section('content')

    <div class="container">

        <livewire:profile-form />

    </div>
@endsection

Create livewire password change form

From your terminal run the following command
php artisan livewire:make password-change-form
This will create our livewire component.

In your resources/views/livewire/password-change-form.blade.php add the following code to create our form fields.

<section class="my-5">
    @if (session()->has('status'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('status') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Update Password</h5>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form wire:submit.prevent="updateProfileInformation" role="form">

                <div class="form-group">
                    <label for="state.current_password">Current Password</label>
                    <input type="password" class="form-control" id="state.current_password" wire:model="state.current_password"/>
                </div>

                <div class="form-group">
                    <label for="state.password">New Password</label>
                    <input type="password" class="form-control" id="state.password" wire:model="state.password"/>
                </div>

                <div class="form-group">
                    <label for="state.password_confirmation">Confirm Password</label>
                    <input type="password" class="form-control" id="state.password_confirmation" wire:model="state.password_confirmation"/>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Change Password</button>
                </div>
            </form>
        </div>
    </div>
</section>

After adding our view we need to add the code in the livewire component file app/Http/Livewire/PasswordChangeForm.php to interact with fields.

We will first add a public array which will store the fields that we will interact with

public $state = [
     'current_password' => '',
     'password' => '',
     'password_confirmation' => '',
];

Next, we will add the changePassword method that will use the UpdateUserPassword action that comes with Fortify.

public function updateProfileInformation(UpdateUserPassword $updater)
{
    $this->resetErrorBag();

    $updater->update(auth()->user(), $this->state);

    $this->state = [
        'current_password' => '',
        'password' => '',
        'password_confirmation' => '',
    ];

    session()->flash('status', 'Password successfully changed');
}

Remember to import the UpdateUserPassword action

Finally, we will add our component to the resources/views/profile.blade.php page so that we can see the form when we visit the profile page.

@extends('layouts.app')

@section('content')

    <div class="container">

        <livewire:profile-form />

        <livewire:password-change-form/>

    </div>
@endsection

Now when you go to /profile you should have two working forms for updating user info and changing their password.

Conclusion

To find out more about laravel fortify features you can go the the github respository Fortify and for livewire documentation you can go to livewire

Thanks for reading please comment below and share if you found this article helpful.

In my next article, I will cover Two Factor Authentication.

jasminetracey / lara8auth

This is a simple auth starter setup for laravel 8 projects using bootstrap and laravel fortify

BOOTSTRAP 4 LARAVEL FORTIFY AUTHENTICATION

This is a simple auth starter setup for laravel 8 projects

Features

User Login
User Registration
Email Verification
Forget Password
Reset Password
Change Password
Update User Profile
TwoFactor Authentication
Browser Session Management

View on GitHub

Laravel 8 authentication with Bootstrap and Fortify

Jasmine Tracey — Sat, 10 Oct 2020 19:07:46 +0000

In this tutorial, I will share how to setup Laravel Fortify with Bootstrap 4 in a Laravel 8 application. We will cover:

setting up a laravel app
user registration
login
resetting password
email verification

Install Laravel 8 project

composer create-project --prefer-dist laravel/laravel lara8auth
cd lara8auth

Open your newly created project in IDE of choice I will be using Visual Studio Code

Configure database

In your .env file update the database configuration variables so that your laravel application knows which database to use.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Install Fortify

composer require laravel/fortify

Next, we will publish Fortify's resources:

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

Next, we will migrate the database:

php artisan migrate

Install bootstrap

We will also be installing jquery and popper.js because bootstrap requires these packages

npm i
npm install --save bootstrap jquery popper.js cross-env

Import packages in the resources/js/bootstrap.js file

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {
}

Delete resources/css folder and create app.scss file in resources/sass

rm -rf resources/css

mkdir resources/sass

touch resources/sass/app.scss

Import packages in the resources/sass/app.scss file

// bootstrap
@import "~bootstrap/scss/bootstrap";

Next update webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Compile assets

npm run dev

Add Auth Views

In your resources/views folder create two folders auth and layouts

mkdir resources/views/layouts resources/views/auth

Next, create the following views

touch resources/views/layouts/app.blade.php 

touch resources/views/auth/login.blade.php

touch resources/views/auth/register.blade.php

touch resources/views/auth/forgot-password.blade.php

touch resources/views/auth/reset-password.blade.php

touch resources/views/auth/verify-email.blade.php

touch resources/views/home.blade.php

The code for the files created above is listed below.

Update Fortify Provider

Next, we will need to update the boot method in app/Providers/FortifyServiceProvider. This is to tell fortify how to authenticate the user and where the views we created early are located.

public function boot()
{
    Fortify::loginView(function () {
        return view('auth.login');
    });

    Fortify::authenticateUsing(function (Request $request) {
        $user = User::where('email', $request->email)->first();

        if ($user &&
            Hash::check($request->password, $user->password)) {
            return $user;
        }
    });

    Fortify::registerView(function () {
        return view('auth.register');
    });

    Fortify::requestPasswordResetLinkView(function () {
        return view('auth.forgot-password');
    });

    Fortify::resetPasswordView(function ($request) {
        return view('auth.reset-password', ['request' => $request]);
    });

    Fortify::verifyEmailView(function () {
        return view('auth.verify-email');
    });

    // ...
}

Next register FortifyServiceProvider by adding it to the providers array in config\app.php App\Providers\FortifyServiceProvider::class,.

In your app/Models/User.php file ensure the class implements MustVerifyEmail

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    use HasFactory, Notifiable;

    // ...
}

We also need to tell fortify that we want to enable email verification. In the config/fortify.php file uncomment the line that says Features::emailVerification().

If you want to test email verification you will need to update your email variables in .env. You can use a free mail server mailtrap.io

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=info@lara8auth.com
MAIL_FROM_NAME="${APP_NAME}"

Finally we will add the home route to the routes/web.php file

Route::middleware(['auth', 'verified'])->group(function () {
    Route::view('home', 'home')->name('home');
});

We have completed our setup. You should have a working authentication system using laravel fortify and bootstrap.

Conclusion

To find out more about laravel fortify features you can go the the github respository Fortify

Thanks for reading please comment below and share if you found this article helpful.

In my next article, I will cover updating user profile information and changing your password from the profile page.

Updating Laravel 8 User profile information using bootstrap livewire and fortify

Jasmine Tracey ・ Jan 29 '21

#bootstrap #laravel #livewire #fortify

jasminetracey / lara8auth

This is a simple auth starter setup for laravel 8 projects using bootstrap and laravel fortify

BOOTSTRAP 4 LARAVEL FORTIFY AUTHENTICATION

This is a simple auth starter setup for laravel 8 projects

Features

User Login
User Registration
Email Verification
Forget Password
Reset Password
Change Password
Update User Profile
TwoFactor Authentication
Browser Session Management

View on GitHub

How to set up your wordpress site on dokku

Jasmine Tracey — Wed, 08 Jul 2020 00:47:49 +0000

This post will cover everything you need to know about getting WordPress deployed to your dokku server from start to finish.

I already have a dokku server setup on digital ocean.
If you haven't done so as yet you can create an account and get 100 credits [Free 100 credit (https://m.do.co/c/04ef1769fce8)
After that follow the instructions on the dokku documenation to get your server up and running DigitalOcean Droplet Installation Notes

Let us begin, to get the most out of this tutorial follow along and comment below if there are any issues with the steps.

Installing the MariaDB plugin on dokku, creating a database, and linking it to our app

In your dokku terminal run the following command to create your app. I will be using blogger as my app name feel free to use another name.

dokku apps:create blogger

If you run dokku apps:list you should see your newly created application.

Now will install the mariab plugin, create a database and link it to our app so that it has access to it

# Install app
sudo dokku plugin:install https://github.com/dokku/dokku-mariadb.git mariadb

# Create database
dokku mariadb:create bloggerdb

# Link database to app
dokku mariadb:link bloggerdb blogger

Creating a local wordpress instance and pushing it to dokku

On your local machine clone the wordpress github project

# Download and unzip wordpress files
curl -LO https://wordpress.org/latest.zip
unzip latest.zip

# Change directory to downloaded project
cd wordpress

# Download wordpress gitignore file
curl https://raw.githubusercontent.com/github/gitignore/master/WordPress.gitignore > .gitignore

# Initialize repository and make initial commit 
git init
git add .
git commit -m "Initial commit of wordpress files"

# Open folder in your code editor for this tutorial i'll be using visual studio code
code .

We are going to update the values of our config file so it knows to look for the dokku environment variables. First copy wp-config-sample.php to wp-config.php. Then update the following sections

// ** MySQL settings - You can get this info from your web host ** //
$url = parse_url(getenv("DATABASE_URL"));

$host = $url["host"];
$username = $url["user"];
$password = $url["pass"];
$database = substr($url["path"], 1);

/** The name of the database for WordPress */
define( 'DB_NAME', $database );

/** MySQL database username */
define( 'DB_USER', $username );

/** MySQL database password */
define( 'DB_PASSWORD', $password );

/** MySQL hostname */
define( 'DB_HOST', $host );

We also want to change authentication keys and salts so go to https://api.wordpress.org/secret-key/1.1/salt/ copy and paste the generated salts in the wp-config.php file

define( 'AUTH_KEY',         'put your unique phrase here' );
define( 'SECURE_AUTH_KEY',  'put your unique phrase here' );
define( 'LOGGED_IN_KEY',    'put your unique phrase here' );
define( 'NONCE_KEY',        'put your unique phrase here' );
define( 'AUTH_SALT',        'put your unique phrase here' );
define( 'SECURE_AUTH_SALT', 'put your unique phrase here' );
define( 'LOGGED_IN_SALT',   'put your unique phrase here' );
define( 'NONCE_SALT',       'put your unique phrase here' );

We also need to create a custom_php.ini file to improve some settings

upload_max_filesize = 128M
post_max_size = 128M
max_execution_time = 60
memory_limit = 512M

Now we need to tell dokku to use those settings when running the project to do that we will use a Procfile in the root of the project

web: vendor/bin/heroku-php-nginx -i custom_php.ini

Now we will commit and push our changes to our dokku server

# commit changes
git add .
git commit -m "updated config to work with dokku url"

# Add the dokku url to the downloaded project
# If your server is dokkuserver.com and your blog is called blogger this would be:
git remote add dokku dokku@dokkuserver.com:blogger

# push changes
git push dokku master

Setting up application storage on dokku server

# Create the folders (might require sudo)
mkdir -p /var/lib/dokku/data/storage/blogger/plugins
mkdir -p /var/lib/dokku/data/storage/blogger/themes
mkdir -p /var/lib/dokku/data/storage/blogger/uploads

# Change the permission (might require sudo)
chown 32767:32767 /var/lib/dokku/data/storage/blogger/plugins
chown 32767:32767 /var/lib/dokku/data/storage/blogger/themes
chown 32767:32767 /var/lib/dokku/data/storage/blogger/uploads

# Mount the storage to the container
dokku storage:mount blogger /var/lib/dokku/data/storage/blogger/plugins:/app/wp-content/plugins
dokku storage:mount blogger /var/lib/dokku/data/storage/blogger/themes:/app/wp-content/themes
dokku storage:mount blogger /var/lib/dokku/data/storage/blogger/uploads:/app/wp-content/uploads

The default upload limit for nginx is 2mb let us update the limit to 100mb. Sudo may be required to run these commands

mkdir /home/dokku/blogger/nginx.conf.d/
echo 'client_max_body_size 100M;' > /home/dokku/blogger/nginx.conf.d/upload.conf
chown dokku:dokku /home/dokku/blogger/nginx.conf.d
service nginx reload

We are almost finish. To ensure we have a secure site, we will add https using lets encrypt

# Install plugin
sudo dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git

# Set the global email
dokku config:set --global DOKKU_LETSENCRYPT_EMAIL=your@email.tld

# Setup cronjob to auto-renew certificates when they expire
dokku letsencrypt:cron-job --add

# Add https to site
dokku letsencrypt:enable blogger

Go to your url application url in your browser you should see the installation page of your wordpress site. Thank you for following along

Resources

How to use jarallax parallax plugin with Nuxt.js

Jasmine Tracey — Thu, 18 Jun 2020 21:18:33 +0000

Adding parallax to your nuxt website is really easy. I will show you how to add it using the jarallax plugin and newly created nuxt project.

Resources

From your terminal application change directory to the location in where you to create this new project. Create a new project using the following command

npx create-nuxt-app parallax

Open your project in your favourite editor for this tutorial i'll be using visual studio code.

cd parallax
code .

To begin we will need to install the jarallax and the object-fit-images plugin

npm install --save jarallax object-fit-images

Create the plugins/jarallax.js file in the plugins directory. Here we are importing the plugins and calling the functions after they window has loaded

import 'object-fit-images'
import { jarallax, jarallaxVideo } from 'jarallax'

window.addEventListener('load', function(event) {
  jarallaxVideo()

  jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2
  })

  jarallax(document.querySelectorAll('.jarallax-video'), {
    speed: 0.2,
    videoSrc: 'https://youtu.be/mru3Q5m4lkY'
  })
})

For the plugin to work we will need to also add some css styles. So in your assets directory create a folder called css and in that folder create your main.css

.jarallax {
  position: relative;
  z-index: 0;
}

.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  /* support for plugin https://github.com/bfred-it/object-fit-images */
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

The next step is to add those two files to the nuxt.config.js so nuxt can know to compile them

export default {
    css: ['@/assets/css/main.css'],

    plugins: [
      { src: '~/plugins/parallax.js', ssr: false }
    ]
}

Now for the magic we are going to be updating our pages/index.vue so we can the plugin in action

<template>
  <div>
    <div class="first jarallax">
      <img
        src="https://images.pexels.com/photos/2951096/pexels-photo-2951096.jpeg?cs=srgb&dl=photo-of-woman-wearing-head-scarf-2951096.jpg&fm=jpg"
        class="jarallax-img"
      />
      <h1>Hello Jarallax</h1>
    </div>

    <p>
      Jarallax is an open-source javascript library which makes adjusting css
      based on interaction easy. With Jarallax it's easy to create a parallax
      scrolling website.
    </p>

    <div class="jarallax second">
      <img
        src="https://images.pexels.com/photos/936048/pexels-photo-936048.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
        class="jarallax-img"
      />
    </div>

    <p>Jarallax can also be used with videos</p>

    <div class="third jarallax-video"></div>

    <div>
      <p>
        Photo by
        <a href="https://www.pexels.com/@eben-odonkor-1531463" target="_blank"
          >Eben Odonkor</a
        >
        from
        <a
          href="https://www.pexels.com/photo/photo-of-woman-wearing-head-scarf-2951096/"
          target="_blank"
          >Pexels</a
        >
      </p>

      <p>
        Photo by
        <a
          href="https://www.pexels.com/@nappy?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels"
          target="_blank"
          >Nappy</a
        >
        from
        <a
          href="https://www.pexels.com/photo/five-women-laughing-936048/"
          target="_blank"
          >Pexels</a
        >
      </p>
    </div>
  </div>
</template>

<style scoped>
.first {
  height: 600px;
}

.second {
  height: 350px;
}

.third {
  height: 600px;
}

h1 {
  color: #ffffff;
  text-align: center;
  font-size: 64px;
}

p {
  font-size: 20px;
}
</style>

Source Code is available at https://github.com/jasminetracey/nuxt-parallax

All photos used are taken from Pexels