Create-react-native-app: Expose the ability to run packager on custom port

Created on 21 Mar 2017  路  15Comments  路  Source: expo/create-react-native-app

The packager hostname would be configurable using REACT_NATIVE_PACKAGER_HOSTNAME. Would be great to have it specify a port too.

Today, an open port above 19001 is used and the packager is started there. However, there may be firewall rules that may prevent incoming connections to that port. Making it configurable would help.

underlying tools

Most helpful comment

Make a .exprc file like this with whatever port you want.

{
    "manifestPort": 8000
}

It seems to be an undocumented config file.

All 15 comments

Progress on this?

My firewall block me too, and a custom port is a good idea.
Something new about it ?

A PR to support this would be very welcome :)

Need this option to run on Cloud9 IDE http://c9.io, they only allow port 8080/1/2

Make a .exprc file like this with whatever port you want.

{
    "manifestPort": 8000
}

It seems to be an undocumented config file.

Adding _manifestPort_ to a _.exprc_ file as suggested above seems to change the _expoServerPort_ from its default of 19000. Still not sure how to change _packagerPort_ from default 19001.
Also tried running npm start -- --port=8081 but that doesn't seem to help.

this is a really great addition, my corporate network guys do not like opening ports and exactly like what @axemclion said, CRNA already have a environment value that let us configure hostname, what about port?

The Metro bundler port is currently configurable through the expo.packagerOpts.port property in app.json, e.g.:

{
  "expo": {
    "sdkVersion": "25.0.0",
    "packagerOpts": {
      "port": 8787
    }
  }
}

@fson Your solution does not work, because expo doesn't reset its auto-created port to what is in the app.json file prior to starting the packager.

Packager port is set here:
https://github.com/expo/xdl/blob/ec7560e3d884afa02f728ac30a4a7f3a20ad2200/src/Project.js#L1088

User settings is set here:
https://github.com/expo/xdl/blob/ec7560e3d884afa02f728ac30a4a7f3a20ad2200/src/Project.js#L1107-L1124

And they use the packagerPort variable directly without having checked for user settings to have changed it when creating the server here:
https://github.com/expo/xdl/blob/ec7560e3d884afa02f728ac30a4a7f3a20ad2200/src/Project.js#L1167-L1170

@dawnmist, your comment above helped me make adjustments to get this working with a custom packagerPort. Thank you.

Looking at your PR and comment above, it seems that the userPackagerOpts.port will not get checked when starting the react native server here:

https://github.com/expo/xdl/blob/62e4601665f88b411969cfb8b929801798c03478/src/Project.js#L1088

@sladec, I made an update on my local package on this line above to read packagerPort from my .exprc. This allows me to run this on c9.io and test with expo. Not the best for a long-term solution though.

@evansmusomi The server doesn't actually get started until https://github.com/expo/xdl/blob/62e4601665f88b411969cfb8b929801798c03478/src/Project.js#L1171 - the line you've marked is where a default free port value gets set. The PR I sent then overwrites that default value with whatever is found in the userPackagerOpts in the section where those userPackagerOpts are being processed prior to actually starting the server. So by the time the server start at L1171 is being called, the original default value has been replaced with your own custom one.

I thought it sensible to keep all the processing of userPackagerOpts in the same place.

I'm trying the latest version of CRNA, and even setting app.json to:

{
"expo":{
"sdkVersion": "27.0.0",
"packagerOpts":{
"port": 8787
}
}
}

when I do npm start, the .expo/packager-info.json file shows the packager port to be 19001:

{
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 15856
}

@fson Hello Sir, How do I change the expoServerPort to 3000?

@fson Hello Sir, How do I change the webpackServerPort to 3000?

How do I change the webpackServerPort to 3000?

Was this page helpful?
0 / 5 - 0 ratings