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

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

Related

vue-cli - cannot build for development mode

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',
}

How to put a mandatory check if all environment variables are set in vue js application

How can we make sure before building a vue js application that all environment variables values are set that are mentioned in .env.example ?
A simple solution would be to write a shell script which imports the .env and checks the environment variables.
You can edit package.json and add that script (let's call it check-env.sh to the scripts section:
{
"scripts": {
"serve": "./check-env.sh && vue-cli-service serve",
"build": "./check-env.sh && vue-cli-service build",
"dev": "./check-env.sh && vue-cli-service build --mode development",
"watch-dev": "./check-env.sh && vue-cli-service build --watch --mode development",
"watch": "./check-env.sh && vue-cli-service build --watch --mode production",
"lint": "./check-env.sh && vue-cli-service lint"
},
}
That could be made more elegant with a Webpack plugin, for example, but gives you the option to turn it on and off for the above scripts.
You can add a configureWebpack method to your vue.config.js and make the script a proper module instead, to make it mandatory for each build.
This way you could import it in your vue.config.js and add a call to configureWebpack() which throws an exception if the env variables are not as expected.
// vue.config.js
// Import your script along the other imports in this file...
module.exports = {
configureWebpack: config => {
// Call the check here and throw an exception. This should work.
if (process.env.NODE_ENV === 'production') {
// mutate config for production...
} else {
// mutate for development...
}
}
}

Webpack Encore - Vuejs Testing Mocha

I'm going to write unit tests in my Symfony project that uses Vuejs for the front-end. I want to use Mocha framework as test runner for my components' tests. So I have configured and installed all things, following this guide: testing vuejs apps
But there's a problem, in my project I'm using Encore, and now I have some troubles to run tests.
I created the setup.js file in this directory of my root's project:
- assets
- js
- components
- test
- setup.js
So I have added in my package.json this config:
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production",
"compile-translations": "php bin/console bazinga:js-translation:dump public --format=js --merge-domains",
"compile-routes": "php bin/console fos:js-routing:dump --target=public/js/fos_js_routes.js",
"assets-install": "php bin/console assets:install --symlink --relative public",
"test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config webpack.config.js --require assets/js/test/setup.js assets/js/test/**/*.spec.js"
},
"nyc": {
"include": [
"assets/js/**/*.(js|vue)"
],
"instrument": false,
"sourceMap": false
},
Now I have a problem, I should add this config in my webpack.config.js file
if (process.env.NODE_ENV === 'test'){
module.exports.externals = [require('webpack-node-externals')()]
module.exports.devtool = 'inline-cheap-module-source-map'
}
But I'm using Encore, so how can I do it?
I resolve the problem using Karma. For anyone that have the same problem, you should following this guide: https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-karma.html
and then in your karma.conf.js file add these lines at the top:
const Encore = require('#symfony/webpack-encore');
// Initialize Encore before requiring the .config file
Encore.configureRuntimeEnvironment('dev-server');
// Retrieve webpack config
const webpackConfig = require('./webpack.config.js');

How to change port number in vue-cli project

