jnlittle's avatar

Use laravel-mix with development server

Looking for a solution to run laravel-mix with my Laravel 5.6 project. I am new to Laravel so it might be a newbie issue. Also one caveat is I use a development server:

$ lsb_release -d; apache2 -v | grep version; laravel -V; echo -n "Node "; node -v; echo -n "npm "; npm -v
Description:    Ubuntu 16.04.4 LTS
Server version: Apache/2.4.29 (Ubuntu)
Laravel Installer version 1.4.1
Node v9.7.1
npm 5.7.1

And to set proper ownership and permissions for Apache I use bindfs to mount development sites within my home. Always worked for me allowing team access while maintaining proper ownership for Apache.

Now with this setup I can use composer, artisan, and npm and create a new Laravel project. However if I try to use mix to update my sass and js it fails:

$ npm run dev
 ...
sh: 1: cross-env: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
...

This is a minty-fresh install done moments ago. Suspicious that it might be bindfs I spun-up and new Laravel directly within my home. I works but not accessible for Apache.

I have been able to work around by installing sass on the server which takes care of dealing with the sass, but JavaScript is a problem. Cannot get gulp to install properly. Anyway running independent services for sass and js is a bit ugly, I would prefer laravel-mix.

Any suggestions?

0 likes
5 replies
ejdelmonico's avatar

Looks like you have a bad or missing files with your npm install. I would remove the node_modules directory and run npm install again. Make sure your node_modules directory is 755 permissions. Permissions should look like this from the root of the project: https://cl.ly/qPxM

The only difference should be your user and group.

jnlittle's avatar

I am afraid I already tried that. I am fairly sure the issue is using bindfs to translate the permissions.

See here is the bindfs parsed mount from my home directory:

~/tools/see-sites/shop$ ll
total 1124
drwxrwsr-x  16 jonathan sambashare   4096 Mar 24 21:51 ./
drwxrwsr-x  16 jonathan sambashare   4096 Mar 23 11:47 ../
drwxrwsr-x   6 jonathan sambashare   4096 Mar 23 11:47 app/
-rw-rw-r--   1 jonathan sambashare   1686 Mar 23 11:47 artisan
drwxrwsr-x   3 jonathan sambashare   4096 Mar 23 11:47 bootstrap/
drwxrwsr-x   3 jonathan sambashare   4096 Jan 14 21:42 cgi-bin/
-rw-rw-r--   1 jonathan sambashare   1477 Mar 23 11:47 composer.json
-rw-rw-r--   1 jonathan sambashare 143703 Mar 23 11:47 composer.lock
drwxrwsr-x   2 jonathan sambashare   4096 Mar 23 11:47 config/
drwxrwsr-x   5 jonathan sambashare   4096 Mar 23 11:47 database/
-rw-rw-r--   1 jonathan sambashare    702 Mar 23 11:47 .env
-rw-rw-r--   1 jonathan sambashare    651 Mar 23 11:47 .env.example
-rw-rw-r--   1 jonathan sambashare    111 Mar 23 11:47 .gitattributes
-rw-rw-r--   1 jonathan sambashare    155 Mar 23 11:47 .gitignore
drwxrwsr-x   2 jonathan sambashare   4096 Jan 14 21:43 logs/
drwxrwsr-x 985 jonathan sambashare  36864 Mar 24 21:48 node_modules/
-rw-rw-r--   1 jonathan sambashare   1022 Mar 23 16:15 package.json
-rw-rw-r--   1 jonathan sambashare 598996 Mar 23 11:58 package-lock.json
-rw-rw-r--   1 jonathan sambashare   1088 Mar 23 11:47 phpunit.xml
drwxrwsr-x   5 jonathan sambashare   4096 Mar 23 21:38 public/
drwxrwsr-x   5 jonathan sambashare   4096 Mar 23 11:47 resources/
drwxrwsr-x   2 jonathan sambashare   4096 Mar 23 11:47 routes/
drwxrwsr-x   3 jonathan sambashare   4096 Mar 24 17:18 .sass-cache/
-rw-rw-r--   1 jonathan sambashare    563 Mar 23 11:47 server.php
drwxrwsr-x   5 jonathan sambashare   4096 Mar 23 11:47 storage/
drwxrwsr-x   4 jonathan sambashare   4096 Mar 23 11:47 tests/
drwxrwsr-x  37 jonathan sambashare   4096 Mar 23 11:47 vendor/
-rw-rw-r--   1 jonathan sambashare    549 Mar 23 11:47 webpack.mix.js
-rw-rw-r--   1 jonathan sambashare 257695 Mar 23 11:47 yarn.lock

