I have a loopback 3 application. When I start the application with . node I get this in my console.
hsts deprecated The "includeSubdomain" parameter is deprecated. Use "includeSubDomains" (with a capital D) instead. node_modules/loopback/lib/server-app.js:74:25
I searched in my node_modules folder, but there isn't a loopback folder. So how can I fix this?
It's due to the helmet config in middleware.json. Just open it, then find and replace includeSubdomain to includeSubDomains.
I am having same error too,
But just viewing on PM2 logs to see that.
Do you use Loopback with PM2 or inside a Docker container?
I dont have this error with running "NODE . "
Related
I'm new to next.js and react. I have created a simple application and would like to serve it using pm2 and Apache.
When I run npm run dev in the folder of the next project, the server starts and I can see my application on port 3000 of localhost.
However, when pm2 attempts to run the application (I have set it to run on server boot), I get the following error in the pm2 logs:
SyntaxError: Unexpected token '<'
at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)
at async link (node:internal/modules/esm/module_job:67:21)
node --version is v16.19.0
npm --version is 8.19.3
Can someone help me to fix this issue? I don't understand why it is happening at the moment.
Without providing more information and context, it will be difficult to diagnose exactly what is going wrong. If you want good answers, you need to list out a more comprehensive list of things you've tried and information about how you are setting up nextjs with pm2.
But right now, the character is your best clue. "<" hints at the problem likely being that html markup is being loaded somewhere it shouldn't be.
I fixed it. I had neglected to build the project with npm run build. Once I'd done that, pm2 worked as desired.
I tried to build app with React + Node and it works just fine. It uses "proxy": "http://localhost:3001" in package.json file. But what I really like to avoid is to use "http://localhost:3001" inside package.json. I'd like to move this to config file but obviously I cannot import it to package.json file then. So my question is: is there a place this proxy is rendered and where I can import config setting.
Has anyone of you has problem like that?
Well next time please specify that you are creating app with create-react-app nobody is here to guess your enviroment. In this case you have only 1 option, eject, yarn eject this will eject your create-react-app and then you can find scripts/start.js https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L83 where you can set this value to whatever, you can for example replace it with process.env.PROXY and then run your app with PROXY=<proxy_url> yarn start and have this variable dynamic
I am running the webpack / webpack-dev-server portion of the base Vue.js Webpack template (https://github.com/vuejs-templates/webpack/) inside of a docker container I created. The container also contains the vue CLI in order to create new projects (you can get my container here if you want: https://hub.docker.com/r/ncevl/webpack-vue/).
Hot-reload does not work after moving from the webpack-simple template to this one.
Everything was working using the Webpack-Simple template which you can clone / see over here: https://github.com/vuejs-templates/webpack-simple
I was able to get the simple template running (with hot-reload working as intended) with the following webpack-development-server launch command:
webpack-dev-server --hot --inline --progress --host 0.0.0.0 --watch-poll
That said the full (not simple) version of the webpack template does not appear to use a webpack-dev-server launch command and instead appears to use additional middleware as referenced in build/dev-server.js (https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js) and the webpack dev config.
Since the --watch-poll was the key to getting the WDS hot-reload functionality to work within a docker container in the last project, my thinking is that I need to do something similar with the webpack-hot-middleware but I dont see anything in their docs (over here: https://github.com/glenjamin/webpack-hot-middleware) that talks about changing to a polling based approach.
I am not 100% sure the polling flag will do the trick since I can see the container recompile my source when I make a change. I can also see the change in my browser if I refresh it manually.
Whats stranger still is if I inspect my page in browser within chrome dev tools, and then head over to network / XHR I can see that the browser actually does receive information from the webpack-dev-server, but visually it does not update.
Give the above I assume websockets (or socket.io which I think is used) are working and communicating between the browser and the WDS so maybe this is a browser caching issue of some sort?
I checked in my console and found this so it is looking like a header issue:
For reference the text error from that image (to make it easier for anyone having the same issue to find this post) is:
EventSource cannot load http://__webpack_hmr/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8080' is therefore not allowed access.
Again the Hot-Reload / Hot Module Reload was working with this identical container setup when using the webpack-simple Vue.js template.
I am wondering if anyone has run into anything similar or has any ideas on how to add the polling option . I guess my alternative would be roll back to a more basic webpack config and rebuild that portion of things to use the traditional webpack-dev-server / webpack config but give the above I am not sure that is going to fix it.
I am adding this as a separate answer since it more specifically answers the question in the title, while my other answer more specifically explains what solved my actual problem.
The vue.js webpack template project (which can either be init'd from the Vue CLI or pulled from its repo over here: https://github.com/vuejs-templates/webpack) separates its config files into several different directories.
I am posting this answer so that anyone who runs into the need to add polling to their project will be able to understand how / where to do that.
The base project structure for a Vue.js webpack template project looks like this:
The files that you care about if you are messing with trying to get hot module reload working are related to creating your server primarily with webpack-dev-middleware. The most important files related to that are highlighted here:
Basically if you want to add the polling code to the webpack-dev-middleware server you need to be in the /build/dev-server.js file on lines 20 to 24 that look like this:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
To add polling you would add it just before or after quiet: true. As a side note, if you are having trouble with HMR I would change "quiet:true" to queit false to get a more verbose read out of whats going on from webpack-dev-middleware. I have included verbose and polling modifications to the above code here:
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: false, //Changed to for additional verbosity
watchOptions: { //Add Polling
aggregateTimeout: 300,
poll: 1000
}
})
My other answer is in regards to what ended up solving my problem, not necessarily how to actually add polling (which might be necessary for someone else but did not end up being needed to make my dockerized setup work).
It should also be noted that sometimes when HMR (webpack hot module reload) is not detecting changes it is due to the fact that webpack-hot-middleware or webpack-dev-middleware is running into an issue whereby some invisible characters are / were added to the name of the base project directory (probably by someone building the base Vue project) and therefore webpack on certain OSes is not able to see the changes.
If that happens to you and you are on OSx or running webpack inside of a docker container and you can't get HMR to detect changes, try to rename your vue-webpack project directory and it should work.
Ok. So I can't really take credit for this one since it was actually answered by Discuss user Cristian Pallarés over here: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server
Christian says:
I was just trying the same. I just use "php artisan serve" on localhost:8000, and Webpack Dev Server on localhost:3000. You should make this:
set your webpack config "output.publicPath" as "http://localhost:3000/static/" instead of "/static/"
make your php application load this:
The key is the output.publicPath being absolute. Now, you should run "php artisan serve" and launch your webpack dev server too (in my case I use gulp).
Basically I took that and dug through the Vue.js Webpack Template files to locate the config file where webpack was looking for the public path. the public path setting ended up being in the index.js file located in the /config directory of the template.
I changed my code to look like this:
assetsSubDirectory: 'http://localhost:8080/static/', //!!Changed from /static/
assetsPublicPath: 'http://localhost:8080/', //!!Changed from /
As opposed to the previous setting which DID NOT WORK and looked like this:
assetsSubDirectory: '/static/',
assetsPublicPath: '/',
After that I was able to see my changes hot reload while running the vue.js Webpack template from within my docker container.
Can anyone help me understand how to use BrowserSync with an already running node server?
I know that I have to proxy the server localhost:3000 but where and how would I do that?
Since I'm not using Gulp/Grunt my best guess is proxying a running BrowserSync with express.js but what would that look like?
EDIT:
#RunnyYolk's answer is correct, The best way is to create a script in the package.json file that has BrowserSync proxy your node server. However the issue is more specifically how to use BrowserSync when you need to wait for a process to finish first, such as Angular compilation, then reload your browser.
My build process looks like this:
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
How do I call browser-sync reload after that webpack compilation?
I've had browser sync running with a few Node projects. I remember it being a little bit of a fiddle the first couple of times, but definitely worth the effort.
I can't remember exactly what I got caught on, but try these things and let me know if it's still not playing:
Assuming browser-sync is installed, make sure your app.js file (or whatever you've called it) has the server listening on port 3000.
Start the app with a command similar to this:
browser-sync start --proxy localhost:3000 --files="public/stylesheets/*.css", "public/scripts/*.js" "public/views/*.ejs" --no-notify
That works for me. "--files" is a list of files for browser sync to watch, and --no-notify gets rid of some notifications that get fired on each file change - possibly useful in some situations, but I found them annoying.
Looking at this command I notice that there is no reference to node app.js to start up the app. I assume (although I'm not certain) that bowser-sync looks inside package.json for the "start" script. So if my assumption is correct, and if the above command isn't working for you, check that your package.json file has the script included.
I am trying to run my meteor application on my local network so that when I am off-line I can still use the application on any devices connected to my network. I have been following http://ox86.tumblr.com/post/45184656062/running-your-meteor-js-application-on-your-own-server as a basic tutorial on how to do this. I am new to mongodb and node.js, which causes some trouble. However it seems that everything is working except I do not know where my app is running or what the address is? For example after I complete step 4 from the tutorial
export PORT=8080
export MONGO_URL=mongodb://bill:123456#localhost:27017/dbName
after navigating inside my bundle where main.js is I use
forever start main.js
There are no errors, but I don't know where my app is or if it is even working. Once again I am new to this idea of hosting my own meteor app. Any ideas or suggestions of what I am doing wrong. Also an explanation of the process would be much appreciated. Thanks for the help!
It's likely you have errors. You should check with forever logs main.js to see what you get.
From what it looks like you may have missed the ROOT_URL variable too.
export ROOT_URL=http://www.yoururl.com
export PORT=8080
export MONGO_URL=mongodb://bill:123456#localhost:27017/dbName
forever start main.js
The best check would be to see what you get in the forever logs. Also you may have to install fibers (before you start your app) if you have some error in your logs like invalid ELF header
cd bundle/programs/server/node_modules
rm -r fibers
npm install fibers#1.0.1