I have an app generated with Angular CLI from scratch. CLI version angular-cli: 1.0.0-beta.11-webpack.2
I am trying to test it from my smartphone but I get Connection refused.
So, I run ng serve on my laptop and try to access the app:
From laptop, using localhost: Works
From laptop, using IP: Connection refused
From smartphone, using IP: Connection refused
This used to work with the previous, SystemJS version of CLI. I checked that I don't have a firewall running.
How could I fix or debug this error?
I am using a Mac.
Adding the host-flag with value "0.0.0.0" should allow you to access the webserver from any device on your local network.
This should work:
ng serve --host 0.0.0.0
For an explanation:
https://github.com/angular/angular-cli/pull/1475#issuecomment-235986121
In package.json
"start": "ng serve --host 0.0.0.0 --port 4200 --disable-host-check ",
However --disable-host-check would be a security risk
and you will need
"#angular/cli": "^1.1.0-rc.2" as this flag appeared in 1.1 version
Following the advice on this page:
https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a, this worked for me:
ng serve --host 0.0.0.0 --host my-computer
Maybe this can be helpfull (a bit automated version of #Captain Whippet's answer):
dev-server.js:
const os = require('os');
const { spawn } = require('child_process');
function getLocalIp(ipMatchArr) {
const networkInterfaces = os.networkInterfaces();
let matchingIps = Object.keys(networkInterfaces).reduce((arr, name) => {
const matchingInterface = networkInterfaces[name].find(iface =>
iface.family === 'IPv4' && ipMatchArr.find(match => iface.address.indexOf(match) > -1));
if (matchingInterface) arr.push(matchingInterface.address);
return arr;
}, []);
if (matchingIps.length) {
return matchingIps[0];
}
else {
throw(`Error. Unable to find ip to use as public host: ipMatches=['${ipMatchArr.join("', '")}']`);
}
}
function launchDevServer(address) {
const port = process.env.port || 4200;
const publicHostname = address + ":" + port;
console.log(`[[[ Access your NG LIVE DEV server on \x1b[33m ${publicHostname} \x1b[0m ]]]`);
spawn(
"ng serve"
, [
"--host 0.0.0.0"
, `--public ${publicHostname}`
]
, { stdio: 'inherit', shell: true }
);
}
/* execute */
launchDevServer(getLocalIp(['192.168.1.', '192.168.0.']));
package.json:
"scripts": {
"start": "node dev-server.js"
}
then run "npm start"
You can then open your app on any device on your local network via address printed in yellow.
#angular/cli: 1.3.2, node: 6.9.5
tested on Mac and Windows
you have to find in node_modules angular cli folder all the occurences of localhost and replace (one in particular, depending of your angular-cli version) with 0.0.0.0.
then in package.json put ng serve --host 0.0.0.0
In my case the file is commands/serve.js
Related
WordPress site built using a Lando development environment.
Debugging in WordPress is enabled, as is debugging to a log file.
In VS Code I have the following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9003,
"log": false,
"pathMappings": {
"/app/": "${workspaceFolder}/"
}
}
]
}
And this is my php.ini:
; Xdebug
xdebug.max_nesting_level = 256
xdebug.show_exception_trace = 0
xdebug.collect_params = 0
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.client_host = ${LANDO_HOST_IP}
; Remote settings
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_host = ${LANDO_HOST_IP}
When I start debugging in VS Code everything works as expected.
When debugging isn't active in VS Code (i.e. the green triangle hasn't been clicked)... I get lots of the following error in my WordPress debug log:
Xdebug: [Step Debug] Could not connect to debugging client. Tried: 172.20.0.1:9003 (from HTTP_X_FORWARDED_FOR HTTP header), 192.168.1.18:9003 (fallback through xdebug.client_host/xdebug.client_port) :-(
Is there a way to prevent Xdebug constantly trying to connect?
Is there a way to prevent Xdebug constantly trying to connect?
Yes, don't tell it to connect if you don't want it to connect. You have set xdebug.start_with_request=yes, which means that Xdebug will do as asked, and try to make a connection. If it can't, you'll get a warning.
FWIW, the xdebug.remote_* settings do nothing in Xdebug 3.
Trying to get a sitemap made for my Next JS site using next-sitemap. From my research, next-sitemap doesn't work on Windows without including cross-env. Any suggestions on what to do?
I currently have my postbuild command set to:
"postbuild": "cross-env next-sitemap --config next-sitemap.js""postbuild": "cross-env next-sitemap --config next-sitemap.js"
And here is my next-sitemap.js:
let policy = {
userAgent: "*",
};
if (process.env.ENVIRONMENT !== "production") {
policy.disallow="/";
};
module.exports = {
siteUrl: process.env.URL,
generateRobotsTxt: true,
robotsTxtOptions: {
policies: [
policy
],
},
outDir: "./out"
}
Tryp running npm run build (or yarn build) first, on this youtube video happened the same to him and he did it like that:
https://www.youtube.com/watch?v=zS-6oiwvNnc
I don't think you need the cross-env, but for windows what you have to do is changing the file name instead. See the docs here.
I have encountered a problem when serving a built storybook. As you can see below, it shows only a spinner spinning into oblivion. When i opened the console, it says:
Error: manager received sharedStateChanged-manager-storybook/viewport but was unable to determine the source of the event
Here's my storybook configuration files:
main.js
module.exports = {
stories: [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)"
],
addons: [
"#storybook/addon-links",
"#storybook/addon-essentials",
"#storybook/preset-create-react-app"
],
webpackFinal: config => {
return {
...config,
plugins: config.plugins.filter(plugin => {
if (plugin.constructor.name === 'ESLintWebpackPlugin') {
return false
}
return true
}),
}
}
}
preview.js
import '../src/recore/.storybook/preview.css'
import * as Recore from '../src/recore'
Recore.init({
defaults: {
IMAGE_RESOLVER: path => {
return import('../src/assets/' + path)
}
}
})
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}
To build the storybook, i run build-storybook -o ./build -s ./public -c .storybook
I am using npm, and it told me to do npm run build-storybook -- -o ... but it doesn't behave as expected. Also, I currently use "#storybook/react": "^6.1.21"
Has anyone encountered this problem before? Can you help me to fix it?
Many thanks before!
add "#storybook/builder-webpack5": "^6.2.9",
https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
When I had this problem I was starting the static file serving with npx serve -s.
Changing the startup to npx serve fixed the problem (this was hosting on a Linux web app in Azure).
Are you trying to deploy it to amplify?
If you are trying to deploy it to Amplify you need to rewrite some rules: (top to bottom)
1st rule: Source: /iframe.html Target: /iframe.html
2nd rule: Source: /<*> Target: /index.html
3rd rule: Source: </^[^.]+$|\.(?!(css|xml|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> Target: /index.html
Be aware that the 1st rule the target is to iframe.html
I only needed 1 rule in my Amplify config to get storybook to work
Note the below is from terraform, but you should be able to grok it's meaning:
custom_rule {
source = "</^[^.]+$|\.(?!(html|css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>"
status = "200"
target = "/index.html"
}
For AWS AMPLIFY
Source address: /iframe.html
Target address: /iframe.html
Type: 200 (Rewrite)
Source address: /<*>
Target address: /index.html
Type: 404 (Redirect)
Source address: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|xlsx)$)([^.]+$)/>
Target address: /index.html
Type: 200 (Rewrite)
how it should look
My question is similar to this git hub post:
https://github.com/hashicorp/terraform/issues/745
It is also related to another stack exchange post of mine:
Terraform stalls while trying to get IP addresses of multiple instances?
I am trying to bootstrap several servers and there are several commands I need to run on my instances that require the IP addresses of all the other instances. However I cannot access the variables that hold the IP addresses of my newly created instances until they are created. So when I try to run a provisioner "remote-exec" block like this:
provisioner "remote-exec" {
inline = [
"sudo apt-get update",
"sudo apt-get install -y curl",
"echo ${openstack_compute_instance_v2.consul.0.network.0.fixed_ip_v4}",
"echo ${openstack_compute_instance_v2.consul.1.network.1.fixed_ip_v4}",
"echo ${openstack_compute_instance_v2.consul.2.network.2.fixed_ip_v4}"
]
}
Nothing happens because all the instances are waiting for all the other instances to finish being created and so nothing is created in the first place. So I need a way for my resources to be created and then run my provisioner "remote-exec" block commands after they are created and terraform can access the IP addresses of all my instances.
The solution is to create a resource "null_resource" "nameYouWant" { } and then run your commands inside that. They will run after the initial resources are created:
resource "aws_instance" "consul" {
count = 3
ami = "ami-ce5a9fa3"
instance_type = "t2.micro"
key_name = "ansible_aws"
tags {
Name = "consul"
}
}
resource "null_resource" "configure-consul-ips" {
count = 3
connection {
user = "ubuntu"
private_key="${file("/home/ubuntu/.ssh/id_rsa")}"
agent = true
timeout = "3m"
}
provisioner "remote-exec" {
inline = [
"sudo apt-get update",
"sudo apt-get install -y curl",
"sudo echo '${join("\n", aws_instance.consul.*.private_ip)}' > /home/ubuntu/test.txt"
]
}
}
Also see the answer here:
Terraform stalls while trying to get IP addresses of multiple instances?
Thank you so much #ydaetskcor for the answer
In addition to #alex-cohen answer, another tip from https://github.com/hashicorp/terraform/issues/8266#issuecomment-454377049.
If you want to initiate a call to local-exec, regardless of a resource creation, use triggers:
resource "null_resource" "deployment" {
provisioner "local-exec" {
command = "echo ${PATH} > output.log"
}
triggers = {
always_run = timestamp()
}
}
I've set up grunt successfully to watch sass and js file changes in my Gruntfile.js. The only thing its not picking up are the changes to my php files. Looking at the documentation for browser-sync for Wrodpress, i need to state options like so:
browserSync: {
files: {
src : [
'style.css',
'images/*',
'js/**/*.js',
'**/*.php'
],
},
options: {
// server: {
// host: "192.168.1.141:8888/bch",
// baseDir: "/", // "./",
// },
proxy: "localhost",
// port: 8888,
watchTask: true
}
}
I've tried the commented out options aswell as a slightly differnt sytax setup at http://www.browsersync.io/docs/grunt/ at the bottom of the page and for any option neither does the grunt-cli show any updates nor does the browser change on save. Is there an obvious component I'm missing?
For anyone fairly new to this as I am and wanted to know what i did:
browserSync: {
dev: {
options: {
proxy: "localhost:8888",
files: ['style.css', 'js/**/*.js', '**/*.php'],
watchTask: true,
}
}
}
Stating the port explicitly as per my quesiton example meant the browser sync wouldn't go to its default :3000 port for it to then run its sync magic
Although it does need a reference to the 8888 as its part of my base local URL. So instead i put it in the proxy: option and i can click through to any project from there in my htdocs folder.
Wrapping it in dev: {} to tell browser-sync i had my own server running (MAMP)
This also then stopped the annoying error of Fate Error: not running when trying to come out of the currently running 'grunt' command.
On Mac OSX Mavericks, with MAMP.