You can see the permissions appear okay...(the sticky group is for Windows workstations access).

Now here are the real permissions when accessed absolute from root which is how Apache sees it:

$ ll /home/sites/shop
total 1124
drwxrwsr-x  16 www-data sambashare   4096 Mar 24 21:51 ./
drwxrwsr-x  16 www-data sambashare   4096 Mar 23 11:47 ../
drwxrwsr-x   6 www-data sambashare   4096 Mar 23 11:47 app/
-rw-rw-r--   1 www-data sambashare   1686 Mar 23 11:47 artisan
drwxrwsr-x   3 www-data sambashare   4096 Mar 23 11:47 bootstrap/
drwxrwsr-x   3 www-data sambashare   4096 Jan 14 21:42 cgi-bin/
-rw-rw-r--   1 www-data sambashare   1477 Mar 23 11:47 composer.json
-rw-rw-r--   1 www-data sambashare 143703 Mar 23 11:47 composer.lock
drwxrwsr-x   2 www-data sambashare   4096 Mar 23 11:47 config/
drwxrwsr-x   5 www-data sambashare   4096 Mar 23 11:47 database/
-rw-rw-r--   1 www-data sambashare    702 Mar 23 11:47 .env
-rw-rw-r--   1 www-data sambashare    651 Mar 23 11:47 .env.example
-rw-rw-r--   1 www-data sambashare    111 Mar 23 11:47 .gitattributes
-rw-rw-r--   1 www-data sambashare    155 Mar 23 11:47 .gitignore
drwxrwsr-x   2 www-data sambashare   4096 Jan 14 21:43 logs/
drwxrwsr-x 985 www-data sambashare  36864 Mar 24 21:48 node_modules/
-rw-rw-r--   1 www-data sambashare   1022 Mar 23 16:15 package.json
-rw-rw-r--   1 www-data sambashare 598996 Mar 23 11:58 package-lock.json
-rw-rw-r--   1 www-data sambashare   1088 Mar 23 11:47 phpunit.xml
drwxrwsr-x   5 www-data sambashare   4096 Mar 23 21:38 public/
drwxrwsr-x   5 www-data sambashare   4096 Mar 23 11:47 resources/
drwxrwsr-x   2 www-data sambashare   4096 Mar 23 11:47 routes/
drwxrwsr-x   3 www-data sambashare   4096 Mar 24 17:18 .sass-cache/
-rw-rw-r--   1 www-data sambashare    563 Mar 23 11:47 server.php
drwxrwsr-x   5 www-data sambashare   4096 Mar 23 11:47 storage/
drwxrwsr-x   4 www-data sambashare   4096 Mar 23 11:47 tests/
drwxrwsr-x  37 www-data sambashare   4096 Mar 23 11:47 vendor/
-rw-rw-r--   1 www-data sambashare    549 Mar 23 11:47 webpack.mix.js
-rw-rw-r--   1 www-data sambashare 257695 Mar 23 11:47 yarn.lock

I am fairly sure is the bindfs mount that is my issue. If I just spin up inside my profile it works, but then Apache cannot load it, nor any other users access it.

bindfs worked great in the past because I could give team access where the files would be served with their credentials yet maintain Apache's ownership.

I can use sass to update the app.css. I guess I will just forego the app.js and just link manually any custom scripts. Or manually minify them then concatenate before deploying to production.

Ishatanjeeb's avatar

Did you install cross-env?run this on terminal-


npm install cross-env --save-dev

jnlittle's avatar

Yep. It was installed at the initial spin-up of the project and installing it again produces a slew of ENOTEMPTY warnings. No difference in the end.

$ npm run dev

> @ dev /home/jonathan/tools/see-sites/shop
> npm run development


> @ development /home/jonathan/tools/see-sites/shop
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

sh: 1: cross-env: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 126
...

It must the credentials aliasing of the bindfs, because it works okay if I spin-up a project directly within my home directory

jnlittle's avatar
jnlittle
OP
Best Answer
Level 1

Solved.

I was correct the issue was the permissions management of bindfs interfering with npm. The solution was to invert the process. I moved the laravel project dir under my home directory and to give access to the server's apache webserver I used bindfs to 'alias' path and permissions for apache.

npm run dev and npm run watch runs without error and I can update my sass and js. And as far as apache is concerned the site is located within the vhosts sites dir and is owned by www-data:www-data.

Please or to participate in this conversation.