Currently the docs specify configuring your router to forward traffic towards the hosting machine. This is bad advice for numerous reasons; risking breaking your router by something that should be done by software.Thankfully there's an better way to do this: using a reverse proxy.
In this tutorial I'm using ports 8000 and 8001, for main and build. I've changed superpowers to use these ports to make them easier to remember. It's optional, but you'll have to change some numbers in step 4.
Step 1: get apache
You'll need the apache web server for this tutorial. Mac has it installed by default, windows users can download XAMPP, and linux users can download it with sudo apt-get install apache2.
Step 2: open up ports
the first thing you'll need to do is edit the httpd.conf file. On linux+mac it's usually in / etc/apache2/httpd.conf, on windows it will be where you installed it. Open up terminal and paste in the command sudo nano /etc/apache2/httpd.conf to edit it, and find the part where it says Listen 80:
# # Listen: Allows you to bind Apache to specific IP addresses and/or # ports, instead of the default. See also the <VirtualHost> # directive. # # Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses. # #Listen 12.34.56.78:80 Listen 80 Listen 8001
Add the line "Listen 8001" (or the build server port you specified earlier)
Step 3: enable virtual hosts
While still editing http.conf, find the #virtual hosts line and uncomment then hash at the start of the line of the include so it looks like:
# Virtual hosts Include /private/etc/apache2/extra/httpd-vhosts.conf
You'll also need the proxy modules. They'll be in the LoadModule section, and you'll need to enable the following modules:
LoadModule proxy_html_module libexec/apache2/mod_proxy_html.so
LoadModule proxy_module libexec/apache2/mod_proxy.so
Note: if you can't find the proxy_module, you may be running an older version of apache. You may have to install the proxy module separately, you'll often find the .so or .dll files by looking around the internet.
Save and exit http.conf
Step 4: modify the httpd-vhosts.conf file
Run sudo nano /etc/apache2/extra/httpd-vhosts.conf. Or open it in your favorite text editor. Insert the following:
<VirtualHost *:80>
ProxyPreserveHost On
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/socket.io [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule /(.*) ws://localhost:8000/$1 [P,L]
ProxyPass / http://127.0.0.1:8000/
ProxyPassReverse / http://127.0.0.1:8000/
LogLevel debug
</VirtualHost>
<VirtualHost *:8001>
ProxyPreserveHost On
RewriteEngine On
RewriteCond %{REQUEST_URI} ^/socket.io [NC]
RewriteCond %{QUERY_STRING} transport=websocket [NC]
RewriteRule /(.*) ws://localhost:8001/$1 [P,L]
ProxyPass / http://127.0.0.1:8001/
ProxyPassReverse / http://127.0.0.1:8001/
LogLevel debug
</VirtualHost>
If to you're not running superpowers on ports 8000 and 8001 you'll have change the numbers in the text above.
Step 5: start apache
Run the command sudo apachectl restart or restart apache in the xampp command console.
You can test to see if it works by entering the IP address (or domain name, in most routers this is really easy to set up) of your computer in a browser. It's using port 80 so it should just work.
If nothing happens, check the error.log file with the command tail -f /var/log/apache/error_log (or opening the error_log file in a text editor)
How it works
It works by routing all external traffic on port 80 and 8001 to the internal machine on port 8000 and 8001.