I have a small project (but issue also appears on the one created by npx create-react-app my-app). I use VsCode and developing inside container (https://code.visualstudio.com/docs/remote/containers) . Dockerfile is very minimal:
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
devcontainer.json has, almost, just defaults:
{
"name": "Node.js",
"build": {
"dockerfile": "Dockerfile",
"args": { "VARIANT": "16-bullseye" }
},
"settings": {},
"extensions": [
"dbaeumer.vscode-eslint"
],
"remoteUser": "node"
}
To debug, I run npm start , then I (for the 1st time) i click on Debug URl.
On macOS everything works, including file monitoring, so when I change js file, npm is recompiling instantly.
On Windows 11 however, the last part doesn't work - I need to stop and start npm manually, to have changes implement.
I've even tried to remove .vscode directory from my profile - no change here...
Any idea what is going on? Why it does work on macOS and doesn't work on Windows ?
I have the same extensions on both systems...I just can't find what is going on with Windows machine...
EDIT: the issue seems to be related to "Remote Development" extension for vscode . Issue is present only when using this extension on Windows. So I've opened a bug there: https://github.com/microsoft/vscode-remote-release/issues/6633
Related
I'm using PM2+ to manage my NodeJS deployments.
Usually, when I deploy an application with pm2 start src/app.js, I get details about versioning like in the screenshot below. However, when I deploy using an ecosystem file I only get N/A:
PM2 normally extracts this information directly using vizion.
But since it didn't work with the ecosystem file, I specified the GitHub repository directly just like the documentation stated.
This is my current pm2-services.json ecosystem-file:
{
"apps": [
{
"name": "my-node-app",
"cwd": "./my-node-app-repo-folder",
"script": "src/app.js",
"env": {
"NODE_ENV": "production"
},
"repo": "https://github.com/MyUserName/MyNodeAppRepo.git",
"ref": "origin/master"
}
]
}
For the ref field, I also tried putting refs/remotes/origin/master, remotes/origin/master and master.
Sadly none of them worked (I made sure they are correct using git show-ref).
Additional info:
NodeJS Version: v15.11.0
NPM Version: 7.6.3
PM2 Version: 4.5.6 (latest, by the time of writing this)
So, how do I get the Versioning field to display correctly?
Note: This isn't really an issue but rather a minor inconvenience. I just want to know what I'm doing wrong.
I've added pm2 to one of the repos I work with because I want to restart the local server on crashes and such. App engine handles that for us in production (hopefully 🤞). It's an amazing service really, and I was hoping to replace nodemon with it, but I can't get it to automate the Typescript build on restart.
I was messing around with scripts, and configs, with no luck. I basically need it to to run /node_modules/.bin/tsc to rebuild the dist folder on save. Otherwise, I end up with a stale file that's reloaded for no reason other than change detection.
I haven't found anything online, maybe I'm not looking hard enough, and I don't want to run ts-node as an alternative. I tried running nodemon before and after, with no avail.
Some files:
ecosystem.config.js
apps: [
{
name: "example",
script: ".",
exp_backoff_restart_delay: 1000,
watch_option: {
persistent: true,
ignoreInitial: true,
}
};
package.json
"pm2-start": "pm2 start && pm2 logs",
I tried adding the npm run build before pm2 start and it worked the first time, but not on reloads.
Thanks in advance.
As of 1/5/20 all of my builds are failing that are deployed on Now. I was getting the warning that node 8.x was no longer supported so I specified an engine version of 12.x in my package.json, this successfully stopped the warning from popping during deployment but I'm still receiving the following error
Error: No output directory named "build" found.
I thought maybe a recent change I pushed was causing this but going back and redeploying old deployments that built successfully now received this error. I'm wondering if something on the Now platform changed that I wasn't aware of because it does not seem that code I've pushed recently was the catalyst for this error.
It's also very odd since right before this error the deployment log shows the following
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
207.04 KB build/static/js/2.7d84160a.chunk.js
11.64 KB build/static/js/main.65999b58.chunk.js
1.24 KB build/static/css/main.cacda93c.chunk.css
762 B build/static/js/runtime~main.a8a9905a.js
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
So it looks like the build folder is created but now for some reason now can't find it.
My now.json looks like this
{
"version": 2,
"name": "appname",
"public": false,
"builds": [
{ "src": "package.json", "use": "#now/static-build" },
{ "src": "index.js", "use": "#now/node-server" }
]
}
Any idea why my deployments would suddenly start failing in the last day?
Classic case of finding the solution as soon as I post on stackoverflow...
Not sure which tutorial I followed when first spinning this up but in my package.json I had my now-build script set to
react-scripts build && mv build dist
I removed the last bit of that so now my now-build script is simply
react-scripts build
and all is well again.
I couldn't really tell you why I set this, I just blindly followed the tutorial. For the past 4 months, this has worked, not sure why yesterday it started throwing errors, oh well.
I am using ng serve to run an Angular 8 project locally. The total bundle size is around 7 MB, and it loads with no trouble on the desktop machine where it's hosted.
However, when connecting a phone via USB and using port forwarding (for localhost:4200), the website frequently fails to load completely. The error reported by Chrome is:
GET http://localhost:4200/styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)
This error was logged in https://github.com/angular/angular-cli/issues/7197, and is now marked as resolved. However, even with Angular CLI and NodeJS both up-to-date (Angular CLI v8.3.18 using Node v10.15.0) the error persists. It appears to be caused by the Angular Live development server timing out while serving its assets.
It occurs at random, but especially after a code change it can occur over 90% of the time. Reloading the site and re-running ng serve do not generally fix the issue. It appears to occur more frequently on browsers other than Chrome.
If the error is caused by a timeout in the Angular development server, how can I increase that timeout? If not, how can I prevent this error?
A temporary solution that is working for me is refresh the page multiple times until the vendor.js and main.js files are downloaded.
This issue took me a while to debug and to fix, hopefully this can help someone else. This bug appeared with NodeJS v8, and it still happens with Angular 14 and nodeJS 18.
This issue happens because the download speed of your device is limited, and the server raises a timeout to break the connection before the necessary angular js files are downloaded. This issue can happen over USB but also inside the Android Studio AVD emulator (my case). It can be reproduced artificially on a desktop computer by using the Chrome browser DevTools > Network > enable "Disable Cache" and set "Throttling" to "Slow 3G", then try to access your locally served webapp.
The major issue is that ng serve does not offer a way to manually set the timeout, so it is set to a constant time for all. As is written in the github issue you linked to, there used to be a workaround but only for nodejs 8, which was since then dropped and anyway never applied to any further versions, so it was only a temporary fix.
The solution is to serve the Angular web app manually, so that you can either:
minify js files, so that they are small enough to be downloaded fast.
ng serve --configuration production --watch
In angular.json, the production configuration should be something like this:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"myproject": {
"architect": {
"build": {
"configurations": {,
"production": {
"baseHref": "",
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": false
}
}
}
}
}
}
}
serve the pre-built app using your own server (not ng serve), so that you can disable timeouts.
In one terminal, launch the following to build the app and monitor changes:
ng build --watch
In a separate terminal (while the first one is running), launch the HTTP server with the following (-t0 disables timeouts):
http-server ./dist -p <port> -t0
PS: if you are trying to access the Angular app from inside the Android emulator, make sure to either use the WebView Browser Tester app, or enable the network permission to access HTTP cleartext addresses for your Android app.
I was following the tutorial for creating an advanced Outlook add-in here (Git the Gist)
The above is a node.js-app which uses Yeoman and Microsoft Office Add-in Project Generator. To simply start the add-in, you just type 'npm start' in your root project folder.
But: I want to debug the add-in in Visual Studio Code.
VS Code automatically creates a launch.json file when you want to debug a project. This file looks like this:
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\bsconfig.json"
}
]
However, when I debug I get the following error:
Cannot launch program 'c:\ZTesting\outlooktest\bsconfig.json'; setting
the outFiles attribute might help.
So are these outFiles truly the problem and - if so - what should they be?
And - if not - what is the solution towards debugging a web add-in created with node.js, Yeoman and Microsoft Office Add-in Project Generator?
The bsconfig.json file looks like this:
{
"ui": {
"port": 3000
},
"server": {
"routes": {
"/node_modules": "node_modules"
}
},
"https": {
"key": "./certs/server.key",
"cert": "./certs/server.crt"
},
"watch": true,
"files": "*.*"
}
I did not find out how to debug the add-in above in Visual Studio Code. However it is possible to debug the add-in with the F12-developer-app from Windows 10.
You can find more information about the F12-app here:
Debug add ins using F12 Developer-app from Windows 10
I have the same problem today.
However, there is a tricky way to debug your outlook add-ins if WIN10 F12-app not able to open your html file.
you can use tbody.append to show any value when you debug your add-ins in outlook
var tbody = $('.prop-table');
tbody.append(makeTableRow("asyncResult: ", item));
function makeTableRow(name, value) {
return $("<tr><td><strong>" + name +
"</strong></td><td class=\"prop-val\"><code>" +
value + "</code></td></tr>");
}
I had this same problem. The root cause is that the app does not actually run on the server. npm start actually runs a separate program, called webpack. You can see this by opening package.json. There should be a line like the following:
"start": "webpack-dev-server --mode development --https --key ./certs/server.key --cert ./certs/server.crt --cacert ./certs/ca.crt --port 3000"
When you run npm start, it adds node_modules/.bin/ to the path before running that line. So this script is actually calling an executable called node_modules/.bin/webpack-dev-server. Webpack does not run any of the code in index.js. It "packs" the code, and broadcasts it over https to the client.
Since the app code only runs on the client, it can only be debugged on the client. The use of npm start makes it look like you're writing server code, but the add-in is actually running clientside.