When I run npm run watch and update my source .js and .scss assets, the compilation is run automatically as expected. When I update the webpack.mix.js file, the changes are NOT compiled automatically.
Is this something that v6 doesn't support? Because v5 did work as expected.
The config:
const mix = require('laravel-mix')
mix.js('resources/js/app.js', 'public/js')
.sass('resources/css/app.scss', 'public/css')
.version()
package.json:
{
...
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"production": "mix --production"
}
...
}
Weird, it works for me. Have you tried npm run watch-poll instead? Are you running the latest version of Laravel Mix?
"laravel-mix": "^6.0.11",
Unrelated, you may want to update your package.json to the following if you're using Laravel Mix 6.
"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"
},
According to 8.x Laravel Docs...
Webpack may not be able to detect your file changes in certain local
development environments. If this is the case on your system, consider
using the watch-poll command.
Related
I have two different environments with named .env.development, .env.production, and common .env also.
.env.development looks like this,
TEST_LABEL=Development
.env.production looks like this,
TEST_LABEL=Production
.env looks like this,
TEST_LABEL=ENV
And here is my babel.config.js,
module.exports = function (api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module:react-native-dotenv",
{
"moduleName": "#env"
},]
]
};
};
this is the scripts in package.json
"scripts": {
"start": "react-native start",
"development": "NODE_ENV=development expo start",
"production": "NODE_ENV=production expo start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
And this is how I used it in my Homescreen.js
import {TEST_LABEL} from "#env"
...
<Text>{TEST_LABEL}</Text>
And this displays always Development even I run the production env
I run the app like npm run development for development environment, npm run production for production environment.
I am using react-native-dotenv
Here is the Project structure snapshot,
I found this issue and it says the only supported envs are development, production, and test. If you want to use other env names you can use the experimental feature APP_ENV
"demo": "APP_ENV=demo expo start",
"local": "APP_ENV=local expo start",
and I think .local files are loaded by default
UDPATE
I tested your config and it looks like this issue is the reason the value is not updating, adding -c to your commands clears the cache and load the correct env values
"development": "NODE_ENV=development expo start -c",
"production": "NODE_ENV=production expo start -c",
I made the basic installation from Vue.JS in my Laravel project, this is my package.json
{
"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": "^5.0.1",
"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"
}
}
So I run this code that everyone does after installation npm run install && npm run dev for the mix from Laravel generate the files, every tutorial say that I must put this in the footer from my main file
<script src="{{ asset('js/app.js') }}"></script>
And always say that the file doesn't exist, it is true because when I run this command from mix above, this simple make a js and a css folder in a new public folder, this is the right approach? because I don't see any tutorial that this command makes a public folder, see the image below:
So when I explicitly put this path:
<script src="{{ asset('public/js/app.js') }}"></script>
My Vue.js is loaded and I see the default text from Vue.js in console, but when I put the template from this file TesteFood.vue
<template>
<h1>Testando VUE</h1>
</template>
Is not showing and I make this command too npm run watch no success.
Try the mix helper function:
<script src="{{ mix('js/app.js') }}"></script>
I simply reinstall all my Laravel and install Vue.js and don't move the public folder and all is working fine.
Thank you all!
when you install the laravel 6, then run this command composer require laravel/ui --dev for integrating all vue js dependencies, then create your component and register that in app.js file like this :
Vue.component('teste-food', require('./components/TesteFood.vue'));
and then run npm run dev for compiling once the codes or npm run watch for compiling anythime you add some vue.js file or sass in your porject.
In this steps you should see your component.
My app is split into an API and a UI portion. Deployment strategy requires they share a package.json. The file structure looks like
client/
src/
main.js
api/
package.json
vue.config.js
I am using the standard vue-cli scripts.
package.json
"scripts": {
"serve:ui": "vue-cli-service serve",
"build:ui": "vue-cli-service build",
"lint:ui": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
}
When I do npm run serve:ui, I get
This relative module was not found:
* ./src/main.js in multi ./node_modules/#vue/cli-service/node_modules/webpack-dev-server/client?http://10.0.2.15:8080/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
So, I tried modifying vue.config.json as per the docs:
vue.config.js
const path = require('path');
module.exports = {
entry: {
app: './client/src/main.js'
}
}
Now, I get the error:
ERROR Invalid options in vue.config.js: "entry" is not allowed
How do I tell vue-cli where my app entrypoint is?
I discovered based on this Github Issue that you can pass a custom entrypoint only in the command line. This is true for both build and serve. See also in the documentation, a single block of code demonstrating this.
Usage: vue-cli-service serve [options] [entry]
I changed my script to
"serve:ui": "vue-cli-service serve client/src/main.js",
and now it can find the entrypoint.
You can add the entry to the pages option and make sure you include the template too.
vue.config.js
module.exports = {
pages: {
app: {
entry: 'client/src/main.js',
template: 'client/public/index.html',
},
},
};
If you don't like a separate file for this configuration you can also add this to a package.json file:
package.json
"vue": {
"pages": {
"index": {
"entry": "client/src/main.js",
"template": "client/public/index.html"
}
}
},
I believe you are trying to running are building a nodejs app with vue as frontend. I ran into some issues similar to that some time ago and I fixed it by installing laravel-mix to the project which helps me compile vue.
"scripts": {
"start": "node app.js",
"dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js | nodemon app.js",
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js | node app.js"
},
So when i run npm run watch, it run the vue-cli command and power the node app. all in real time.
Create a new file in the root directory named webpack.mix.js
Insert these lines:
let mix = require("laravel-mix");
mix.js("src/js/app.js", "public/js")
.sass('src/scss/app.scss', 'public/css’);
src/js/app.js is the main vue file that compiles to public/css
I'm having a lot of trouble deploying to heroku/production with babel(using babel-cli) + es6 javascript. My app is a simple express and node server written in es6 style javascript.
I'm using "babel-cli" (installed via package.json) and a postinstall script inside package.json to precompile my es6 javascript into a "build" folder before starting the server.
The weird thing is that everything compiles smoothly with babel-cli for development, but not for production.
When deploying to production/heroku, the build process gets stuck on the babel command in Makefile and throws an error.
Package.json
{
"name": "messenger-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rm -rf build && mkdir build",
"build-server": "babel src --out-dir build",
"build": "npm run clean && npm run build-server",
"postinstall": "make build",
"start": "node ./build/server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.9.0",
"body-parser": "^1.15.2",
"express": "^4.14.0",
"request": "^2.72.0"
},
"engines": {
"node": "4.4.5"
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-preset-stage-2": "^6.11.0"
}
}
Makefile:
build: clean server_build
clean:
rm -rf build
mkdir -p build
server_build:
babel src --out-dir build
rsync -av --include \*/ --include \*.json --exclude \* ./src/ ./build/
rsync -av --include \*/ --include \*.ejs --exclude \* ./src/ ./build/
.PHONY: build clean
The error:
You have mistakenly installed the `babel` package, which is a no-op in Babel 6.
Babel's CLI commands have been moved from the `babel` package to the `babel-cli` package.
Any help would be much appreciated! Setting up server stuff is my worst nemesis! :(
I usually run babel through weback, so I could be wrong here (I don't typically use makefiles), BUT, I would assume you would need to install babel-core in order for it to run correctly? It seems like the error is related to the fact that you just have "babel" installed, which will not work with v6. You need to install its components, which at minimum would require "babel-core."
"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon lib/index.js --exec npm run build"
}
Using the command npm run watch results in the following wrong command being run: [nodemon] starting "npm lib/index.js run build"
How would I write a nodemon command that, on reload, transpiles the code using babel and reloads the code?
"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon --exec \"npm run build && node lib/index.js\" -e js --ignore lib/"
}
Then run npm run watch. After this, nodemon will rebuild the project and then restart the server every time source code(.js files) is modified.
--exec specifies what non-node scripts (also works for node scripts as above node lib/index.js) you want nodemon to execute when there is a file change.
-e specifies what file extensions you want nodemon to watch.
--ignore specifies the files/directories you want nodemon to ignore. This option is essential to solve this problem because if you do not specify to ignore this lib/ folder, nodemon will restart infinitely as the compiled files in lib/ are also .js files.
You could simply run your code with babel-node to avoid explicit transpiling.
$ nodemon lib/index.js --exec babel-node --presets=es2015,stage-2
It seems like this is the recommended way to use nodemon with babel.
Please note, running --exec could have unintended side effects when running your development environment remotely of your localhost
You can have two nodemons, one to transpile and the other to run your code. In package.json you can do something like this:
"scripts": {
"serve": "nodemon --watch dist/ ./dist/index.js",
"build" : "nodemon --watch src/ --exec babel ./src --out-dir ./dist --source-maps --copy-files"
},
There is an option to build files with Babel in "watch" mode, let Nodemon monitor just the "build" folder and restart the app upon changes to the compiled output.
{
"name": "app",
"version": "1.0.0",
"private": true,
"dependencies": {},
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"nodemon": "^1.19.2"
},
"scripts": {
"build": "babel src --out-dir build --source-maps=inline --verbose",
"start": "yarn build --watch & sleep 1 && nodemon --watch build build/index.js"
}
}
This example is taken from GraphQL API Examples repository on GitHub.
"scripts": {
"build": "babel src -d lib",
"start": "nodemon --exec babel-node lib/index.js",
"serve": "npm run build && node lib/index.js"
}
Serve is for production, with npm start what you do is transpile first and then run nodemon.
A better option would be to not use a global install but instead use the package installed locally. This will also help for automation builds that might be setup the same as your local machine per 12 factor app design.
"scripts": {
"watch": "node ./node_modules/nodemon/bin/nodemon.js"
}