Skip Webpack when Testing

Published on by

Skip Webpack when Testing image

Let’s talk about getting rid of NodeJS in your CI pipelines.

I run Chipper CI (continuous integration for Laravel). I’ve always been annoyed that Webpack builds take more time and cause more issues than the actual valuable part of a CI pipeline.

The majority of us just need to run our tests and perhaps kick off a deployment. Node build tasks add a bunch of time and require way more CPU/RAM usage.

What if we just didn’t need Node in our pipeline? Can we just … not?

The answer is: Definitely, maybe!

Feature Tests

Very often, the only reason to build static assets in a CI pipeline is to generate the mix-manifest.json file.

This allows the mix() helper to work when running Laravel Feature tests. The feature tests make HTTP calls into your app, and thus often render blade templates that use the mix() helper.

If you don’t have a manifest file, an error is thrown!

Generating this manifest file involves building your static assets - in other words, using npm (or yarn) to install dependencies and run Webpack tasks:

# Build static assets
 
npm ci --no-audit
npm run dev

Sidenote: You should almost definitely be committing your package-lock.json file and running npm ci --no-audit instead of npm install!

If you take a look at your public/mix-manifest.json file, it likely looks something like this (with or without hashes, depending on if you enabled versioning):

{
"/js/app.js": "/js/app.js",
"/js/foo.js": "/js/foo.js",
"/css/app.css": "/css/app.css"
}

Here's the kicker: You don't necessarily need this file to exist for your tests!

Within your test's setUp() method, you can add the following magic:

protected function setUp(): void
{
parent::setUp();
 
$this->withoutMix();
}

With that in place, the mix() helper won't return any errors with a missing manifest file. Your tests can pass without needing to run NodeJS tasks!

Another thing you can do is create a manifest file for your CI pipeline that you copy for testing.

Let's say our Mix config generates the above mix-manifest.json file. We can commit a dummy manifest file to tests/mix-manifest.json, and it will always be available!

Then, in our CI pipeline scripts, we can use that file instead of installing/building our Node dependencies:

# What if we created a mix-manifest.json file just for testing?
# During CI, we can just move it where it needs to go
cp tests/mix-manifest.json public/mix-manifest.json
 
# And then run your tests, no NodeJS required!
php artisan test

With this file in place, the mix() helper will work, and your feature tests can pass without issue!

This (or any method!) that creates a correct manifest file can help you save a LOT of time and server resources in your CI build pipelines.

You'll need to update your tests/mix-manifest.json file anytime you change your configuration in a way that adds files to the real manifest file.

When do you need to build assets?

Sometimes, you do need to build assets in your CI pipeline! Here’s the most common times you need to:

  1. When you build production assets to bundle them up into an “artifact” (zip file, container image, etc) that you can deploy
  2. When you run other node commands as part of your test suite, such as eslint
  3. When you are browser testing with Laravel Dusk

What if I need to build assets?

You can still save precious time even if you need to build your static assets in your CI scripts!

My favorite package for this is Airdrop (by Aaron Francis). It helps you build static assets only if they’ve changed between commits. If they have not changed, you can download them from a file system driver such as S3.

Chris Fidao photo

Teaching coding and servers at CloudCasts and Servers for Hackers. Co-founder of Chipper CI.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.

Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
No Compromises logo

No Compromises

Joel and Aaron, the two seasoned devs from the No Compromises podcast, are now available to hire for your Laravel project. ⬧ Flat rate of $7500/mo. ⬧ No lengthy sales process. ⬧ No contracts. ⬧ 100% money back guarantee.

No Compromises
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Bacancy logo

Bacancy

Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

Bacancy
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce
LaraJobs logo

LaraJobs

The official Laravel job board

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit: Laravel SaaS Starter Kit

SaaSykit is a Multi-tenant Laravel SaaS Starter Kit that comes with all features required to run a modern SaaS. Payments, Beautiful Checkout, Admin Panel, User dashboard, Auth, Ready Components, Stats, Blog, Docs and more.

SaaSykit: Laravel SaaS Starter Kit
Rector logo

Rector

Your partner for seamless Laravel upgrades, cutting costs, and accelerating innovation for successful companies

Rector
MongoDB logo

MongoDB

Enhance your PHP applications with the powerful integration of MongoDB and Laravel, empowering developers to build applications with ease and efficiency. Support transactional, search, analytics and mobile use cases while using the familiar Eloquent APIs. Discover how MongoDB's flexible, modern database can transform your Laravel applications.

MongoDB

The latest

View all →
The Inertia.js v2 Beta is Here image

The Inertia.js v2 Beta is Here

Read article
Mastering Laravel, No Compromises, and SourceDive with Joel Clermont image

Mastering Laravel, No Compromises, and SourceDive with Joel Clermont

Read article
Now you can install PHP and the Laravel installer with a single command image

Now you can install PHP and the Laravel installer with a single command

Read article
WireSpy is a Sleek New Debug Bar for Laravel Livewire image

WireSpy is a Sleek New Debug Bar for Laravel Livewire

Read article
The Laracon AU schedule is now live image

The Laracon AU schedule is now live

Read article
Supercharge PhpStorm with Laravel Idea image

Supercharge PhpStorm with Laravel Idea

Read article