Hi everyone I'm new in laravel, I'm using laravel 9, i tried to run (npm run watch) and it's about 30 mins nothing happened,
this's the message i get.
Hopefully I get some answers,
thank you in advance
i have tried npm run dev it doesn't work , so i replace it with npm run build .
this is what my package.json look like:
"private": true,
"scripts": {
"dev": "vite",
"watch": "npm-watch",
"build": "vite build"
},
"devDependencies": {
"#tailwindcss/forms": "^0.5.2",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.3",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"tailwindcss": "^3.1.0",
"vite": "^4.0.3"
},
"dependencies": {
"npm-watch": "^0.11.0"
},
"watch": {
"build": {
"patterns": [
"src"
],
"extensions": "js,jsx"
}
}
}
I added ( "watch": "npm-watch",)
Related
I'm trying to deploy an app on heroku, but I'm getting an error when it tried to build the app with the webpack command. I have tried a number of fixes but can't seem to get it to work. I tried running the webpack.js file from node_modules like this node node_modules/webpack/bin/webpack.js but that didn't work either. Any ideas would be greatly appreciated! Here is my package.json file:
{
"name": "waste-not-client",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "concurrently npm:watch:*",
"build": "webpack --mode production",
"watch:compile": "webpack --mode development --watch",
"watch:serve": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build && node server/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Blue-ocean-HR/blueocean-client.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Blue-ocean-HR/blueocean-client/issues"
},
"homepage": "/",
"dependencies": {
"#auth0/auth0-react": "^1.12.0",
"axios": "^1.1.3",
"compression": "^1.7.4",
"concurrently": "^7.6.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"framer-motion": "^7.6.7",
"nodemon": "^2.0.20",
"path": "^0.12.7",
"react": "^18.2.0",
"react-autocomplete-input": "^1.0.19",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"webpack-bundle-analyzer": "^4.7.0"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"autoprefixer": "^10.4.13",
"babel-jest": "^29.1.2",
"babel-loader": "^8.2.1",
"compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.7.1",
"dotenv-webpack": "^8.0.1",
"postcss": "^8.4.19",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.3",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"engines": {
"node": "v16.16.0"
}
}
The error when I try to deploy on heroku:
sh: 1: webpack: not found
Your start script looks like it's designed for development work with live reloading. That's not what you want on Heroku.
You could rewrite your package.json scripts, but the easiest solution is probably to add a Procfile that Heroku will use in preference to your start script, e.g.
web: node server/server.js
You'll also want to remove your heroku-postbuild script entirely. It just repeats two things that Heroku does automatically (installing dependencies and running your build), and it also includes the runtime command that we now have in our Procfile.
I have deployed a test application on Vercel to submit a POST request to a planetscale database.
The application works fine under local environment, however after it is deployed, it resulted in a 404 not found when submitted to /api/add. Any idea what seems to be the issue? I have a feeling it may be my vercel.json but I couldn't quite figure out the issue on the doc, and the runtime functions for vercel-php also prevented deployment of app.css and app.js with a 404, so I have instead re-allocated vercel-php to "builds" instead.
https://laravelverceldeployment.vercel.app/
This is my package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"axios": "^0.21",
"browser-sync": "^2.27.7",
"browser-sync-webpack-plugin": "^2.3.0",
"laravel-mix": "^6.0.39",
"lodash": "^4.17.19",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.12",
"vue-loader": "^16.8.3"
},
"dependencies": {
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"alpinejs": "^3.7.1",
"vue": "^3.2.26"
}
}
and this is my vercel.json:
{
"version": 2,
"builds": [
{ "src": "/api/index.php", "use": "vercel-php#0.4.0" },
{ "src": "/public/**", "use": "#vercel/static" }
],
"routes": [
{
"src": "/(css|js|images)/(.*)",
"dest": "public/$1/$2"
},
{
"src": "/(.*)",
"dest": "/api/index.php"
}
],
"env": {
"APP_NAME": "laravelverceldeployment",
"APP_ENV": "production",
"APP_DEBUG": "false",
"APP_URL": "https://laravelverceldeployment.vercel.app",
"APP_CONFIG_CACHE": "/tmp/config.php",
"APP_EVENTS_CACHE": "/tmp/events.php",
"APP_PACKAGES_CACHE": "/tmp/packages.php",
"APP_ROUTES_CACHE": "/tmp/routes.php",
"APP_SERVICES_CACHE": "/tmp/services.php",
"VIEW_COMPILED_PATH": "/tmp",
"CACHE_DRIVER": "array",
"LOG_CHANNEL": "stderr",
"SESSION_DRIVER": "cookie",
"VIEW_COMPILED_PATH": "/tmp/views",
"SSR_TEMP_PATH": "/tmp/ssr",
"NODE_PATH": "node"
}
}
in vercel.json, routes dest is mapped to api/index.php.
So url api/ will mapped through index.php ? try with just /add url
About a day or 2 ago, I ran my NPM build, but it suddenly gave the error that the polyfill is not provided by default anymore with Webpack 5. I was able to fix a lot of the errors, but it keeps failing.
I get the following errors:
These are just a few of them.
I'm using laravel-mix#6.0.13 in this build with the following webpack.mix.js file:
const mix = require('laravel-mix');
require('mix-tailwindcss');
mix.webpackConfig({
resolve: {
fallback: {
fs: require.resolve('browserify-fs'),
path: require.resolve("path-browserify"),
"crypto": require.resolve("crypto-browserify"),
"https": require.resolve("https-browserify"),
"http": require.resolve("stream-http"),
"vm": require.resolve("vm-browserify"),
"os": require.resolve("os-browserify/browser"),
"stream": require.resolve("stream-browserify"),
"constants": require.resolve("constants-browserify"),
}
}
})
mix.options({ legacyNodePolyfills: false });
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/scss/app.scss', 'public/css')
.tailwind('./tailwind.config.js')
mix.sass('resources/scss/admin.scss', 'public/css')
My packages.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"browserify-fs": "^1.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^6.0.13",
"lodash": "^4.17.4",
"mix-tailwindcss": "^1.3.0",
"popper.js": "^1.12",
"postcss": "^8.1",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.12",
"sass-loader": "10.*",
"tailwindcss": "^2.1.2",
"vue": "^2.5.7",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"buefy": "^0.9.6",
"jquery": "^3.6.0",
"mix-tailwindcss": "^1.3.0",
"query-string": "^7.0.0",
"slick-carousel": "^1.8.1",
"vue": "^2.6.12",
"vue-it-bigger": "^0.2.2"
}
}
Does someone know how to fix this?
Solved it!
I added the the NodePolyfillPlugin plugin to my webpack config. I added browserify-fs to resolve.fallback.fs like this.
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
mix.webpackConfig({
plugins: [
new NodePolyfillPlugin(),
],
resolve: {
fallback: {
fs: require.resolve('browserify-fs'),
}
}
})
After this the build kept failing, i finally figured out that for some reason i had import {vue} from 'laravel-mix' in my app.js . this was giving als the errors. After removing this it ran succesfully!
This is my package.json file -->
{
"name": "aboutus",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"css/*.scss\" --npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\" "
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.3.0",
"node-sass": "^5.0.0",
"onchange": "^7.1.0",
"parallelshell": "^3.0.2"
},
"dependencies": {
"bootstrap": "^4.0.0",
"bootstrap-social": "^5.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"popper.js": "^1.16.1"
}
}
This is the error I'm getting ,please help!
It is the problem with the version of parallelshell write this:
npm install --save-dev onchange#3.3.0 parallelshell#3.0.1
It will solve your problem.
My problem: npm run watch (running in the backend side of the server) returns a blank html page, any updates that I make in the frontend are not compiled. The problem started to occur randomly, the only thing that changed is that I installed auth ui in Laravel.
My directory setup:
www
- frontend (Vuejs)
- standard vue files/folders
- package.json
- vue.config.js
- babel.config.js
- etc.
- backend (Laravel)
- standard laravel files/folders
- package.json
- webpack.mix.js
I know this is not an nginx problem but just in case you need to know, nginx rootfolder is pointing to /var/www/backend/public and is using a let's encrypt ssl certificate.
vue.config.js
module.exports = {
lintOnSave: false,
runtimeCompiler: true,
configureWebpack: {
resolve: {
symlinks: false
}
}
};
package.json (frontend)
{
"name": "a random name",
"author": "that will be me :)",
"description": "nice description",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"clearCache": "jest --clearCache",
"release": "npm-run-all clearCache lint build test:unit test:e2e"
},
"dependencies": {
"axios": "^0.19.2",
"cesium": "^1.71.0",
"core-js": "3.5.0",
"html-webpack-plugin": "^4.3.0",
"html-webpack-template": "^6.2.0",
"nouislider": "14.1.0",
"requirejs": "^2.3.6",
"v-tooltip": "2.0.2",
"vue": "2.6.10",
"vue-carousel": "0.18.0",
"vue-clickaway": "2.2.2",
"vue-kinesis": "^1.1.5",
"vue-lazyload": "1.3.3",
"vue-material": "1.0.0-beta-11",
"vue-router": "3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "4.1.1",
"#vue/cli-plugin-eslint": "4.1.1",
"#vue/cli-plugin-router": "4.1.1",
"#vue/cli-service": "4.1.1",
"#vue/eslint-config-prettier": "6.0.0",
"babel-eslint": "10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "3.1.1",
"eslint-plugin-vue": "^6.2.2",
"gulp": "^4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "1.19.1",
"sass": "1.23.7",
"sass-loader": "8.0.0",
"vue-template-compiler": "2.6.10",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12"
}
}
package.json (backend)
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.13",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "7.*",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"animo-core": "^1.0.8",
"bootstrap": "^4.5.0",
"gsap": "^3.4.2",
"jquery": "^3.5.1",
"paper": "^0.12.11",
"popper": "^1.0.1",
"popper.js": "^1.16.1",
"requirejs": "^2.3.6",
"simplex-noise": "^2.4.0",
"vue": "^2.6.11",
"vue-axios": "^2.1.5",
"vue-kinesis": "^1.1.5",
"vue-roller": "^1.12.1",
"vue-router": "^3.3.4",
"vue-text-transition": "^1.0.19",
"vuex": "^3.5.1"
}
}
webpack.mix.js
const path = require('path');
const mix = require('laravel-mix');
mix.webpackConfig({
resolve: {
alias: {
"#": path.resolve(__dirname, "resources/js/")
}
}
});
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
mix.copy('../frontend/public', 'public');
What I would like to happen (again)
Run npm run watch within the backend. Then it auto compiles my frontend to the public directory in the frontend. The backend then uses mix.copy to copy the compiled app.js and app.scss (or just all the content within the public folder) to the backend's public directory.
If you need any more information, please ask, I've been trying to fix this for the last couple of days now and I can't seem to find the solution anywhere.