This may or may not be in the cards for you, but it seems you're setting up routing for a SPA.  Many client based routers offer **hash-based** routing precisely for this reason so that you don't have to configure your hosting provider to redirect urls to return index.

The landscape of solutions seems to be:

1. Use Hash-Based Routing

    
    
    <pre><code><b>USE</b>: https://example.com/index.html#inner/path
    <b>NOT</b>: https://example.com/inner/path</code></pre>

   * **React Router** - [`<HashRouter>`][7]
   * **Angular** - [`HashLocationStrategy`][8]
   * **Vue Router** - [`{mode: 'hash'}`][6]

2. Use the [custom 404 page][2] for gh-pages to [redirect all missed traffic back to index.html][3]
3. Choose a different [free static hosting provider][1] that allows basic url rewrites or redirects like:
  * [**netlify**][9]
  * [**surge.sh**][10]

It doesn't look like github supports this feature right now, so you'll either need to avoid deep link requests to the server or change to a hosting provider that allows you to do so.

**Further Reading**:

* [Can I create routes with react-router for a github-pages site?][4]
* [Add single page application support for Github pages][5]
* [S(GH)PA: The Single-Page App Hack For GitHub Pages][11]

[1]: https://codebushi.com/hosting-your-static-website/
[2]: https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
[3]: https://github.com/rafrex/spa-github-pages
[4]: https://stackoverflow.com/q/40776651/1366033
[5]: https://github.com/isaacs/github/issues/408
[6]: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
[7]: https://reacttraining.com/react-router/web/api/HashRouter
[8]: https://angular.io/api/common/HashLocationStrategy
[9]: https://www.netlify.com/
[10]: https://surge.sh/
[11]: https://www.smashingmagazine.com/2016/08/sghpa-single-page-app-hack-github-pages/

I want to serve same index.html page for all (sub)urls in my app on gh-pages

is that possible?

right now when I go to repo/inner/path I get a 404

so I want to "force" github pages serve the same root index.html on all routes

gh-pages - share index.html for all routes

You will never be able to fully replicate by yourself what an arbitrary (SPA) page does.

The only way I see is using a headless browser such as [PhantomJS](http://phantomjs.org/) or [Headless Chrome](https://developers.google.com/web/updates/2017/04/headless-chrome), or [Headless Firefox](https://developer.mozilla.org/en-US/Firefox/Headless_mode).

I wanted to try Headless Chrome so let's see what it can do with your page:

## Quick check using internal REPL

Load that page with Chrome Headless (you'll need Chrome 59 on Mac/Linux, Chrome 60 on Windows), and find page title with JavaScript from the REPL:

    % chrome --headless --disable-gpu --repl https://connect.garmin.com/modern/activity/1915361012
    [0830/171405.025582:INFO:headless_shell.cc(303)] Type a Javascript expression to evaluate or "quit" to exit.
    >>> $('body').find('.page-title').text().trim() 
    {"result":{"type":"string","value":"Daily Mile - Round 2 - Day 27"}}

NB: to get `chrome` command line working on a Mac I did this beforehand:

    alias chrome="'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'"

## Using programmatically with Node & Puppeteer

> [Puppeteer](https://github.com/GoogleChrome/puppeteer) is a Node library (by Google Chrome developers) which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.

(Step 0 : Install [Node](https://nodejs.org/en/) & [Yarn](https://yarnpkg.com/lang/en/) if you don't have them)

In a new directory:

    yarn init
    yarn add puppeteer

Create `index.js` with this:

    const puppeteer = require('puppeteer');
    (async() => {
        const url = 'https://connect.garmin.com/modern/activity/1915361012';
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        // Go to URL and wait for page to load
        await page.goto(url, {waitUntil: 'networkidle'});
        // Wait for the results to show up
        await page.waitForSelector('.page-title');
        // Extract the results from the page
        const text = await page.evaluate(() => {
            const title = document.querySelector('.page-title');
            return title.innerText.trim();
        });
        console.log(`Found: ${text}`);
        browser.close();
    })();

Result:

    $ node index.js 
    Found: Daily Mile - Round 2 - Day 27

I'm trying to fetch an entire webpage using JavaScript by plugging in the URL.  However, the website is built as a Single Page Application (SPA) that uses JavaScript / [backbone.js][6] to dynamically load most of it's contents after rendering the initial response.

So for example, when I route to the following address:



    https://connect.garmin.com/modern/activity/1915361012

And then enter this into the console (after the page has loaded):



    var $page = $("html")
    console.log("%c✔: ", "color:green;", $page.find(".inline-edit-target.page-title-overflow").text().trim());
    console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());

Then I'll get the dynamically loaded activity title as well as the statically loaded page footer:

![Working Screenshot][1]


---

**However**, when I try to load the webpage via an AJAX call with either [`$.get()`][4] or [`.load()`][5], I only get delivered the initial response (the same as the content when over view-source):



    view-source:https://connect.garmin.com/modern/activity/1915361012

So if I use either of the the following AJAX calls:




    // jQuery.get()
    var url = "https://connect.garmin.com/modern/activity/1915361012";
    jQuery.get(url,function(data) {
        var $page = $("<div>").html(data)
        console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
        console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
    });

    // jQuery.load()
    var url = "https://connect.garmin.com/modern/activity/1915361012";
    var $page = $("<div>")
    $page.load(url, function(data) {
        console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim()    );
        console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
    });

I'll still get the initial footer, but won't get any of the other page contents:

![Broken - Screenshot][2]

----

I've tried the [**solution** here][3] to `eval()` the contents of every `script` tag, but that doesn't appear robust enough to actually load the page:




    jQuery.get(url,function(data) {
        var $page = $("<div>").html(data)
        $page.find("script").each(function() {
            var scriptContent = $(this).html(); //Grab the content of this tag
            eval(scriptContent); //Execute the content
        });
        console.log("%c✖: ", "color:red;",   $page.find(".page-title").text().trim());
        console.log("%c✔: ", "color:green;", $page.find("footer .details").text().trim());
    });

***Q: Any options to fully load a webpage that will scrapable over JavaScript?***

[1]: https://i.stack.imgur.com/ZYcde.png
[2]: https://i.stack.imgur.com/iU0iN.png
[3]: https://stackoverflow.com/a/8279719/1366033
[4]: https://api.jquery.com/jquery.get/
[5]: http://api.jquery.com/load/
[6]: http://backbonejs.org/