How to Automatically Login into Laravel App in Your Local Dev Environment
I often find myself spinning up Laravel projects for prototypes and idea testing and then letting them sit until I can pick them back up. Logging in whenever I start work gets annoying, and there’s no point in manually logging in to my local instance since my account is the admin. Fortunately, there are a few solutions to automate this process in Laravel. I’ll delve into the various methods to automatically log in to your Laravel app in your local development environment, enhancing your workflow and boosting productivity.
Utilizing session-based auto-login:
One approach to automate the Laravel application’s login process is session-based auto-login. This method involves setting up a mechanism that automatically logs in a predefined user whenever the application is accessed in the local development environment.
Each solution below assumes you’ve seeded or registered a local user account in your database.
1. Creating a custom route for auto-login:
You can create a custom route in your Laravel routes file (routes/web.php
) that triggers the auto-login functionality.
// routes/web.php
Route::get('/auto-login', function () {
$user = App\Models\User::find(1); // Fetch the user you want to auto-login
Auth::login($user);
return redirect('/dashboard'); // Redirect to a specific page after login
});
2. Implementing auto-login logic:
When you access the /auto-login
route in your local development environment, Laravel will automatically log in the specified user, redirecting them to the desired page (in this case, /dashboard
).
Leveraging custom middleware for auto-login:
Another method to automate your Laravel application’s login process is leveraging custom middleware designed for auto-login functionality. This approach provides more flexibility and control over the auto-login process, allowing you to define custom logic and conditions for authentication.
1. Creating a custom middleware for auto-login:
Generate a new middleware using the Artisan command make:middleware
.
php artisan make:middleware AutoLoginMiddleware
2. Registering the middleware in Laravel:
Register the custom middleware in the HTTP kernel (app/Http/Kernel.php
) to apply it to the desired routes or groups of routes.
// app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
// Other middleware...
\App\Http\Middleware\AutoLoginMiddleware::class,
],
];
Registering in the Boot method in AppServiceProvider:
This method allows you to log in automatically as soon as you load the application loads and is the method I use most often. I added a check to ensure that the environment is local.
if ($this->app->environment('local')) {
$user = User::first();
if (isset($user)) {
$this->app['auth']->setUser(User::first());
}
}
Bonus: Generating a seeder for the Users table
Sometimes, you might want to seed your database with an admin user for testing purposes. Here’s how you can do it:
A. Creating a UserSeeder class:
Generate a new seeder class using the Artisan command make:seeder
.
php artisan make:seeder UserSeeder
B. Seeding the database with an admin user:
Within the generated UserSeeder
class, define the logic to create an admin user.
// database/seeders/UserSeeder.php
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\Hash;
use App\Models\User;
class UserSeeder extends Seeder
{
public function run()
{
User::create([
'name' => 'Admin',
'email' => 'admin@example.com',
'password' => Hash::make('password'), // Change this to something more secure
// Additional user data...
]);
}
}
Finally, run the seeder using the Artisan command db:seed
.
php artisan db:seed --class=UserSeeder
By following these steps, you can seamlessly integrate auto-login functionality into your Laravel application’s local development environment, thereby reducing the time and effort spent on repetitive login tasks. Additionally, seeding your database with an admin user ensures that you have a user account available for testing and development purposes.
Installing font awesome pro with bun
After recently switching to bun.sh, I was trying to install Font Awesome Pro. It uses a private registry but their docs have not been updated to support non-npm package managers and bun does not yet support .npmrc files.
You can configure a private registry using an organization scope. First, you must get your auth token from your paid Font Awesome account by going to your account page, scrolling down to the Tokens section, and copying the token.
Copy and paste this string, and replace YOUR_TOKEN_HERE with the token you copied above:
[install.scopes]
"@fortawesome" = { token="YOUR_TOKEN_HERE" , url =
"https://npm.fontawesome.com/"}
Open the terminal and enter these commands:
touch $HOME/.bunfig.toml
nano $HOME/.bunfig.toml
Paste in the config above with your token and then hit CTRL+X to quit, and Y to save when prompted. Now you should be able to run
bun add @fortawesome/fontawesome-pro
A sonnet about Batman in the style of William Shakespeare
Oh Batman, knight of darkness, hero bold
Fierce in battle, strong in heart and mind
Defender of the weak and young, behold
Thy righteous justice, keen and unconfined
With cape and cowl, thou roam’st the gloomy night
In search of evil, lurking in the shade
With batarangs and gadgets, swift and right
Thou fight’st with valor, never unafraid
Thou art the Dark Knight, feared by thy foes
But loved by Gotham, city of thy birth
Thy loyal allies, Robin and Batgirl knows
Thy strength of spirit, unmatched on this earth
Oh Batman, thy courage doth inspire
Thy legend shall never fade, nor expire.
AI Experiments Featuring Monkeys
I was experimenting with AI writing and images and was experimenting. My initial testing was for serious subject matters, and it proved to be surprisingly well-written.
I decided to experiment to see how absurd things could get and was not disappointed. Here’s the first result.
A sonnet about monkeys in the style of William Shakespeare
Oh primate of the jungle wild, with fur so soft and warm,
Your funny face is full of cheer, your spirit full of charm.
Your leaps and bounds are so delight, your antics such a sight,
Your antics bring joy and laughter, day and night.
Your antics full of curious play, never a dull moment today,
Your cries bring life to the trees, your presence is here to stay.
Your chatter fills the air with sound, as you swing from tree to tree,
Your kind is full of joy, of this much I guarantee.
Your life is full of family, and you are never lonely,
Your love and care for one another, is so pure and honestly.
Your life is filled with plenty of adventure, curiosity and more,
Your life is full of joy, and near the jungle floor.
Oh primate of the jungle wild, I sit and watch you play,
Your furry face and kind spirit, I shall never forget today.
Your life is full of joy and cheer, your presence warm and bright,
Your life is full of love and fun, and I am glad to be in your sight.
Using Laravel Vite with MAMP
As seen in other posts, I use MAMP quite a bit for my web development environment. I know I can run docker, or any of the other platforms out there but they use more memory and resources that I’d prefer to devote to my dev tools.
I started a new Laravel project and wanted to use MAMP but Vite was throwing errors due to the SSL not matching out of the box.
When adding
@vite('resources/js/app.js')
to my blade file, I’d get errors including:
This request has been blocked; the content must be served over HTTPS.
I found articles saying to add –https or –host to my package json command but then I got this error:
net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH
Load MAMP Pro, add your host and generate your SSL certificates. For this example, we’ll use set the host name to my-app.test, and assume you’re storing the SSL keys in the default location.
Open vite.config.js and add the following 2 lines:
import fs from 'fs'; const host = 'my-app.test';
Then add this to defineConfig section:
server: { host, hmr: { host }, https: { key: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.key`), cert: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.crt`), }, },
You should now be able to run npm run dev and have no issues.
Sample full vite.config.js file for easy reference:
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import fs from 'fs'; const host = 'my-app.text'; export default defineConfig({ server: { host, hmr: { host }, https: { key: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.key`), cert: fs.readFileSync(`/Applications/MAMP/Library/OpenSSL/certs/${host}.crt`), }, }, plugins: [ laravel([ 'resources/sass/app.scss', 'resources/js/app.js', ]), ], });
Add GTM to Gatsby using Helmet
One of my devs needed to add Google Tag Manager (GTM) to an older Gatsby project we built and he was running into issues implementing the GTM code provided by Google since the react-google-tag-manager package required a newer version of Gatsby and its dependencies.
The issue turned out to be that the strings needed to be escaped for Helmet/React to process it correctly. If you’re using an older version of Gatsby, the snippet below should help you add GTM and call your events as needed. Just add it to your main template file.
const googleAnalyticsId = 'your-google-id-here'
<Helmet>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}></script>
<script>
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', "${googleAnalyticsId}");
`}
</script>
</Helmet>
How to deploy a React app to Amazon S3 using Gitlab CI/CD
I’ve been trying to build more CI/CD scripts using Gitlab to automate pipeline deployments for work. Here’s a useful one for building and deploying a React app to Amazon S3.
You’ll need to add a variable called S3_BUCKET_NAME to your repo or replace the variable with your bucket path.
stages:
- build
- deploy
build react-app:
#I'm using node:latest, but be sure to test or change to a version you know works. Sometimes node updates break the npm script.
image: node:latest
stage: build
only:
- master
script:
# Set PATH
- export PATH=$PATH:/usr/bin/npm
# Install dependencies
- npm install
# Build App
- CI=false npm run build
artifacts:
paths:
# Build folder
- build/
expire_in: 1 hour
deploy master:
image: python:latest
stage: deploy
only:
- master
script:
- pip3 install awscli
- aws s3 sync ./build s3://$S3_BUCKET_NAME --acl public-read
How to Setup CI/CD of Jigsaw Site to Digital Ocean Droplet Using Bitbucket Pipelines
I created a new personal resume site and decided I wanted to build a static site since it wouldn’t be frequently updated. I evaluated Nuxt, Gatsby, and a few others but settled on Jigsaw, a static site generator based on Laravel. I had never used it before and figured this would be a good learning experience while building something I needed. I was pleasantly surprised by how easy it is to use and setup, so kudos to the Tighten team for putting together such an elegant solution.
I wanted to get a CI/CD pipeline configured to handle the site’s deployment but couldn’t find any working tutorials, so I’m sharing my solution in case it helps others. I’m using Bitbucket for this since it’s a personal private repo, so I’m using Bitbucket Pipelines.
Instructions
After you enable pipelines for your project, you’ll need to configure a Pipelines Repository Variable in your project. Go to the settings tab in your repo, and then select Repository variables:
Add 3 variables:
- USER_NAME – The SSH user name you want Bitbucket to use to connect to your server.
- PRODUCTION_HOST – Your domain that Bitbucket should connect to
- FOLDER – Folder Path where the site should be deployed to
Generate an SSH key (or use your own) and add it to your server under the SSH Keys tab in Pipelines:
I generated a new key and then added it to ~/.ssh/authorized_keys for the account.
Add this YAML snippet to your bitbucket-pipelines.yml in your root. This will use PHP 7.4, install rsync, node + npm, composer, and build the production version of the site to deploy to the specified folder.
The -aVP switch for rsync is to give me verbose progress feedback so I can see what’s happening. If you don’t need the detail, switch it to -a.
image: php:7.4-fpm
pipelines:
branches:
master:
- step:
name: Jigsaw Build
script:
- apt-get update && apt-get install -y unzip
- apt-get install rsync openssh-client nodejs npm -y
- curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
- composer install
- npm install
- npm run production
- rsync -avP build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-data
I received a few errors when rsync ran. In case you run into them as well, here’s the list and fixes. The first was:
rsync: failed to set times on "$FOLDER": Operation not permitted (1)
I added --no-t
to resolve that and then got a new error:
rsync: failed to set permissions on "$FOLDER": Operation not permitted (1)
which was fixed with adding the switch --no-perms
. My final rsync command became:
rsync -avP --no-t --no-perms build_production/ $USER_NAME@$PRODUCTION_HOST:$FOLDER --exclude=bitbucket-pipelines.yml --chown=www-data:www-data
How to use Backblaze B2 with Laravel
I am working on a Laravel project and decided to use a Backblaze bucket as it’s cheaper for storage when compared to AWS S3. I couldn’t find a tutorial on how to get it working from scratch and I tested a bunch of Laravel B2 libraries that didn’t end up working. The good news is that you don’t need a special B2 plugin and instead can use the S3 package recommended by the Laravel docs.
If you haven’t added the flysystem-aws-s3 package, add it to your project using composer:
composer require league/flysystem-aws-s3-v3
Login to your B2 account and create your bucket with your required settings. Once created, you’ll want to create a new application key with the permissions you need for your app. You should get a confirmation once it’s generated:
Open your .env file and locate the settings for AWS. You’ll need to add one key that’s not there by default:
AWS_ENDPOINT=
Match the settings in your .env from the application key to the values below.
AWS_ACCESS_KEY_ID=keyID
AWS_SECRET_ACCESS_KEY=applicationKey
AWS_DEFAULT_REGION=us-west-000
AWS_BUCKET=bucket-name
AWS_ENDPOINT=S3 Endpoint
Now you should be able to call the Laravel storage system like normal:
\Storage::disk('s3')->put('test.txt', 'test');
How to Setup a CI/CD Pipeline for Storybook.js using Gitlab
I just spent a few hours setting up a Gitlab pipeline to deploy a Storybook.js site. Of course the end result ended up being much simpler than I made it out to be. Like everything else on my blog, I’m sharing in case anyone else can use the information to save time.
Just put this in your gitlab-ci.yml and it’ll take care of caching the node modules and building your static version of Storybook to deploy.
image: node:latest
cache:
paths:
- node_modules/
stages:
- build
- deploy
build:
stage: build
script:
- npm install
- npm run build-storybook -- -o storybook-static
artifacts:
paths:
- storybook-static
only:
- qa
- develop
- master
deploy:
stage: deploy_to_aws
# add your deploy code here