Skip to content
This repository has been archived by the owner on Jun 3, 2019. It is now read-only.

Can not access dev server from other machines #398

Closed
birkir opened this issue Mar 15, 2017 · 9 comments
Closed

Can not access dev server from other machines #398

birkir opened this issue Mar 15, 2017 · 9 comments

Comments

@birkir
Copy link
Collaborator

birkir commented Mar 15, 2017

We have a problem where our devs can't test devices that are on the same wlan in develop mode.

Simplified example:

  • computer ip is 192.168.1.1 and my phone is 192.168.1.2.
  • starting develop binds 0.0.0.0:1337 to express and 0.0.0.0:7331 to the webpack dev server.
  • address to the webpack bundle will be set to http://0.0.0.0:7331/client/index.js because we're using the HOST EnvVar.
  • accessing http://192.168.1.1/ from my phone will work, but it will try to connect to webpack dev server via 0.0.0.0 won't, so no assets get delivered.
  • by setting HOST=192.168.1.1 won't work as it will not bind to all interfaces (localhost won't work).

I solved it (temporarily?) by adding a new environment variable that sets the development server host independently from the express bind address. But we can also just always bind to all ifaces (express and dev server) and use HOST as the publicPath.

Opinions?

@birkir
Copy link
Collaborator Author

birkir commented Mar 15, 2017

My proposal is to basically just remove config('host') from this line:
https://github.com/ctrlplusb/react-universally/blob/next/server/index.js#L52

@strues
Copy link
Collaborator

strues commented Mar 16, 2017

I believe the reasoning for the host configuration was to help with Heroku or Now? I could be mistaken. Could implement https://github.com/bubenshchykov/ngrok as an alternative if necessary.

@birkir
Copy link
Collaborator Author

birkir commented Mar 16, 2017

We use ngrok a lot, but it required this change. Two ngrok proxies are needed for different ip's, then we need to set HOST to ngrok0 host and CLIENT_DEV_HOST to ngrok1 host and CLIENT_DEV_PORT to 80 for it to work.

@ctrlplusb
Copy link
Owner

I honestly can't remember the original intention of adding the host. now doesn't require it, I can confirm. Anyone using heroku?

@birkir
Copy link
Collaborator Author

birkir commented Mar 16, 2017

Not for heroku, not for google cloud engine (use both).

@ctrlplusb
Copy link
Owner

@birkir whats the consensus on this? Have you been using without the config('host') for a while now? You reckon it's safe to go ahead with this change?

@birkir
Copy link
Collaborator Author

birkir commented Apr 4, 2017

I've been using this without config('host') for a month without any issues. It's safe.

@ctrlplusb
Copy link
Owner

Sweet, do you mind updating next? :)

@birkir
Copy link
Collaborator Author

birkir commented Apr 5, 2017

wow, @ctrlplusb is on fire, great work man!

ctrlplusb pushed a commit that referenced this issue Jun 21, 2017
* Adds modernizr with illustrative example. closes #256

* Linting now occurs on config, src and tools. closes #314

* Updates dependencies.

* update broken feature/flow link in docs

* Updates dependencies.

