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
Related
I'm trying to run a server to see my project on browser, the only way i can do it is running npx mix watch --hot, so after that my project start running at localhost:8080.
But the above command enable hot reload, i would like to know if there is some specific command to just run the server, without enabling hot reloading.
I tried npm mix watch but it not starts the server, just watch the files.
Tried calling manually webpack server with:
./node_modules/.bin/webpack serve --config="./node_modules/laravel-mix/setup/webpack.config.js"
This works (the server starts at localhost:8080 as well) but somehow it activates hot reloading too, idk why.
So, there is some way to just start the server? Without enabling hot reloading?
Here is my webpack.mix.js file:
let mix = require('laravel-mix');
mix.sass('src/scss/app.scss', 'dist/css/')
.js('src/js/app.js', 'dist/js/').react()
.setPublicPath('public');
My package.json has just the default script:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
If you're using Composer you can run php artisan serve, this will start a local php server and serve your web pages to the browser Laravel installation.
I've got an express app with a nextJS frontend both deploy together on Heroku. Due to Heroku's dynamic port assignment, I'm trying to pass the PORT into the static nextJS build so that it knows how to call the API i.e
const PORT = process.env.PORT;
fetch(`https://localhost:${PORT}/api/blah`)
I've tried the following in my package.json but it doesn't seem to work:
"scripts": {
"test": "jest",
"dev": "nodemon",
"build": "next build && tsc --project tsconfig.server.json",
"start": "cross-env NODE_ENV=production node dist/index.js -p $PORT"
},
The port is accessible within the NODE application but not within the client repo.
Except for your package.json , you don't need to use ${PORT} in all other frontend files.
Use fetch('/api/user/2024') instead of fetch ('http://localhost:3000/api/user/2024') .
If you stumble upon any absolute URL error during heroku build(can be seen during build process i.e build log). Use fetch('http://appname.herokuapp.com/api/user/2024') instead of fetch('/api/user/2024') and replace appname with your heroku appname .
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"
}
I'm trying to build a micro-services applications with JHipster. I'm following this tutorial.
I've successfully run jhipster-registry locally (I've cloned it, then run the commands ./mvnw and yarn start to be able to see the applications registered). Without this yarn start I can't see anything on my browser.
But I want to run my gateway application with the browser sync and I can't because it's focused on jhipster-registry.
I've a backend micro-service on port 8081.
My gateway is configured on port 8080, ./mvnw run successfully and I can see my application on localhost:8080. But I would like to have the hot reload when I run my npm start command on my gateway. I've configured my package.json to run on the port 9061 :
"webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9061 --watch-content-base --env.stats=minimal",
"webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --hot --port=9061 --watch-content-base --profile --progress --env.stats=normal",
When I run npm start it says I can see my app on localhost:9001, but I'm on the jhipster-registry...
Does someone can help me ?
Thanks to Gael Marziou, I've build the package like if I was in production with the commands :
./mvnw -Pprod package
And then :
java -jar target/jhipster-registry*.war
I've had to up the memory allocated for the build in the package.json file :
"webpack-dev-server": "node --max_old_space_size=6144 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=6144 node_modules/webpack/bin/webpack.js",
because I had this error :
My app uses Webpack and an Express server. Will I create problems if I run webpack --watch in one terminal tab, and npm run watch in another?
Is there a better way to auto-build after files change, and also refresh the server?
I guess it won't create any problem and if you make any changes in your component, webpack will automatically compile the changes and you need not refresh the server. Use this in your package.json
"scripts": {
"start": "webpack-dev-server --hot"
}
Install by using npm install webpack-dev-server
Hope it helps!