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 .
Related
pm2 start npm -- serve
pm2 start npm --watch -- run dev
pm2 start npm --name "vue-app" -- start
sudo pm2 start npm run serve --name vue-app -- start
When I run those it will start a process but not my app because when I do sudo lsof -i -P -n | grep LISTEN I don't see the 8080 port being used, either that or I get "script not found".
Here is my package.json:
{
"name": "vue-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
}
Since at least one of those commands have to be correct, do I have to modify my package.json file?
What I did to make it work was cd into the root folder of the frontend and run this command:
pm2 serve dist 8080 --spa
But as kissu mentioned I'll need to move it to a different host since it's a static app, amplify or netlify for exemple.
S3 is not a good place for an app, it's more for assets since it's quite slow AFAIK. But you can host it there if you really want to host on AWS.
More difficult to connect to the backend? Not really, pretty much the same: target an URL.
You could micro-optimize it on the same provider with kubernetes and all, but this is probably out of the scope here.
I am building a server and a client nwjs app, but I can't open both at the same time. I wonder if there is any way to do this. I run npm run dev on both of my opened VS Code but when I run this command on the second app it just won't open at all (doesn't matter which one is the second app I would like to run). I tried to build the client app and run it and after it run the server app but it's the same, the second app won't start.
This is my package.json file in both app, I don't know if this helps at all. Only the name is different in the apps (nwjs_client and nwjs_server)
{
"name": "nwjs_server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nw src/",
"prod": "nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"nw": "^0.49.1"
}
}
I'm willing to accept any answers, I don't know if it is even possible to run 2 different nwjs apps.
I'm confused by what you are trying to do.
If you are trying to run an NW.js that, instead of loading directly from a index.html, it loads displays a page from a local webserver:
Create an server.js that spins up a local web server on a specific port (like 4263 or something not super common).
If you need any node_modules for this (like express) make sure it is a dependency and not a devDependency.
Set your "main" in the package.json to "http://localhost:4263 using the same port as the server
set your "node-main" to "server.js", this will run in the node context before your window is displayed when starting the app.
Set your "node-remote" to "http://localhost:4263" using the same port also. This will allow Node commands to run on that URL when loaded in NW.js.
If you are wanting to run two commands at the same time you can:
npm install --save-dev concurrently wait-on. This will install two devDeps
Set your npm script to "start": "concurrently \"npm run serve\" \"wait-on http://localhost:4263 && nw .\""
This will run your npm run serve command, which presumably spins up a local webserver for development, if using something like webpack, this could take a minute. Then it waits until localhost:4263 actually returns a response. Then it launches NW.js
concurrently will also let you run any two (or more) commands at the same time.
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 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