I have a vue.js app, and it is using two files named dev.env.js and prod.env.js to read environment variables and configure the app.
the dev.env.js is currently configured with data that our frontend developers are using.
I need to make some adjustments on my own and need another env file.
I have created a file named ninja.env.js next to the other files in config/ which contains:
'use strict'
module.exports = {
NODE_ENV: '"development"',
SERVER_PATH: '"localhost:8560"',
SOCKET_PATH: '"localhost:8561/map"'
}
but there is no way to run this.
I have tried:
$ npm run ninja
>>> npm ERR! missing script: ninja
$ npm run dev --mode ninja
>>> Failed to compile with 1 errors 11:12:02 AM
This dependency was not found:
* ninja in multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ninja
To install it, you can run: npm install --save ninja
so, is there a way to add multiple environment files?
Yes, as mentioned in docs, basically you can add different modes like this:
.env.[MODE_NAME]
And they you can run it like:
vue-cli-service build --mode [MODE_NAME]
Related
For example, I installed tailwind CSS via npm by npm init && npm install tailwindcss. After that, I make a script in package.json like "build-css": "tailwindcss build src/styles.css -o public/styles.css"(I just copy-paste it from stuckoverflow). Now focus on -o, how a developer knows there is a -o option available for tailwind. I checked node-module/tailwindcss/script/build.js but there is no such thing that I currently understand( I mean, I found 0 clue). Pls give light on it. Do we have some standardization or unwritten rule that creator of npm package follow?
The scripts field in your package.json defines commands that are run with npm run in the context of npm. This allows you to use the command-line interface that are provided by different npm packages, without installing them globally. Many of these CLIs also expose a --help flag, or a help command.
To run the CLI from a npm package not installed globally, you may need to use npx. In your case, you can run:
npx tailwindcss
which tells you that there is a help command that gives you more information.
$ npx tailwindcss
tailwindcss 2.1.2
Usage:
tailwind <command> [options]
Commands:
help [command] More information about the command.
init [file] Creates Tailwind config file. Default: tailwind.config.js
build <file> [options] Compiles Tailwind CSS file.
If you are comfortable reading the source code in your node_modules folder, you can also find more information about these commands and the code that runs. To find where the CLI is defined, you can check node_modules/tailwindcss/package.json, which defines a bin key. In this case, it shows that the tailwindcss command comes from lib/cli.js. While the code is transformed, you can poke around and find lib/cli/commands/build.js, which contains the options for the build command.
const options = [{
usage: '-o, --output <file>',
description: 'Output file.'
}, {
usage: '-c, --config <file>',
description: 'Tailwind config file.'
}, {
usage: '--no-autoprefixer',
description: "Don't add vendor prefixes using autoprefixer."
}];
If the package is open source, you may be able to find the original, untransformed source online. In Tailwind's case, they have a Github repo where you can view the raw source for the build command.
I have a recipe that installed some NPM packages that worked on an older version of Yocto.
After upgrading to sumo, the recipe fails with the following error:
installnpmpackages/0.0.1-r0/temp/run.do_compile.7272: npm: not found
| WARNING: exit code 127 from a shell command.
I tried using the developer shell and NPM does work in that case.
The do_compile from the recipe:
do_compile() {
# Create a working directory
mkdir -p ${WORKDIR}/scratch
# changing the home directory to the working directory, the .npmrc will be created in this directory
export HOME=${WORKDIR}/scratch
# configure cache to be in working directory
npm set cache ${WORKDIR}/scratch/npm_cache
# clear local cache prior to each compile
npm cache clear
# compile and install node modules in source directory
cd ${WORKDIR}/scratch
npm --arch=${TARGET_ARCH} --verbose install node-gyp
npm --arch=${TARGET_ARCH} --verbose install connect
npm --arch=${TARGET_ARCH} --verbose install socket.io
#npm --arch=${TARGET_ARCH} --verbose install sqlite3
#npm --arch=${TARGET_ARCH} --verbose install serialport
npm --arch=${TARGET_ARCH} --verbose install express
npm --arch=${TARGET_ARCH} --verbose install csv
npm --arch=${TARGET_ARCH} --verbose install md5
# clear local cache before we package. No need to copy over all this cache stuff; just need the modules.
npm cache clear
}
Note sqlite3 and serialport are commented out as they did not work on the previous version.
What needs to be changed with sumo (vs morty) for NPM to function in a recipe?
Thank you in advance!
I found a simple solution.
I created individual recipes using devtool add.
Here is the command used to create a recipe for the serialport npm module:
devtool add "npm://registry.npmjs.org;name=serialport;version=7.1.4"
I'm answering to #Hsn comment as my account is new and I don't have 50 reputation.
If you are able to add a recipe with devtool and it worked, you can use devtool as well to finish working on the recipe and tell devtool in which meta you want to put the recipe like :
devtool finish recipe_name meta-destination
And in order to put it into your final OS rootfs, you need to add it to your image bb file, for example : image-dev.bb :
IMAGE_INSTALL_append += "recipe_name"
Make sure also that the meta which holds your recipe is present in your bblayers.conf.
I've used Vue for some time now, but I'm just getting started with the CLI and I got a bit confused.
I installed #vue/cli and if I type vue in the command line, I get:
Usage: vue <command> [options]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires #vue/cli-init)
config [options] [value] inspect and modify the config
upgrade [semverLevel] upgrade vue cli service / plugins (default semverLevel: minor)
info print debugging information about your environment
Run vue <command> --help for detailed usage of given command.
I created a project with vue and I needed to install #vue/cli-service-global for some reason that I can't remember.
After that, however, I noticed:
'vue-cli-service' is not recognized as an internal or external command
And that's because I had to install #vue/cli-service. Now, when I type vue-cli-service in the command line, I get:
Usage: vue-cli-service <command> [options]
Commands:
serve start development server
build build for production
inspect inspect internal webpack config
run vue-cli-service help [command] for usage of a specific command.
Apparently, I can build, serve, and inspect with both CLI tools. My question is - what's the difference between them? Both the readme of #vue/cli and #vue/cli-service have nothing but a link to this page where no answer is given to that question.
What can I do with one that I can't do with the other? Do I need both?
#vue/cli-service-global is a package that allows you to run vue serve and vue build without any local dependencies.
#vue/cli-service is a package that actually doing those vue serve and vue build, both #vue/cli-service-global and #vue/cli depend on it.
If you're using #vue/cli then you don't need to install another two independently, since it already has #vue/cli-service in its dependencies.
Added: Just to be sure, I'll explain it more:
#vue/cli:
add, create, config, ui and other commands
build and serve commands through #vue/cli-service-global package
inspect command through #vue/cli-service package (local dependency)
#vue/cli-service-global:
build, inspect and serve commands through #vue/cli-service package
#vue/cli-service:
build, inspect and serve commands
So, you need to install #vue/cli only and remove other two.
Added: Clarification about using vue-cli-service:
When you create a project using vue create command, #vue/cli makes a link to vue-cli-service binary inside ./node_modules/.bin of created project.
Then you can use it like this:
Access it directly as vue-cli-service inside npm scripts (package.json):
"scripts": {
"watch": "vue-cli-service build --watch"
}
Access it from the shell: ./node_modules/.bin/vue-cli-service build --watch.
You can even add ./node_modules/.bin to you shell PATH and access it from the shell directly as vue-cli-service.
What should I do after developing a Vue app with vue-cli?
In Angular there was some command that bundle all the scripts into one single script.
Is there something the same in Vue?
I think you've created your project like this:
vue init webpack myproject
Well, now you can run
npm run build
Copy index.html and /dist/ folder into your website root directory. Done.
If you've created your project using:
vue init webpack myproject
You'd need to set your NODE_ENV to production and run, because the project has web pack configured for both development and production:
NODE_ENV=production npm run build
Copy dist/ directory into your website root directory.
If you're deploying with Docker, you'd need an express server, serving the dist/ directory.
Dockerfile
FROM node:carbon
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install
ENV NODE_ENV=production
RUN npm run build
# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build
# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]
in your terminal
npm run build
and you host the dist folder. for more see this video
To deploy your application to prod environment add
"build": "vue-cli-service build --mode prod"
in your scripts in package.json file.
Open your main.js and add
Vue.config.productionTip = false;
right after your imports.
Then open your cli in the project folder and run this command
npm run build
This will make a dist folder in your project directory you may upload that dist folder in your host and your website will be live
If you run into problems with your path, maybe you need to change the assetPublicPath in your config/index.js file to your sub-directory:
http://vuejs-templates.github.io/webpack/backend.html
The vue documentation provides a lot of information on this on how you can deploy to different host providers.
npm run build
You can find this from the package json file. scripts section. It provides scripts for testing and development and building for production.
You can use services such as netlify which will bundle your project by linking up your github repo of the project from their site. It also provides information on how to deploy on other sites such as heroku.
You can find more details on this here
The commands for what specific codes to run are listed inside your package.json file under scripts. Here is an example of mine:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
If you are looking to run your site locally, you can test it with
npm serve
If you are looking to prep your site for production, you would use
npm build
This command will generate a dist folder that has a compressed version of your site.
THIS IS FOR DEPLOYING TO A CUSTOM FOLDER (if you wanted your app not in root, e.g.
URL/myApp/) - I looked for a longtime to find this answer...hope it helps someone.
Get the VUE CLI at https://cli.vuejs.org/guide/ and use the UI build to make it easy. Then in configuration you can change the public path to /whatever/ and link to it URL/whatever.
Check out this video which explains how to create a vue app using CLI if u need more help: https://www.youtube.com/watch?v=Wy9q22isx3U
For NPM => npm run Build
For Yarn => yarn run build
You also can check scripts in package.json file
You write down the below command being at the project root.
npm run build
First Install Vue Cli Globally
npm install -g #vue/cli
To create a new project, run:
vue create project-name
run vue
npm run serve
Vue CLI >= 3 uses the same vue binary, so it overwrites Vue CLI 2 (vue-cli). If you still need the legacy vue init functionality, you can install a global bridge:
Vue Init Globally
npm install -g #vue/cli-init
vue init now works exactly the same as vue-cli#2.x
Vue Create App
vue init webpack my-project
Run developer server
npm run dev
This command is for start the development server :
npm run dev
Where this command is for the production build :
npm run build
Make sure to look and go inside the generated folder called 'dist'.
Then start push all those files to your server.
One way to do this without using VUE-CLI is to bundle the all script files into one fat js file and then reference that big fat javascript file into main template file.
I prefer to use webpack as a bundler and create a webpack.conig.js in the root directory of project. All the configs such as entry point, output file, loaders, etc.. are all stored in that config file. After that, I add a script in package.json file that uses webpack.config.js file for webpack configs and start watching files and create a Js bundled file into mentioned location in webpack.config.js file.
I think you can use vue-cli
If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is making sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.
If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct baseUrl
npm run build - this will uglify and minify the codes
save index.html and dist folder in root directory of your website.
free hosting service that you might be interested in -- Firebase hosting.
if you used vue-cli and webpack when you created your project.
you can use just
npm run build command in command line, and it will create dist folder in your project. Just upload content of this folder to your ftp and done.
If you are using npm u can use npm run build but if you are using yarn you can simply run yarn build
If you want to create a build for a domain, you can use the $ npm run build command.
If you're going to build for a sub-domain, follow these instructions:
Create a file that's name is vue.config.js in the root
Write down the below code in the vue.config.js file:
module.export = {
publicPath: '/demo-project',
}
Now run $ npm run build
Note: Use your subdomain name instead of "/demo-project".
If you want to build and send to your remote server you can use cli-service (https://cli.vuejs.org/guide/cli-service.html) you can create tasks to serve, build and one to deploy with some specific plugins as vue-cli-plugin-s3-deploy
Hi I'm trying to install Grunt on Windows 7 64 bit. I have installed Grunt using commands
npm install -g grunt
npm install -g grunt-cli
but now if I try to do grunt init, it is throwing me an error -
A valid Gruntfile could not be found. Please see the getting started
guide for more information on how to configure grunt:
http://gruntjs.com/getting-started Fatal error: Unable to find
Gruntfile.
But when I look inside the grunt folder on my system the Gruntfile.js is there. can someone please guide me how to install this grunt properly and how to write built Script using the grunt. I have one HTML page and java script if i wants built a script using Grunt how can i do it?
To setup GruntJS build here is the steps:
Make sure you have setup your package.json or setup new one:
npm init
Install Grunt CLI as global:
npm install -g grunt-cli
Install Grunt in your local project:
npm install grunt --save-dev
Install any Grunt Module you may need in your build process. Just for sake of this sample I will add Concat module for combining files together:
npm install grunt-contrib-concat --save-dev
Now you need to setup your Gruntfile.js which will describe your build process. For this sample I just combine two JS files file1.js and file2.js in the js folder and generate app.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
concat: {
"options": { "separator": ";" },
"build": {
"src": ["js/file1.js", "js/file2.js"],
"dest": "js/app.js"
}
}
});
// Load required modules
grunt.loadNpmTasks('grunt-contrib-concat');
// Task definitions
grunt.registerTask('default', ['concat']);
};
Now you'll be ready to run your build process by following command:
grunt
I hope this give you an idea how to work with GruntJS build.
NOTE:
You can use grunt-init for creating Gruntfile.js if you want wizard-based creation instead of raw coding for step 5.
To do so, please follow these steps:
npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile
For Windows users: If you are using cmd.exe you need to change ~/.grunt-init/gruntfile to %USERPROFILE%\.grunt-init\. PowerShell will recognize the ~ correctly.
Some time we need to set PATH variable for WINDOWS
%USERPROFILE%\AppData\Roaming\npm
After that test with where grunt
Note: Do not forget to close the command prompt window and reopen it.
I got the same issue, but i solved it with changing my Grunt.js to Gruntfile.js
Check your file name before typing grunt.cmd on windows cmd (if you're using windows).
You should be installing grunt-cli to the devDependencies of the project and then running it via a script in your package.json. This way other developers that work on the project will all be using the same version of grunt and don't also have to install globally as part of the setup.
Install grunt-cli with npm i -D grunt-cli instead of installing it globally with -g.
//package.json
...
"scripts": {
"build": "grunt"
}
Then use npm run build to fire off grunt.