I used
window.location.reload();
in my angular 5 project. when I run "ng serve" it works fine. But when build it using "ng build" and deploy in xampp server page not loading. How can I solve it?
Related
when doing a "npm run build" my application has stopped working and only loads the main page. Does anyone know what is the reason for this? Thanks.
github repository with files
With this package-lock.json, we can do "npm install" and "npm run build" and works fine, but when we do a "git pull" on server, we can't do build and that's what appears
then we delete package-lock.json and do "npm install" and "npm run build". Now a new package-lock.json has been generated, we do another time "npm install" and "npm run build" and that's what appears but the project is not loading content correctly, we only see the main page but also is not working correctly.
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 want to integrate Eslint in my Nextjs application and prefer to run Eslint simultaneously with the development server. I have two scripts, namely server and lint and want to run them at the same time. I tried to implement it via dev script, but the development server seems not to be reloading on file changes in this implementation. Is there any way to run the two simultaneously?
"scripts": {
"dev": "npm run server && npm run lint",
"server": "next -p 7777"
"lint": "esw --fix components/**/*.js lib/**/*.js pages/**/*js"
}
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.
My express server is set to run on port 8081. I start it up with nodemon server/start.js
My Vue app runs on port 8080. I run nodemon build/dev-server.js to start it.
The problem I have is if express server is running on 8081, I can't run Vue app. It just ends with this error:
Starting dev server...
[1] Killed
[nodemon] app crashed - waiting for file changes before starting...
I can start Vue if express is not running though.
I'm using NGINX btw.
It seems like there is a problem when you use nodemon to watch more than one file. You can follow this Gist. You can try to run one file with node.
As Tolsee mentioned, you can run both with a single command, just don't use nodemon for both files. Here is an example that is working for me with a Vue 2 app and an Express server:
"scripts": {
"dev": "node build/dev-server.js --hot | nodemon server.js", // this line
"start": "node build/dev-server.js",
"build": "node build/build.js"
}
Hopefully that helps anyone that has run into this problem :)
I also faced the same issue once So, instead of using nodemon I suggest you to use pm2. Checkout this blog on using pm2 to run the Backend server and the frontend dev server simultaneously Simultaneously Running Express and Webpack Dev Server by Henrik Fogelberg