* Updated CSP to add backwards compatibility to nonce. (#344)

* Updated CSP for nonce backwards compatibility

* Documented

* Updates comments

*  - Renamed environment variables:
   - `SERVER_PORT` to `PORT`
   - `SERVER_HOST` to `HOST`
   - `CLIENT_DEVSERVER_PORT` to `CLIENT_DEV_PORT`
 - Replaces `code-split-component` with `react-async-component`
 - Renames the `nodeBundlesIncludeNodeModuleFileTypes` config property to `nodeExternalsFileTypeWhitelist`
 - Refactors the server and serviceworker offline page generation. We now use a set of React components (`ServerHTML` and `HTML`) to manage our HTML in a uniform fashion.
 - Refactors how we resolve environment specific configuration values. `NODE_ENV` is reserved for specifying a `development` or `production` build now. Use `CONF_ENV` to specify a target environment if you would like to resolve an environment specific .env file.
 - Refactors the client configuration filter rule to be contained within the main configuration and moves the configuration object creation into the server middleware.
 - Renames the `safeGetConfig` to `config`, and made it a default export.
 - Removes the `cross-env` library.

 - All server/client/shared code all use the shared config helper.
 - Updated dependencies, including to the latest Webpack official 2 release.

 - New babel plugins to optimise React production build performance.
 - Adds new icon sets.

 - Chrome favicon request issue.
 - Cleans up the package scripts.
 - Service worker would fail if a subfolder was added to the public folder.

* fix sw to exclude directory (#305)

* Adds Dion Dirza as a contributor 🎉

* Fixes analyze.

* Docs and cleaning up.

* Updates docs and version.

* Removes code-split-component.

* Updates deps and fixes config refs.

* Huuuuuge refactor of project structure.  The 'src/' was always unnecessary.  Everything internal (tooling/docs) has been moved to an "internal" folder.  The rest lives at root.
The configuration has been given a massive once over too.  I really disliked how there were multiple ways the config values were being read throughout the project.  Everything has been changed now to use a config helper that lives in the '<projectroot>/config/' folder.  All things config lives in that folder now too.

* Fixes offline page.

* Cleans up and centralises util functions.

* Minor fixes.

* Renames config/get to config/getConfig
Removes CONF_ENV and refactors environment variable resolution to use NODE_ENV again.

* fixes typo: laoder -> loader (#353)

* fixes typo: server -> serve (#354)

* Huuuuuuuge update. Getting closer to v13.

* Fixes incorrect import path in Menu.test.js (#360)

* Updates Error 404 component so that we can set 404 status on SSR renders (#357)

* Updates dependencies.

* Updates contributors and comments.

* Restructures and fixes tests.

* Cleaning up comments and docs.

* Fixes deprecated fallbackLoader (#365)

* Changes default host config to bind to all hosts (0.0.0.0) by default (#361)

* fix typo flag (#369)

* removing flow from branch

* Missing default polyfill.io features

* Updated react-router-dom to beta 7 (#381)

* Updates node version.
Adds check for none-support of HTML 5 browserhistory on the router.

* Synchronises the react-router-dom dep into yarn.lock

* Updates dependencies.

* Removes onlyIf and replaces with ifElse helper. fixes #362

* Update README.md

* Update README.md

* Fixes breaking context changes in RR4

* Rollback disableSSR. TODO: EnvVars this

* Changes polyfill.io into a features array specification.

* Upgrade react-router-dom@4.0.0 and other deps (#396)

* update deps

* Using babel-env instead, still produce same result

* Fix not found implementation for stable react-router v4.0.0

* Restore and update deps

* Syncs yarn.lock with package.json

* Fix Error404 test

* Upgrades to latest react-async-component.
Reintroduces React Hot Loader 🎉
Adds milligram for some basic styling out of the box.
Adds a counter route for testing state based hot reloading.
Restructures route components.

* Adds 'es6' features to polyfill.io config.

* Removes aliasing of React libs and instead makes NODE_ENV get set to either 'development' or 'production' via the webpack config.
Introduces DEPLOYMENT environment variable to allow for the specification of target environment configuration files.

* Updates comments.

* Removes babel-preset-latest.

* staticContext on 404 route not required.

* Refactors async components structure.

* Adds prettier 💄

* Updates nvm

* Adds prepush hook to run jest.

* Fixes prettier config to use prettier-eslint. Woops\!

* Removes unused eslint-flowtype plugin.

* Updates dependencies.

* Updates docs

* Moves all html page elements to DemoApp component. closes #390

* Removes 'host' from server start. closes #398

* Changes process.env build flags to be inline with expected string type of typical process.env member. closes #395

* Preps v13 release

* Update README.md

* Update README.md

* Updates dependencies.

* Update breaking changes

* Adds birkir to contributors list

* Adds @birkir to contributors on about us route.

* Changes over to all-contributors

* Orders contributors by name

* fix the "collectCoverageFrom" config of jest

* updating asyncPosts

* Prepare React 15.5 (#413)

* Update dependecies, change component prop-types.

* Helmet now has prop-types support.

* Update yarn lockfile

* Bumped react-router and forgot prop types in clientconfig.

* Bump enzyme and prop-types

* Bump react-async-component and enzyme

* Updates deps.

* Another bug fixes, tweaks (#422)

* Fix lint

* code split naming strategy sample

* remove HTTP protocol to be more flexible

* Refactor polyfill.io
Due to counter route become broken in mobile device, use only default feature instead

* Fix lint while prettier revert changes

* update deps

* Add es6 back by default. (#429)

* Windows (#415)

* update eslintrc line-breaks for windows

* add prop-types as a dependency to prevent react-hot-loader from breaking build.
add cross-env for starting tasks which break on Windows.
add FAQ for when running develop and javascript files aren't loading even though the build is successful.
modify the clean task to execute a function rather than use the ${npm bin} exec command, which doesnst work on Windows.

* save exact package.json

* add cross-env to npm scripts

* dev server host always 0.0.0.0, not host config

* merge with universally/master - updating snapshots

* merge/next - adding async posts

* merge/next - updating dependencies + updating async components + removing counter component

* merge/next - updating server side state

* merge/next - fixing server async functions

* universally/merge - fixing async posts route

* chore: add redux, react-redux, redux-thunk to vendorDLL

* Fix configuration for extracted style hash (#438)

* Fix broken link to Feature Branches docs. (#419)

* Fix CORS host (#432)

* Removes reference to deprecated react PropTypes import and replaces with the prop-types package. Adds tests for Post route, post reducers and additional tests to home and about route.

* update snapshot

* Fix Router v2 Implementation

* Add color support for stdout (#443)

Passing colors from server to console in develop.

* master -> redux: fixing store problem

* fixing stores
strues pushed a commit that referenced this issue Jul 12, 2017
* Adds modernizr with illustrative example. closes #256

* Linting now occurs on config, src and tools. closes #314

* Updates dependencies.

* update broken feature/flow link in docs

* Updates dependencies.

* Updated CSP to add backwards compatibility to nonce. (#344)

* Updated CSP for nonce backwards compatibility

* Documented

* Updates comments

*  - Renamed environment variables:
   - `SERVER_PORT` to `PORT`
   - `SERVER_HOST` to `HOST`
   - `CLIENT_DEVSERVER_PORT` to `CLIENT_DEV_PORT`
 - Replaces `code-split-component` with `react-async-component`
 - Renames the `nodeBundlesIncludeNodeModuleFileTypes` config property to `nodeExternalsFileTypeWhitelist`
 - Refactors the server and serviceworker offline page generation. We now use a set of React components (`ServerHTML` and `HTML`) to manage our HTML in a uniform fashion.
 - Refactors how we resolve environment specific configuration values. `NODE_ENV` is reserved for specifying a `development` or `production` build now. Use `CONF_ENV` to specify a target environment if you would like to resolve an environment specific .env file.
 - Refactors the client configuration filter rule to be contained within the main configuration and moves the configuration object creation into the server middleware.
 - Renames the `safeGetConfig` to `config`, and made it a default export.
 - Removes the `cross-env` library.

 - All server/client/shared code all use the shared config helper.
 - Updated dependencies, including to the latest Webpack official 2 release.

 - New babel plugins to optimise React production build performance.
 - Adds new icon sets.

 - Chrome favicon request issue.
 - Cleans up the package scripts.
 - Service worker would fail if a subfolder was added to the public folder.

* fix sw to exclude directory (#305)

* Adds Dion Dirza as a contributor 🎉

* Fixes analyze.

* Docs and cleaning up.

* Updates docs and version.

* Removes code-split-component.

* Updates deps and fixes config refs.

* Huuuuuge refactor of project structure.  The 'src/' was always unnecessary.  Everything internal (tooling/docs) has been moved to an "internal" folder.  The rest lives at root.
The configuration has been given a massive once over too.  I really disliked how there were multiple ways the config values were being read throughout the project.  Everything has been changed now to use a config helper that lives in the '<projectroot>/config/' folder.  All things config lives in that folder now too.

* Fixes offline page.

* Cleans up and centralises util functions.

* Minor fixes.

* Renames config/get to config/getConfig
Removes CONF_ENV and refactors environment variable resolution to use NODE_ENV again.

* fixes typo: laoder -> loader (#353)

* fixes typo: server -> serve (#354)

* Huuuuuuuge update. Getting closer to v13.

* Fixes incorrect import path in Menu.test.js (#360)

* Updates Error 404 component so that we can set 404 status on SSR renders (#357)

* Updates dependencies.

* Updates contributors and comments.

* Restructures and fixes tests.

* Cleaning up comments and docs.

* Fixes deprecated fallbackLoader (#365)

* Changes default host config to bind to all hosts (0.0.0.0) by default (#361)

* fix typo flag (#369)

* Missing default polyfill.io features

* Updated react-router-dom to beta 7 (#381)

* Updates node version.
Adds check for none-support of HTML 5 browserhistory on the router.

* Synchronises the react-router-dom dep into yarn.lock

* Updates dependencies.

* Removes onlyIf and replaces with ifElse helper. fixes #362

* Update README.md

* Update README.md

* Fixes breaking context changes in RR4

* Rollback disableSSR. TODO: EnvVars this

* Changes polyfill.io into a features array specification.

* Upgrade react-router-dom@4.0.0 and other deps (#396)

* update deps

* Using babel-env instead, still produce same result

* Fix not found implementation for stable react-router v4.0.0

* Restore and update deps

* Syncs yarn.lock with package.json

* Fix Error404 test

* Upgrades to latest react-async-component.
Reintroduces React Hot Loader 🎉
Adds milligram for some basic styling out of the box.
Adds a counter route for testing state based hot reloading.
Restructures route components.

* Adds 'es6' features to polyfill.io config.

* Removes aliasing of React libs and instead makes NODE_ENV get set to either 'development' or 'production' via the webpack config.
Introduces DEPLOYMENT environment variable to allow for the specification of target environment configuration files.

* Updates comments.

* Removes babel-preset-latest.

* staticContext on 404 route not required.

* Refactors async components structure.

* Adds prettier 💄

* Updates nvm

* Adds prepush hook to run jest.

* Fixes prettier config to use prettier-eslint. Woops\!

* Removes unused eslint-flowtype plugin.

* Updates dependencies.

* Updates docs

* Moves all html page elements to DemoApp component. closes #390

* Removes 'host' from server start. closes #398

* Changes process.env build flags to be inline with expected string type of typical process.env member. closes #395

* Preps v13 release

* Update README.md

* Update README.md

* Updates dependencies.

* Update breaking changes

* Adds birkir to contributors list

* Adds @birkir to contributors on about us route.

* Changes over to all-contributors

* Orders contributors by name

* fix the "collectCoverageFrom" config of jest

* Prepare React 15.5 (#413)

* Update dependecies, change component prop-types.

* Helmet now has prop-types support.

* Update yarn lockfile

* Bumped react-router and forgot prop types in clientconfig.

* Bump enzyme and prop-types

* Bump react-async-component and enzyme

* Updates deps.

* Another bug fixes, tweaks (#422)

* Fix lint

* code split naming strategy sample

* remove HTTP protocol to be more flexible

* Refactor polyfill.io
Due to counter route become broken in mobile device, use only default feature instead

* Fix lint while prettier revert changes

* update deps

* Add es6 back by default. (#429)

* Windows (#415)

* update eslintrc line-breaks for windows

* add prop-types as a dependency to prevent react-hot-loader from breaking build.
add cross-env for starting tasks which break on Windows.
add FAQ for when running develop and javascript files aren't loading even though the build is successful.
modify the clean task to execute a function rather than use the ${npm bin} exec command, which doesnst work on Windows.

* save exact package.json

* add cross-env to npm scripts

* dev server host always 0.0.0.0, not host config

* Fix configuration for extracted style hash (#438)

* Fix broken link to Feature Branches docs. (#419)

* Fix CORS host (#432)

* Add color support for stdout (#443)

Passing colors from server to console in develop.

* master merge - updating tests + snapshots

* master merge - fixing styles
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants