Can I run a web server in a GitHub Codespace? - node.js

Part of my development process involves using Mocha and Chai tests. I have a page in my test folder that loads all the code and tests, and I can start up a local node script that runs a simple local server, visit that page on http://localhost:8080/blahblahblah.html, and see the test results.
GitHub recently announced Codespaces and I signed up for the beta. If I start developing in a Codespace, I know there's a terminal there. If I run my testing server in that Codespace, how would I see the test results? Is it even possible to connect to the server in the container from outside? What would replace the URL I show above?


Found the answer here:
https://docs.github.com/en/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace
It's actually pretty surprising. You just have your web server app print a localhost URL to the console, and the Codespace automatically converts that to a clickable URL with the appropriate port-forwarding. Kind of a huge surprise, but also pretty cool.
Just tested and this works.


When an application running inside a codespace outputs a port to the console, Codespaces detects the localhost URL pattern and automatically forwards those ports. You can click on the URL in the terminal to open it in a browser. For example, if an application outputs http://127.0.0.1:3000 or http://localhost:3000 to the console, the log would automatically convert the output to a clickable URL for port 3000.

Related

localhost refused to connect when I ran parcel and next.js's web server

I developed a simple web site using HTML and TypeScript and ran the web server using Parcel.
npx parcel index.html
Now it looks okay in the terminal.
But I can connect on the browser.
I was able to connect localhost:3000 when I worked on Next.js app before but now I can't even connect to this app's server as well as Parcel's server localhost:1234 .
I guess there happens common tricky issues related to localhost.
Please let me know what I should do to figure out this.
I've already followed this link but nothing was figured out...
Also I tried on not only Google Chrome but also Mozilla Firefox and IE but there were same issues..

Website I want to test shows "no internet connection" ONLY while recording through jmeter although proxy has been set correctly

The website I want to test shows "no internet connection" ONLY while recording through jmeter test script recorder. Normally the website works fine but as soon as I click on start recording, a pop up comes up that says "no internet connection". I have recorded scripts on other sites using jmeter and it works fine. This issue comes up ONLY for this particular site I am testing. Could you please help me find out why is it happening? PL. refer attached images.
Image 1 - when jmeter proxy set and recording begins
Image 2 - normally website opens without any proxy/jmeter recording

It might be the case you're using the proxy server in your browser for connecting to the Internet.
And when you substitute the proxy server which gives you the Internet access with JMeter's proxy - you will be able to access local resources only.
The solution would be making JMeter aware of the upstream proxy server by providing the proxy details via command-line arguments like:
jmeter -H my.proxy.server -P 8000
These changes can also be made permanent if you put the following lines to system.properties file:
http.proxyHost=my.proxy.server
http.proxyPort=8080
https.proxyHost=my.proxy.server
https.proxyPort=8080

Tunneling an SPFX WebPart to BrowserStack using ngrok

I've tried this to no avail unfortunately, is there a way of tunneling a locally running version of an SPFX webpart in order to debug it through BrowserStack.
I can get it working directly with SP through the debug query string but it doesn't seem to work via an emulated device on BrowserStack.
https://tenant.sharepoint.com/sites/fakeSite?debug=true&noredir=true&debugManifestsFile=https://1a228f088633.ngrok.io/temp/manifests.js
Any help would be great, I am also aware this may not be possible :)

We debug locally hosted SPFx serves but we do not use ngrok. You have to be aware that there are limitations on which ports are usable as well, the default port 4321 will not work with browser stack. Hopefully that helps, an alternative to debug locally that works for us:
Ensure that Resolve all URLs through my network is enabled for your device
Update the serve.json port to 8888
In serve.json add "hostname": "bs-local.com",
Update c:\windows\system32\drivers\etc\hosts to include an entry: 127.0.0.1 bs-local.com
Then to test:
Navigate to https://bs-local.com:8888/ within the simulator and approve the certificate by proceeding to page
Append the updated hostname to the end of the SP url ?loadSPFX=true&debugManifestsFile=https://bs-local.com:8888/temp/manifests.js
Navigate to the BrowserStack website > select iPad Air (or any other device).
Additional Reference:
Why is my URL redirected to http://bs-local.com from http://localhost?

Changing localhost server files are served from using Node (Webstorm /maybe IntelliJ)

I'm not sure what I'm missing here, so hopefully someone can help me out. I'm working on a project where we're using Node and in the Run/Edit configurations I've down the following:
Node interpreter: This is the path to the node.exe file
which I checked out from Subversion
Working directory: this is where the "app.js" file is, this is the
path that from the command line you type node app.js and it starts the server
JavaScript file: app.js This is the name of the file that actually creates the server
Now from the main nav bar when I do Run / Run my server the box at the bottom pops up and tells me that Express server is listening on port 3000. Cool.
I can navigate to localhost:3000/myPage.html and I can get to the page just fine.
I added as JSON file to the same directory on my hard drive that myPage.html is in, and I can navigate to that as well by localhost:3000/largeTestData.json.
So the server is up and running and serving file as it should. My problem is that in my Webstorm project, I want to make an AJAX request to that largeTestData file. I do so using jQuery like:
var data = $.get('localhost:3000/largeTestData.json');
data.done(function(data){
console.log('here is your data');
cnosole.log(data);
})
When I do that I get the error (in Chrome)
XMLHttpRequest cannot load localhost:3000/largeTestData.json. Cross origin requests are only supported for HTTP.
and so I look at the URL and I'm seeing:
http://localhost:63342/
Obviously Webstorm has started the server correctly, but when I view an HTML file, it's not using that server (which, of course is why I'm getting the CORS error.
There's some fundamental stuff here which I'm obviously not getting. I need my IDE to deploy to the Web server that it started up, but it's not doing that. Please, someone give me a once over on all the technologies that I'm missing out on here.

WebStrom didn't start your node.js server, but serves static pages by its own internal HTTP server which doesn't know anything about node.js and Express.
The main problem:
When you start your node.js server, it's serving JSON files on port 3000. If you open an HTML-page with the little menu in WebStorm (where you can choose the browser), WebStorm opens the browser with an URL pointing to its own internal webserver running on a different port (e.g. 63342). JavaScript security prohibits loading data from a different host/port Same-origin policy.
It's not WebStorm's fault and you need a solution for this problem in production or you can't go live.
General Solution:
Either you have to ensure that HTML pages and JSON data come from the same host+port, or you can circumnavigate with (a) setting server-side headers ('Access-Control-Allow-Origin: *') as #lena suggested, or (b) using JSONP. Below you find some thoughts using nginx as a reverse proxy so from browser's point of view all requests go to the same host+proxy. It's a very common solution, but as mentioned above, there are other options.
Primitive solution:
Don't use WebStorm to open your browser. Load the page from http://localhost:3000/ and change the URL of the REST resource to $.get('/largeTestData.json'). You'll miss some comfort from your IDE, but you can immediately see that your program is working.
Comfortable solution:
As #lena suggested, there is a way to configure your Express/node.js as a server known to WebStorm. I haven't tried it, but I suppose you can then just press the Run-button and maybe the node.js plugin in WebStorm is as intelligent to know the static-maps in Express and know how to map an HTML-file to a web application URL and open the page in the browser with the URL served by your node.js application. (I'd be surprised once again if this really works magically, but maybe you can configure a mapping from files to URLs manually, I don't know.)
Dirty solution
With some options you can disable security checks, at least in Google Chrome. Then it's possible to load JSON data from a different port than your HTML page. I wouldn't recommend using these options (just my opinion).
Additional Hints
If you do more than just playing around with node.js and some UI fun and you have to serve your application "production-ready", then have a look at nginx to serve your static files and reverse proxy node.js requests from there. I'm using this setup even for development and it works like a charm.
Of course node.js / Express is able to serve static files as well, but IMO placing something like nginx in front of node.js (clustered) bring a bunch of advantages for production sites, e.g. load-balancing, ssl-offloading, avoid JSONP, in many cases performance, easier deployment updates, availability.

To get your code working, just change the URL in $.get() to full URL (including protocol):
var data = $.get('http://localhost:3000/phones.json');

In Webstorm 2016.3 (and probably earlier) there is now another option. Under the Configuration Settings for NodeJS runs, one can manually set the page and port to be loaded via Webstorm's "Browser/Live Edit" settings.
See the screenshot below for settings one can change.

why servername:port does not work why localhost:port in node.js works?

I am node newbie. I have a windows server, where I am running node.js with webserver.js. Start the node with webserver.js. Fireup the IE and when I tried localhost:port/index.html, the page shows properly in the IE. Now if I change the localhost to servername:port/index.html, IE is unable to display the page ('IE cannot display the webpage with you can try diagnose connection problem). Is there anything I need to enable in node so it is available outside localhost? I have jenkins runs on the same server, I did not do anything and it shows up properly with the server name. Just curious.
Thanks

my problem was that, I used the code from the link, in the link it was use IP address, I changed it to server name, now I am able to hit the link using both server and proper url. Hope this might help others. I did not change to use netstat though.

Resources