This answer states that npm run build creates a dist folder (it does in my case) as well as an index.html file - it doesn't in my case.
Instead I have an index.html file inside my dist folder, and I upload this folder to my remote server, visiting that index.html in my browser displays a blank page with "Hello world" on top (no CSS, no JS).
I couldn't find anything addressing this issue in the docs.
Am I missing something? Why is my app reduced to a mere "Hello world" page once deployed?
If you are using vue-cli, to create dist folder you need to run npm run build.
Also , open your package.json and check your scripts objects. It will have various commands to run and you can chose the correct script to run.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
For vue cli3, mostly you need to run npm run build.
Related
In my Vue JS application I have a file called .env.individual which defines a variable use for making API calls to the backend.
I also have .env and .env.production, etc, all with different values for the API URL variable.
When I run npm run serve -- --mode individual the application starts up and uses the URL found in the .env.individual file. Likewise, when I run npm run serve -- --mode production the application starts up and uses the variable found in the .env.production file.
Given the above I was assuming that when I run npm run build -- --mode individual the \dist would be generated and I could then run npm run serve and the application would use the variables found in the .env.individual file.
Given my package.json file contains this:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "vue-cli-service s3-deploy",
"release": "npm run build && npm run deploy"
},
What is npm run serve actually doing and why - when I want to use a specific .env.XXX file do I need to specify it exactly?
npm run serve does not run your application from /dist folder. It compiles unoptimized build in memory (RAM). If you want run your optimized build from /dist folder, you can run it by some http server. For example https://www.npmjs.com/package/http-server .
I'm working on a project that requires using the npm pack command. Is running build on the library/package required before creating the installable tar file? Or can I just pack and then install it into the app?
Yes, but for totally different reasons.
npm run build can do anything: it just executes the value for build inside the scripts object in your package.json, for example on an Angular project it'll look like this,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
npm pack basically "create a tarball from a package", but here is the deal: the "package" that it creates a tarball from has to exist. So, in order to create the "package" that npm pack targets in ./dist
you frequently have to run npm build. This is because many JavaScript projects are written in TypeScript (in which case "build" usually runs npx tsc) or use a build system that will transpile their code to produce JavaScript (like babel). If your project is very rudimentary, there is a good chance you won't have to "build anything": you can see this if you create an empty directory and run npm init, but seldom are useful packages created this way.
The result of npm pack is a .tgz file. This is basically a compressed copy of a target directory. You can install this with npm i ./file.tgz. On the consuming machine that you wish to install the package on, you do not have to build anything. Building is what you do as a developer and a package maintainer. For example, you build TypeScript producing JavaScript. The consumer just downloads the result and installs the dependencies. It doesn't even have to know that you write your code with TypeScript (or better, Rust.)
I am trying to deploy a new app to Heroku using the build process on Heroku (it picks up the code changes from github and builds automatically). The client folders and package.json are in the root folder and the express files (including a separate package.json) are under /server.
{"error":"ENOENT: no such file or directory, stat '/app/build/index.html'"}
While troubleshooting this issue I launched bash and did a "dir" inside of the app directory. Sure enough, no "build" folder in root. I had overhauled a few things to separate the server's build from the main build - could I have screwed something up? Am I wrong in my understanding of what happens on Heroku?
Here is the package.json in root:
"scripts": {
"start": "node server/index.js",
"build": "react-scripts build",
"dev": "SET NODE_ENV=development&& node server/index.js",
"test": "SET NODE_ENV=test&& nodemon --exec mocha --recursive",
"heroku-postbuild": "cd server && npm install && npm run build"
EDIT
Not sure if something else is going on here. I went into root on the server and issued "npm run-script build" and the build folder is now there and I can see index.html there. However, same error persists.
Closing this as I had a more fundamental issue
I have a dockerized vue-cli app which is being run on NGINX environment.
Any time the image container starts we are seeing the CPU usage climb to nearly 100% then drop then climb then drop again.
Apparently the offending item is "/app/node_modules/.bin/vue-cli-service"
This is preventing the site from being reached and we are getting a 502 error.
Any idea what might be causing the problem.
I am happy to provide any other necessary information.
Here is my dockerfile
FROM node:lts-alpine
RUN mkdir -p /app
COPY . /app
WORKDIR /app
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
package.json
"scripts": {
"dev": "cross-env NODE_ENV=development vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "cross-env NODE_ENV=production vue-cli-service serve --port 3000"
},
In vue.config.js
,
devServer: {
disableHostCheck: true
}
With the limited information you provided, it looks like you're running a development environment in production. What you should do instead is build a production bundle, which consists of static assets - .html, .js, .css files, images etc., and serve that using a web server like nginx. For more details you can read https://cli.vuejs.org/guide/deployment.html .
Let us assume we have a Vue.js project build with Vue-cli3 , package.json:
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
...
}
Also, we have a plan to push our project to a public repository on GitHub, so we need different environment variables for public repo and for the local development.
Vue-cli 3 gives us modes: https://cli.vuejs.org/guide/mode-and-env.html#modes
I have such a files:
.env
.env.development
.env.production
.env.local
.env.development.local
.env.production.local
Content of .env:
NODE_ENV=production
VUE_APP_PATH=http://website.com/
VUE_APP_API_ROUTE=api/v1/
Content of .env.development:
NODE_ENV=development
VUE_APP_PATH=http://dev-website.com/
Content of .env.development.local:
NODE_ENV=development
VUE_APP_PATH=http://localhost:8080/
When I do npm run serve I expect process.env.VUE_APP_PATH will be equals http://localhost:8080/ but unfortunately it stills = http://dev-website.com/.
So, the problem is variables from local env files (i.e. .env.development.local) are not overwrite existed from another env file (i.e. .env.development).
How can I use this vue-cli approach to overwrite neccessary variables? The documentation tells about priority: An env file for a specific mode (e.g. .env.production) will take higher priority than a generic one (e.g. .env). but with .local files it doesn`t work.
You can pass in the --mode option within the npm script. So, in your instance you might want the serve script to look like:
vue-cli-service serve --mode development.local
If you wanted to test out serving your non-local development configuration you could copy the serve script and rename it serve:local and then edit the original serve script to look like this:
vue-cli-service serve --mode development
Which is really the actual default mode for serve out-of-the-box with CLI 3. We've just explicitly set the mode.