How to stop mamp pro overriding localhost:3000? - node.js

I am trying to get an existing node website working for me locally with mamp pro. The first developer used the non-pro version of mamp and it works fine for him. But when I visit http://localhost:3000/ after "npm start" I am served with the mamp pro default "The virtual host was set up successfully" page. Is there a way I can prevent mamp pro superseding localhost or even just that port? (I tried the solutions suggested here and here but it just redirected it to the mamp default page again.) Webpack.config settings here:
proxy: [
{
context: [
'**',
'!/*.js',
'!/*.css',
'!/__webpack_hmr',
'!/*.hot-update.js',
'!/*.hot-update.json',
],
options: {
target: 'http://example.local:8888/',
autoRewrite: true,
// Review docs before setting these
// changeOrigin: true,
// logLevel: 'error'
},
},
],
},

Related

Proxying localhost requests throws ECONNRESET errors when using parceljs with nodejs on debian OS

I have 2 apps running on different ports.
API - http://localhost:3000
UI - http://localhost:3001
UI is running via dev mode of parcel.
I need to forward all requests from UI app (3001) to API (3000)
I tried to use .proxyrc approach
https://parceljs.org/features/development/#.proxyrc-%2F-.proxyrc.json
with next configuration:
{
"/api": {
"target": "http://localhost:3000/",
"changeOrigin": true
}
}
Also, I tried using .proxyrc.js https://parceljs.org/features/development/#.proxyrc.js
const { createProxyMiddleware } = require("http-proxy-middleware")
module.exports = function (app) {
app.use(
createProxyMiddleware("/api", {
target: "http://localhost:3000/",
changeOrigin: true,
})
);
};
Unfortunately every time I get such an error when a request comes:
console: [HPM] Error occurred while proxying request localhost:3001/api/v2/client-config to http://localhost:3000/ [ECONNRESET] (https://nodejs.org/api/errors.html#errors_common_system_errors)
Other team members with Debian and other linuxes have no such issues.
Could someone help me with that please ?
OS: Debian GNU/Linux 11 (bullseye)
nvm: 0.39.1
node: v14.18.2
npm: 8.3.1
http-proxy-middleware: ^2.0.6

Angular 8 - GET styles.js net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) when served over USB

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.

Proxying HTTP requests in Angular 7

Previously I was using "proxy.conf.json" to proxy http requests in Angular which was working fine. Now I want to make the proxy urls dynamic, for which I have created a "proxy.conf.js" as mentioned in the Angular Wiki (https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md) and added the following:
const PROXY_CONFIG = [
{
context: [
"/api/*"
],
target: "https://example.com/",
logLevel: "debug",
secure: false,
changeOrigin: true
},
{
context: [
"/login/*"
],
target: "https://example1.com/",
logLevel: "debug",
secure: false,
changeOrigin: true
}
]
module.exports = PROXY_CONFIG;
And in the "package.json", I have added the following:
"start-dev": "ng serve --proxy-config proxy.conf.js",
But when I run this script "npm run start-dev", it does not read from the "proxy.conf.js" file although it says "Proxy created".
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
10% building 3/3 modules 0 active[HPM] Proxy created: [ '/login/*' ] -> https://example1.com/
Instead of making http request to "https://example.com/", the url is still pointing to "http://localhost:4200/"
Could someone please let me know if there is anything I'm missing out here.
In your Proxy configuration the context pattern is /login/* however the actual request according to your console output is simply /login with no trailing component.
Therefore this proxy rule das not match and the dev server has no local resource for this and therefore answers with a 404.
You can either change the context or add a second entry for /login.

Angular 5 and Wordpress

I am attempting to setup a project that uses both Angular 5 and Wordpress. Currently my solution allows the serving of both applications using node. From the root directory I run "node index.js" to run wordpress, and in a separate terminal, in a subdirectory I run "ng serve" to run the angular implementation.
Is it possible to run both angular and wordpress on the same terminal window? An example being, by typing "node index.js" in the root directory, can I serve both the angular application in a subdirectory and the wordpress through that one console?
My projects are pretty bare but here is some base code:
/index.js
const express = require('express')
const epf = require('express-php-fpm')
const options = {
// root of your php files
documentRoot: __dirname + '/wordpress',
// extra env variables
env: {},
// connection to your php-fpm server
// https://nodejs.org/api/net.html#net_socket_connect_options_connectlistener
socketOptions: { port: 9000 },
}
const app = express()
app.use('/', epf(options))
app.listen(3000)
/subproject/protractor.conf.js
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
Thank you.
I am working on a new plugin, Xo for Angular that may provide a solve for the use case above.
https://wordpress.org/plugins/xo-for-angular/
Xo gives you the option to load an Angular App as a theme with WordPress serving only as the management interface. Routes can be generated dynamically so all pages and posts are instantly viewable on the front-end without needing to recompile.
For local development I recommend setting up either apache or nginx using a tool like XAMPP. I have detailed the setup I use for my own local development here: https://github.com/WarriorRocker/angular-xo-material
Once you have wordpress running through a server like apache you can then just run ng build and let Xo load your App/theme through the main front-end. Alternatively you can also run with ng serve for rapid development.
In production you can either have Xo load your App and inject wp_head/wp_footer as necessary (Live Redirect Mode) or redirect all front-end requests to your App's dist index.html (Offline Redirect Mode).
Additional docs (work in progress): https://angularxo.io/

Node Js Gulp - BrowserSync - Gulp watch PortForwarding on vagrant

Hello guys im Running an vagrant machine with localhost:8088
my gulp task starting the an default local host on : http://localhost:3000/ how is it possible to reload my vagrant localhost:8088 if changes appears (Just the Browser should i use live-reload?
)
gulp.task('browserSync', function () {
browserSync.init({
proxy: '127.0.0.1:3005',
target: "localhost:8088",
open: true,
notify: true
})
});
tryed this but still without success
Try to mention open parameter as external and give the port and address in parameters as below
{ "host": "localhost", "open": "external", "port": 8088 }
Hope this works

Resources