How to change Port number in Vue-cli project so that it run's on another port instead of 8080.
If you're using vue-cli 3.x, you can simply pass the port to the npm command like so:
npm run serve -- --port 3000
Then visit http://localhost:3000/
Late to the party, but I think it's helpful to consolidate all these answers into one outlining all options.
Separated in Vue CLI v2 (webpack template) and Vue CLI v3, ordered by precedence (high to low).
Vue CLI v3
package.json: Add port option to serve script: scripts.serve=vue-cli-service serve --port 4000
CLI Option --port to npm run serve, e.g. npm run serve -- --port 3000. Note the --, this makes passes the port option to the npm script instead of to npm itself. Since at least v3.4.1, it should be e.g. vue-cli-service serve --port 3000.
Environment Variable $PORT, e.g. PORT=3000 npm run serve
.env Files, more specific envs override less specific ones, e.g. PORT=3242
vue.config.js, devServer.port, e.g. devServer: { port: 9999 }
References:
https://cli.vuejs.org/config/#devserver
https://cli.vuejs.org/config/#vue-config-js
https://cli.vuejs.org/guide/mode-and-env.html
Vue CLI v2 (deprecated)
Environment Variable $PORT, e.g. PORT=3000 npm run dev
/config/index.js: dev.port
References:
http://vuejs-templates.github.io/webpack/
https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35
As the time of this answer's writing (May 5th 2018), vue-cli has its configuration hosted at <your_project_root>/vue.config.js. To change the port, see below:
// vue.config.js
module.exports = {
// ...
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080, // CHANGE YOUR PORT HERE!
https: false,
hotOnly: false,
},
// ...
}
Full vue.config.js reference can be found here: https://cli.vuejs.org/config/#global-cli-config
Note that as stated in the docs, “All options for webpack-dev-server” (https://webpack.js.org/configuration/dev-server/) is available within the devServer section.
The port for the Vue-cli webpack template is found in your app root's myApp/config/index.js.
All you have to do is modify the port value inside the dev block:
dev: {
proxyTable: {},
env: require('./dev.env'),
port: 4545,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
cssSourceMap: false
}
Now you can access your app with localhost:4545
also if you have .env file better to set it from there
Another option if you're using vue cli 3 is to use a config file. Make a vue.config.js at the same level as your package.json and put a config like so:
module.exports = {
devServer: {
port: 3000
}
}
Configuring it with the script:
npm run serve --port 3000
works great but if you have more config options I like doing it in a config file. You can find more info in the docs.
Best way is to update the serve script command in your package.json file. Just append --port 3000 like so:
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"inspect": "vue-cli-service inspect",
"lint": "vue-cli-service lint"
},
First Option:
OPEN package.json and add "--port port-no" in "serve" section.
Just like below, I have done it.
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 8090",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
Second Option: If You want through command prompt
npm run serve --port 8090
If you want to change the localhost port, you can change scripts tag in package.json:
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
In the webpack.config.js:
module.exports = {
......
devServer: {
historyApiFallback: true,
port: 8081, // you can change the port there
noInfo: true,
overlay: true
},
......
}
You can change the port in the module.exports -> devServer -> port.
Then you restrat the npm run dev. You can get that.
Oh my God! It is not that much complicated, with these answers which also works. However, other answers tho this question also works well.
If you really want to use the vue-cli-service and if you want to have the port setting in your package.json file, which your 'vue create <app-name>' command basically creates, you can use the following configuration: --port 3000. So the whole configuration of your script would be like this:
...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...
I am using #vue/cli 4.3.1 (vue --version) on a macOS device.
I have also added the vue-cli-service reference:
https://cli.vuejs.org/guide/cli-service.html
An alternative approach with vue-cli version 3 is to add a .env file in the root project directory (along side package.json) with the contents:
PORT=3000
Running npm run serve will now indicate the app is running on port 3000.
There are a lot of answers here varying by version, so I thought I'd confirm and expound upon Julien Le Coupanec's answer above from October 2018 when using the Vue CLI. In the most recent version of Vue.js as of this post - vue#2.6.10 - the outlined steps below made the most sense to me after looking through some of the myriad answers in this post. The Vue.js documentation references pieces of this puzzle, but isn't quite as explicit.
Open the package.json file in the root directory of the Vue.js project.
Search for "port" in the package.json file.
Upon finding the following reference to "port", edit the serve script element to reflect the desired port, using the same syntax as shown below:
"scripts": {
"serve": "vue-cli-service serve --port 8000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
Make sure to re-start the npm server to avoid unnecessary insanity.
The documentation shows that one can effectively get the same result by adding --port 8080 to the end of the npm run serve command like so: npm run serve --port 8080. I preferred editing the package.json directly to avoid extra typing, but editing npm run serve --port 1234 inline may come in handy for some.
To change the port (NPM), go to package.json. In scripts write your own script, for example:
"start": "npm run serve --port [PORT YOU WANT]"
After that you can start with npm start
open package.json
add script named serve, "serve": "Vue-cli-service serve --port 8081"
npm run serve
you will server run 8081
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 8081",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
}
If you use yarn:
yarn serve --port 3000
Add the PORT envvariable to your serve script in package.json:
"serve": "PORT=4767 vue-cli-service serve",
If you want to change the port number temporarily, you can add a –port option to npm run serve command.
npm run serve -- --port 6058
In my vue project in visual studio code, I had to set this in /config/index.js.
Change it in the:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
host: 'localhost', // can be overwritten by process.env.HOST
port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false
}
}
You should be good with this:
"serve": "vue-cli-service serve --port 8081",
If you are running this via Visual Studio Community or Professional (maybe with a .Net Core project) you will find that no matter what steps you do, when you launch the solution that it uses 8080.
Well there is launch.json file you need to edit hidden in the .vscode directory.
MS don't tell you about this at all and a file search does not seem to find it.
Go to node_modules/#vue/cli-service/lib/options.js
At the bottom inside the "devServer" unblock the codes
Now give your desired port number in the "port" :)
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 3000, // default port 8080
https: false,
hotOnly: false,
proxy: null, // string | Object
before: app => {}
}

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

Categories

Resources