1

I would like to test my app in my phone / tablet, but i cannot access to it by anything. I am serving my app with webpack-dev-server, but would like to access to it by browsersync with others devices. What is the problem? Page is just loading and after all i am getting "ERR_CONNECTION_TIMED_OUT". It's angular2 app ( if it helps you ).

webpack.config.js

const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); module.exports = { entry: path.join(__dirname, './src/app.module.ts'), output: { path: path.join(__dirname, './dist/'), filename: 'bundle.js' }, devtool: 'source-map', module: { rules: [ { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env'], plugins: ['transform-runtime'] } } }, { test: /\.ts$/, include: path.resolve(__dirname, 'src'), loader: 'ts-loader' }, { test: /\.scss$/, include: path.resolve(__dirname, 'src'), use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { plugins: function () { return [ require('autoprefixer') ]; } } }, { loader: 'sass-loader' } ] }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' ] } ] }, resolve: { extensions: ['.js', '.ts'] }, plugins: [ new BrowserSyncPlugin({ host: 'localhost', port: 3000, proxy: 'http://localhost:3100/' }, { reload: false } ), new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), }), ] };

package.json

{ "name": "translation", "version": "0.0.1", "description": "translations ( using i18n )", "main": "index.js", "scripts": { "start": "webpack --progress", "serve": "webpack-dev-server --progress" }, "repository": { "type": "git", "url": "http://git.krakow.comarch/rnd/translation-i18n" }, "author": "K.N.", "license": "ISC", "dependencies": { "@angular/animations": "^4.0.2", "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", "@angular/platform-browser": "~4.0.0", "@angular/platform-browser-dynamic": "~4.0.0", "@angular/router": "~4.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.10", "rxjs": "5.0.1", "zone.js": "^0.8.4" }, "devDependencies": { "babel-core": "^6.24.0", "babel-loader": "^6.4.1", "babel-preset-env": "^1.2.2", "browser-sync": "^2.18.8", "browser-sync-webpack-plugin": "^1.1.4", "css-loader": "^0.27.3", "html-webpack-plugin": "^2.28.0", "image-webpack-loader": "^3.3.0", "node-sass": "^4.5.2", "postcss-loader": "^1.3.3", "sass-loader": "^6.0.3", "style-loader": "^0.16.1", "ts-loader": "^2.0.3", "typescript": "^2.2.2", "typings": "^2.1.0", "webpack": "^2.3.2", "webpack-dev-server": "^2.4.2" } }

I don't know which others files should've given to you. Even i don't know where is the issue.. Thanks for any help.

UPDATE

I have added this port to firewall: enter image description here

Dowolny means - any still doesn't work - same result :C

Improve this question
6
  • are you trying to access it on some other device in LAN? Commented Apr 14, 2017 at 9:54
  • Yep, the same result :/ Commented Apr 14, 2017 at 9:58
  • you're getting timeout. did you open the port of dev-server in your firewall? Commented Apr 14, 2017 at 10:01
  • try this Commented Apr 14, 2017 at 10:02
  • actually i can access to my page by webpack-dev-server ( localhost:8080 ), the problem is just with browsersync Commented Apr 14, 2017 at 10:02

1 Answer 1

Reset to default
2

If your app is on localhost:8080 then I believe you should use:

 new BrowserSyncPlugin({ host: 'localhost', port: 3000, proxy: 'http://localhost:8080/' },
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

oh mate. Thank you so much <3
:)) you're welcome, docs are here btw: npmjs.com/package/browser-sync-webpack-plugin#advanced
One more question.. I am on the same wifi spot. Can access by my PC to this site, but cannot with mobile phone. On PC i am typing localhost:3000 ( like it is in console ), but for External it is 192.168.56.1:3000 ( like in console ), but cannot access? What is the problem?
Does access by External works on PC? If yes and your PC and mobile are on the same wifi spot then it should work. If it doesn't then may be issues with network configuration. I had this issue once on network with proxy but was lucky to just switch to another one so still don't know what actually was the problem
Ok, have resolved it. In host i had to type my ip not localhost. Works now. :)
|