I wanted to try out Sail on my Windows machine, however, after installing Breeze on a brand new installation of Laravel and running sail npm run dev I received a 404 in the browser for http://localhost/css/app.css and http://localhost/js/app.js when navigating to http://localhost/login on my Windows host.
Laravel Vite Plugin Version: v0.6.0
Laravel Version: v9.19
Node Version: v16.18.0
NPM Version: v8.19.2
Host operating system: Windows
Web Browser & Version: Firefox 106.0.2 (64-bit)
I am able to navigate to http://localhost:5173/ in the browser which displays the informative message, so we know that it is working. When using inspect element on the /login page the following URLs are returned as a 404: http://localhost/css/app.css & http://localhost/js/app.js.
In previous attempts I did try adding the following snippet to my vite.config.js file, however, it made no difference and the problem persisted.
server: {
hmr: {
host: 'localhost',
},
},
This is a fresh install of Docker, WSL2 and Laravel with Breeze so in theory, it should all be working, but clearly, something is awry.
The result is seeing this: https://i.imgur.com/FUZsIYh.png
If anybody could point me in the right direction I would really appreciate it!
I am working on a Laravel and Vue project, at the moment of executing the server
php run serve the project works normally, I can log in normally but, when I run the vue compilation command npm run watch or npm run dev the page stops loading and throws me an error in the console enter image description here
the composition of the webpack.mix.js file is this:
mix.webpackConfig({
output: {
publicPath: '/mediamanager/public',
publicPath: '/',
chunkFilename: 'js/components/[name].js',
}
});
I made a project scaffolding script from the official laravel one, you can check the next steps to reproduce my issue:
⚠️FOR YOUR SECURITY ALWAYS READ UNKWOWN SCRIPTS BEFORE USING THEM⚠️
Create an example Laravel project with Laravel Sail + Jetstream Inertia with Teams support and Storybook
Scaffold a project with this sript
curl -s https://gist.githubusercontent.com/moracabanas/d264f9b2c6b7d9de6b0b56a091e1cf2d/raw/7fdc986378aa55fd329afd9d02f6d88aa80911ad/jetstream-storybook.sh | bash
Wait until finishes then
cd example-app
Run the laravel stack with Sail
./vendor/bin/sail up -d
Compile resources
./vendor/bin/sail npm run dev
Then you can visit localhost and you are good to go.
How to stop Laravel Sail stack
./vendor/bin/sail down
How to run Storybook
You must edit docker-compose.yml file and map the default Storybook ports - '6006:6006' like this:
version: '3'
services:
laravel.test:
build:
context: ./vendor/laravel/sail/runtimes/8.0
dockerfile: Dockerfile
args:
WWWGROUP: '${WWWGROUP}'
image: sail-8.0/app
ports:
- '${APP_PORT:-80}:80'
++ - '6006:6006'
...
This way Storybook ports are exposed to the machine, otherwise Storybook wont be reachable from localhost:6006
You must ./vendor/bin/sail up -d to let docker picking up those new port definition changes from docker-compose.yml
And then run Storybook with sail npm run storybook
The issue: Tailwind is not working on Storybook
Progress
✔️ Jetstream uses Webpack 5. Use Storybook build for webpack 5
✔️ Jetstream uses PostCSS 8. Use storybook PostCSS addon and configure it like here
❌ Laravel imports tailwind and postcss-import with the following webpack.mix.config:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
])
.webpackConfig(require('./webpack.config'));
if (mix.inProduction()) {
mix.version();
}
Where tailwind and postcss-import are loaded. I do not understand why it is not using autoprefixer nor what is postcss-import. I cannot find any documentation for this stack.
So I tried to load them on Storybook with the next postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
'postcss-import': {},
},
}
But it isn't loading in storybook.
This is why I think Tailwind isn't working in Storybook
info #storybook/vue3 v6.4.0-alpha.22
info
info => Loading presets
info => Loading 1 config file in "/var/www/html/.storybook"
info => Loading 9 other files in "/var/www/html/.storybook"
info => Adding stories defined in "/var/www/html/.storybook/main.js"
info => Using PostCSS preset with postcss#8.3.6
------------ nothing here ------------
info => Using default Webpack5 setup
Now back in default webpack 4 Storybook build you can clearly see postcss.config.js is loaded but webpack 4 build is incompatible:
info #storybook/vue3 v6.4.0-alpha.22
info
info => Cleaning outputDir: /var/www/html/storybook-static
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info => Loading 1 config file in "/var/www/html/.storybook"
info => Using implicit CSS loaders
info => Using custom postcss.config.js
info => Using default Webpack4 setup
ERR! Error: Rule can only have one resource source (provided resource and test + include + exclude)
So the last step I am missing is importing Tailwind and Postcss in Storybook the same way Laravel is doing it.
Summary
I have a package that needs to be wrapped by a real laravel app to be tested properly. Unfortunately I cant use the orchestra testbench. However I have setup a Github action for this. But, when running the final step vendor/phpunit/phpunit/phpunit path/to/package im experiencing the following issues:
PHPUnit can't resolve certain classes
It thinks PHPUnit setUp() is public in my parent class though it is protected.
I suspect some issue with caching or delay after push (but I have tested wiping all cache,
autoload and config)
Example error
Run vendor/phpunit/phpunit/phpunit packages/Ajthinking/PHPFileManipulator/tests
PHP Fatal error: Uncaught Error: Class 'PHPFileManipulator\Tests\FileTestCase' not found in /home/runner/work/php-file-manipulator/php-file-manipulator/host/packages/Ajthinking/PHPFileManipulator/tests/Unit/APIDelegationTest.php:10
Stack trace:
#0 /home/runner/work/php-file-manipulator/php-file-manipulator/host/vendor/phpunit/phpunit/src/Util/FileLoader.php(59): include_once()
#1 /home/runner/work/php-file-manipulator/php-file-manipulator/host/vendor/phpunit/phpunit/src/Util/FileLoader.php(47):
Reviewing my master branch, the requested file FileTestCase is there.
The full action script:
name: Laravel-wrapped-package-test
on: [push]
jobs:
laravel-tests:
runs-on: ubuntu-latest
steps:
- name: Install host app
run: composer create-project --prefer-dist laravel/laravel host
- name: Install package (this repo)
uses: actions/checkout#v2
with:
path: host/packages/Ajthinking/PHPFileManipulator
- name: Add this package to composer.json repositories
uses: ajthinking/merge-json-files#v1.0.20
with:
repo_relative_path: 'host/packages/Ajthinking/PHPFileManipulator'
- name: Require this package
working-directory: ./host
run: composer require ajthinking/php-file-manipulator #dev
- name: Publish things
working-directory: ./host
run: php artisan vendor:publish --provider="PHPFileManipulator\ServiceProvider"
- name: Run tests
working-directory: ./host
run: vendor/phpunit/phpunit/phpunit packages/Ajthinking/PHPFileManipulator/tests
TestCase
Below is my base test case. But the setUp method is never called. (Previously it was called TestCase as the default laravel provides - it was renamed while debugging)
<?php
namespace PHPFileManipulator\Tests;
use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
abstract class FileTestCase extends BaseTestCase
{
protected function setUp() : void
{
parent::setUp();
dd("it will never reach this dd call on github actions!");
}
}
Usage:
<?php
namespace PHPFileManipulator\Tests\Unit;
use PHPFileManipulator\Tests\FileTestCase;
class StupidTest extends FileTestCase
{
/** #test */
public function it_can_run_tests()
{
$this->assertTrue(true);
}
}
versions
Im using PHP 7.4.2 and PHPUnit 8.5.2 (same as github actions ubuntu-latest) Mimicing the action script on my own machine works fine.
I have reviewed CASE on github/local found no differences.
Any ideas, what I am missing?
I failed updating the host app composer.json repositories section. That meant requiring the package with #dev flag (taking latest commit) had no effect
- instead an outdated package version was pulled from packagagist.
Fixed github workflow:
name: tests
on: [push, pull_request]
jobs:
laravel-tests:
runs-on: ubuntu-latest
steps:
- name: Install host app
run: composer create-project --prefer-dist laravel/laravel host
- name: Checkout the package
uses: actions/checkout#v2
with:
path: host/packages/Ajthinking/PHPFileManipulator
- name: Add composer.json repository
working-directory: ./host
run: composer config repositories.php-file-manipulator path "/home/runner/work/php-file-manipulator/php-file-manipulator/host/packages/Ajthinking/PHPFileManipulator"
- name: Require the package
working-directory: ./host
run: composer require ajthinking/php-file-manipulator #dev
- name: Publish things
working-directory: ./host
run: php artisan vendor:publish --provider="PHPFileManipulator\ServiceProvider"
- name: Run tests
working-directory: ./host
run: vendor/phpunit/phpunit/phpunit packages/Ajthinking/PHPFileManipulator/tests
I'm trying to set up BrowserSync to work with my Laravel project. However, when I run npm run watch, localhost:3000 doesn't load. I'm not getting any compilation errors in the terminal. Interestingly enough, the UI dashboard on localhost:3001 works perfectly fine.
If I run php artisan serve, localhost:8000 loads up fine, but of course, it's not connected with BrowserSync.
My webpack.mix.js file looks like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync({proxy:'localhost:3000'});
I'm using the following versions:
Laravel-Mix: 4.0.7
browser-sync: 2.26.7
webpack-dev-server: 3.8.0
browser-sync-webpack-plugin: 2.0.1
Any thoughts?
Install these two plugins:
"browser-sync": "^2.26.5"
"browser-sync-webpack-plugin": "^2.0.1",
mix.browserSync('http://localhost:8000/');
I was able to reload via brosersync adding injectChanges: false to my browsersync line.
you must do it like so:
mix.browserSync({
proxy: "http://localhost:8000"
});
The BrowserSync docs states that you can set ui: false
This way you can then set the port: 8080 or whatever value you want that's not being used. Here's how implement it.
if (!mix.inProduction()) return mix.browserSync({
hot: true,
ui: false,
open: true,
watch: true,
https: false,
files: [
'./app/*',
'./routes/*',
'./public/*',
'./storage/*',
'./stories/*',
'./resources/*'
],
port: 8080,
host: '0.0.0.0',
proxy: {
target: "http://yourlocal.dev",
ws: true
}
});
In your webpack.mix.js, add the following:
mix.browserSync({
proxy: "http://localhost:8000"
});
After that, run the following commands
**npm uninstall browser-sync-webpack-plugin**
**npm install browser-sync-webpack-plugin**
The above will automatically open **http://localhost:3000/** on your browser
Add this script before Tag:
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.27.7'><\/script>".replace("HOST", location.hostname));
If not work change your webpack.mix.js like this and the the above script before </ body> Tag:
const mix = require("laravel-mix");
//Compiling scss to css
mix.sass("public/assets/css/style.scss", "public/assets/css/style.css");
mix.browserSync({
proxy: "http://localhost/myapp/", //Your host
files: [ //Files for watching
"./app/**/*",
"./routes/**/*",
"./public/assets/css/*.css",
"./public/js/*.js",
"./resources/views/**/*.blade.php",
"./resources/lang/**/*",
],
});
Then run: npm run watch
When you start the Laravel server via php artisan serve, this will be printed in the terminal:
Starting Laravel development server: http://127.0.0.1:8000
After starting the Laravel server, I changed the code in the webpack.mix.js file from this:
mix.browserSync();
To that:
mix.browserSync({
proxy: "http://127.0.0.1:8000",
});