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.

image
Oh Dear

Oh Dear is the best all-in-one monitoring tool for all your Laravel apps.

Visit Oh Dear
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
LoadForge logo

LoadForge

Easy, affordable load testing and stress tests for websites, APIs and databases.

LoadForge
Paragraph logo

Paragraph

Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Paragraph
Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. Partner with Lucky Media, your favorite Laravel Development Agency!

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
Laravel Forge logo

Laravel Forge

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

Laravel Forge
Oh Dear logo

Oh Dear

Oh Dear is the best all-in-one monitoring tool for all your Laravel apps.

Oh Dear
Tinkerwell logo

Tinkerwell

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

Tinkerwell

The latest

View all →
Get insights into all your Laravel notifications with Paragraphs new package image

Get insights into all your Laravel notifications with Paragraphs new package

Read article
FrankenPHP v1.0 is Here image

FrankenPHP v1.0 is Here

Read article
Self-healing URLs in Laravel image

Self-healing URLs in Laravel

Read article
Laravel 10.35 Released image

Laravel 10.35 Released

Read article
Solve n+1 queries in PHP with Scout APM image

Solve n+1 queries in PHP with Scout APM

Read article
Show Outdated Composer Dependencies in Laravel Pulse image

Show Outdated Composer Dependencies in Laravel Pulse

Read article