vue-cli - cannot build for development mode - javascript

I have a .env file in my project
-public
-src
-.env.development.local
package.json
{
"name": "my-website",
"version": "0.1.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --mode development",
"lint": "vue-cli-service lint"
}
}
When I run npm run build for the first time, it works.
When I run it after that, it shows error:
my-website#0.1.0 build: `vue-cli-service build --mode development`
When I dig into the logs
13 verbose stack Error: my-website#0.1.0 build: `vue-cli-service build --mode development`
13 verbose stack Exit status 1
After I delete the public folder, it suddenly works

There should be more log output which would be helpfull.
Based on your error maybe this helps:
https://github.com/vuejs/vue-cli/issues/3420
also try deleting your package-lock file and run npm i again
after that it hopefully works

After I update the outputDir from public to build, it works.
vue.config.js
module.exports = {
outputDir : 'build',
}

Related

npm ERR! Missing script: "test" when using github actions

I wrote a test for my javascript application from the Actions part of git. However, it does not work as expected. Here it is:
# This is a basic workflow to help you get started with Actions
name: Node.js CI Testing
# Controls when the workflow will run
on:
# Triggers the workflow on push or pull request events but only for the main branch
push:
branches: [ main ]
pull_request:
branches: [ main ]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
# This workflow contains a single job called "build"
build:
# The type of runner that the job will run on
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Use Node.js
uses: actions/setup-node#v2
with:
node-version: "16.x"
- name: Install dependencies
run: npm install --legacy-peer-deps
- name: Run test
run: npm test
However, when I run it, I get the following errors:
Run npm test
npm ERR! Missing script: "test"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2022-07-25T23_14_24_295Z-debug-0.log
Error: Process completed with exit code 1.
I searched the internet for how to fix the problem and added the following line to my test file:
- name: Run test
working-directory: ./src
run: npm test
. but without success. Here is my package.json file:
{
"name": "hydrogen",
"version": "1.0",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.18",
"vite": "^2.7.13",
"vite-plugin-solid": "^2.2.5"
},
"dependencies": {
"#tailwindcss/forms": "^0.4.0",
...
"solid-js": "^1.3.3"
}
}
That is happening because when Github Actions is trying to run this part of the worflow:
name: Run test
run: npm test
npm does not find a "test" script in your package.json:
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
So if you don't have tests in your project you can get rid of "run: npm test" in your workflow or add a "test" script in your package.json:
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "echo \"Error: no test specified\" && exit 1"
},

Angular NPM Run Prod: Error npm ERR! missing script: prod

I am running npm with a new Angular Project and receiving error below. How can fix this?
npm ERR! missing script: prod
npm ERR! A complete log of this run can be found in:
npm ERR! C:\..2020-11-19T05_27_19_941Z-debug.log
This means you don't have a configuration for prod in your scripts. Basically to run any angular project you need to make sure the scripts or commands are defined inside your package.json. Most angular projects will have a script configuration like below
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
So, you can run either ng serve or npm start in your command to start the application.
This is because you don't have the script : prod in your package.json file. If you want to run the angular project, you can use ng serve or npm run start

How can I tell Vue-cli where my app's entrypoint is?

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

How to use nodemon in npm scripts to build and start scripts?

"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"
}

How do I add a custom script to my package.json file that runs a javascript file?

I want to be able to execute the command script1 in a project directory that will run node script1.js.
script1.js is a file in the same directory. The command needs to be specific to the project directory, meaning that if I send someone else the project folder, they will be able to run the same command.
So far I've tried adding:
"scripts": {
"script1": "node script1.js"
}
to my package.json file but when I try running script1 I get the following output:
zsh: command not found: script1
Does anyone know the steps necessary to add the script mentioned above to the project folder?
*Note: the command can not be added to the bash profile (cannot be a machine specific command)
Please let me know if you need any clarification.
Custom Scripts
npm run-script <custom_script_name>
or
npm run <custom_script_name>
In your example, you would want to run npm run-script script1 or npm run script1.
See https://docs.npmjs.com/cli/run-script
Lifecycle Scripts
Node also allows you to run custom scripts for certain lifecycle events, like after npm install is run. These can be found here.
For example:
"scripts": {
"postinstall": "electron-rebuild",
},
This would run electron-rebuild after a npm install command.
I have created the following, and it's working on my system. Please try this:
package.json:
{
"name": "test app",
"version": "1.0.0",
"scripts": {
"start": "node script1.js"
}
}
script1.js:
console.log('testing')
From your command line run the following command:
npm start
Additional use case
My package.json file has generally the following scripts, which enable me to watch my files for typescript, sass compilations and running a server as well.
"scripts": {
"start": "concurrently \"sass --watch ./style/sass:./style/css\" \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
}
Steps are below:
In package.json add:
"bin":{
"script1": "bin/script1.js"
}
Create a bin folder in the project directory and add file runScript1.js with the code:
#! /usr/bin/env node
var shell = require("shelljs");
shell.exec("node step1script.js");
Run npm install shelljs in terminal
Run npm link in terminal
From terminal you can now run script1 which will run node script1.js
Reference: http://blog.npmjs.org/post/118810260230/building-a-simple-command-line-tool-with-npm
Lets say in scripts you want to run 2 commands with a single command:
"scripts":{
"start":"any command",
"singleCommandToRunTwoCommand":"some command here && npm start"
}
Now go to your terminal and run there npm run singleCommandToRunTwoCommand.
Suppose I have this line of scripts in my "package.json"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"export_advertisements": "node export.js advertisements",
"export_homedata": "node export.js homedata",
"export_customdata": "node export.js customdata",
"export_rooms": "node export.js rooms"
},
Now to run the script "export_advertisements", I will simply go to the terminal and type
npm run export_advertisements
Example:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"build_c": "ng build --prod && del \"../../server/front-end/*.*\" /s /q & xcopy /s dist \"../../server/front-end\"",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
As you can see, the script "build_c" is building the angular application, then deletes all old files from a directory, then finally copies the result build files.

Categories

Resources