The JS package I've prepared (using tsdx) is being used across multiple company systems. It lies within our gitlab so the package.json entry looks like this:
"some-package": "git+ssh://git#gitlab.company.com:some-place/some-package.git#some-branch"
Now, every time a user does npm install it takes a large amount of time until the process completes. Is it because of me pushing a src/ folder instead of dist/ (which I do)? Does the package builds itself every time it gets downloaded by npm install? Should I push dist/ folder to shorten the time needed to complete npm install?
Npm install are downloading all your dependencies and placing them I the node_modules folder.
The dist folder is typically for your builded application, so committing and pushing the dist folder wouldn't help on the process time..
Let's imagine I have to develop an npm package, my-package, which needs to be imported and used by my-project.
While developing my-package I need to install and use other packages from npm. At the end of the development of my-package, I bundle all the relevant files in the dist directory. Since I do not want to have all the files in the node_modules folder as part of the package published, I specify in .gitignore (or .npmignore) to exclude node_modules folder. So the final structure of the folder of my-package looks something like
my-package
dist
... // all the code of the package to be distributed
node_modules
... // all the node modules
src
... // all source files
package.json
.gitignore
Now I publish my-package on npm repository and then import it in my-project, with the command npm i my-package.
As a result of such import, the structure of the directory hosting my-project is something like
my-project
... // stuff
node_modules
my-package
dist
... // all the code of the package to be distributed
src
... // all source files
package.json
As expected, no node_modules folder is imported under my-package folder.
Since I am the developer of both my-package and my-project, during development I would like to import my-package from the local path with a command which could look like
npm -i ../my-package
If I proceed like this, the result I see is that all the files and folders stored under my-package directory are copied under the node_modules folder of my-project, i.e. .gitignore (or .npmignore) exclusions are not considered. The net result is a structure such as
my-project
... // stuff
node_modules
my-package
dist
... // all the code of the package to be distributed
node_modules
... // all stuff imported by my-package
src
... // all source files
package.json
... // any other file under my-package
Is there a way to install from local path only the relevant files of my-package as it happens if the package is installed from the npm repository?
We had the same problem today. We figure it out by adding to the package.json of the local package
“build”: “yarn run clean && yarn build-components && yarn pack”
And then to the project that is using the local package we added to the dependencies of the package.json
“yourpackage”: “file:../your-tgz.tgz”,
hope it helps
Note: if you are using yarn you might have problems with the cache.
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
I am using Yarn v0.19.1 to install some dependencies. I deleted my node_modules folder completely and did a fresh yarn install.
I am trying to install the dependency leaflet using yarn add leaflet. The module installs successfully, except during the Cleaning Modules... phase, Yarn removes the images folder which would typically live within leaflet/dist/images. When I do a npm install leaflet this folder does not get removed.
During a yarn install, the images folder is present until the Cleaning modules phase happens.
Who/what is doing this? Is this something yarn does? Or is this something specified within the leaflet library? How could I resolve this?
I checked the package.json in the leaflet library and nothing seemed out of the ordinary there. It runs a jake file, but even within that file nothing is being deleted related to images.
Here is what the folder looks like, within my node_modules folder, for both package manager installs:
yarn
npm
There was a .yarnclean file in my project. This added some files/folders to ignore when installing dependencies. Running yarn clean added this file and I wasn't aware until I saw this issue. Viewing the docs also gave the same info.
I resolved this by removing images from the set of ignored directories.
Here is my .yarnclean file for an example:
# test directories
__tests__
test
tests
powered-test
# asset directories
docs
doc
website
assets
# examples
example
examples
# code coverage directories
coverage
.nyc_output
# build scripts
Makefile
Gulpfile.js
Gruntfile.js
# configs
.tern-project
.gitattributes
.editorconfig
.*ignore
.eslintrc
.jshintrc
.flowconfig
.documentup.json
.yarn-metadata.json
# misc
*.gz
*.md
I know that package.json has a dependencies section and a devDependencies section. I know package.json also has a postinstall hook. So I've currently got things setup like so:
dependencies: everything the server needs to run
devDependencies: everything I need to build the application (grunt and whatnot)
postinstall: runs "grunt build"
The grunt build take all my source jade, stylus, and javascript files and compiles/minifies them into my html, css, and app.min.js files. All these go into a ./deploy folder.
The grunt build process also copies in the server files (server.js and ./server/**/*) into the ./deploy folder. The issue is how do I go about copying in only the correct dependencies from the ./node_modules/ folder into ./deploy/node_modules and not all the devDependencies modules that aren't needed.
Is there something I can pass to npm install or put in package.json to tell it where to put the dependencies?
In the end I want to be able to zip up the ./deploy/ folder and send it off to a hosting site to run the app.