I&#39;m developing a spring backend for a react-based single page application where I&#39;m using react-router for client-side routing.

Beside the index.html page the backend serves data on the path `/api/**`.

In order to serve my index.html from `src/main/resources/public/index.html` on the root path `/` of my application I added a resource handler


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(&quot;/&quot;).addResourceLocations(&quot;/index.html&quot;);
    }

What I want to is to serve the index.html page whenever no other route matches, e.g. when I call a path other than `/api`.

How do I configure such catch-all route in spring?

Spring catch all route for index.html

How do you definitively detect whether or not the user has pressed the back button in the browser? 

How do you enforce the use of an in-page back button inside a single page web application using a `#URL` system? 

Why on earth don&#39;t browser back buttons fire their own events!?


How to Detect Browser Back Button event - Cross Browser

I&#39;ve read about SPA and it advantages. I find most of them unconvincing. There are 3 advantages that arouse my doubts.

***Question:*** *Can you act as advocate of SPA and prove that I am wrong about first three statements?*

                                  === ADVANTAGES ===

***1. SPA is extremely good for very responsive sites:***
&gt; Server-side rendering is hard to implement for all the intermediate
&gt; states - small view states do not map well to URLs.
&gt; 
&gt; Single page apps are distinguished by their ability to redraw any part
&gt; of the UI without requiring a server roundtrip to retrieve HTML. This
&gt; is achieved by separating the data from the presentation of data by
&gt; having a model layer that handles data and a view layer that reads
&gt; from the models.

*What is wrong with holding a model layer for non-SPA? Does SPA the only compatible architecture with MVC on client side?*

***2. With SPA we don&#39;t need to use extra queries to the server to download pages.***

*Hah, and how many pages user can download during visiting your site? Two, three? Instead there appear another security problems and you need to separate your login page, admin page etc into separate pages. In turn it conflicts with SPA architecture.*

***3.May be any other advantages? Don&#39;t hear about any else..***


                                === DISADVANTAGES ===

 1. Client must enable javascript.
 2. Only one entry point to the site.
 3. Security.


***P.S.*** I&#39;ve worked on SPA and non-SPA projects. And I&#39;m asking those questions because I need to deepen my understanding. No mean to harm SPA supporters. Don&#39;t ask me to read a bit more about SPA. I just want to hear your considerations about that.


Single Page Application: advantages and disadvantages

I&#39;ve been working on how to make a SPA crawlable by google based on google&#39;s [instructions](https://developers.google.com/webmasters/ajax-crawling/?hl=iw&amp;csw=1). Even though there are quite a few general explanations I couldn&#39;t find anywhere a more thorough step-by-step tutorial with actual examples.  After having finished this I would like to share my solution so that others may also make use of it and possibly improve it further. &lt;br/&gt; 
I am using `MVC` with `Webapi` controllers, and [Phantomjs](http://phantomjs.org/) on the server side, and [Durandal](http://durandaljs.com/) on the client side with `push-state` enabled; I also use [Breezejs](http://www.breezejs.com/) for client-server data interaction, all of which I strongly recommend, but I&#39;ll try to give a general enough explanation that will also help people using other platforms.&lt;br/&gt;


How to make a SPA SEO crawlable?

Is it necessary to use CSRF Protection when the application relies on stateless authentication (using something like HMAC)?

Example:

 - We&#39;ve got a single page app (otherwise we have to append the token on each link: `&lt;a href=&quot;...?token=xyz&quot;&gt;...&lt;/a&gt;`.

 - The user authenticates himself using `POST /auth`. On successful authentication the server will return some token.

 - The token will be stored via JavaScript in some variable inside the single page app.

 - This token will be used to access restricted URLs like `/admin`.

 - The token will always be transmitted inside HTTP Headers.

 - There&#39;s NO Http Session, and NO Cookies.

As far as I understand, there should(?!) be no possibility to use cross site attacks, because the browser won&#39;t store the token, and hence it cannot automatically send it to the server (that&#39;s what would happen when using Cookies/Session).

Am I missing something?

CSRF Token necessary when using Stateless(= Sessionless) Authentication?

I realize this is a basic question but I had no luck finding the answer elsewhere.

Is `store.dispatch` synchronous or asynchronous in `Redux` ?

In case it is asynchronous is there a possibility to add a callback after the action has been propagated as it is possible with `React` ?

Is store.dispatch in Redux synchronous or asynchronous

In fully server side based rendering (non Web 2.0), deploying server side code would directly update client side pages upon page reload. In contrast, in React based Single Page Application, even after React components were updated, there would be still some clients using old version of the components (they only get the new version upon browser reload, which should rarely happen) -&gt; If the pages are fully SPA, it&#39;s possible that some clients only refresh the pages after a few hours.

What techniques should be employed to make sure the old components versions are not used anymore by any clients?

Update: the API doesn&#39;t changed, only React Component is updated with newer version.

How to force update Single Page Application (SPA) pages?

Say I have a [single-page application](http://espy.github.io/ubersicht/) that uses a third party API for content. The app’s logic is in-browser only; there is no backend I can write to.

To allow deep-linking into the state of the app, I use `pushState()` to keep track of a few variables that determine the state of the app. (Note that Ubersicht’s public version doesn’t do this yet.) 

* **Variables:** `repos`, `labels`, `milestones`, `username`, `show_open` (bool), `with_comments` (bool), and `without_comments` (bool).
* **URL format:** `?label=label_1,label_2,label_3&amp;repos=repo_1…`. 
* **Values:** the usual suspects. Roughly, `[a-zA-Z][a-zA-Z0-9_-]`, or any boolean indicator.

So far so good. 

Now, since the query string can be a bit long and unwieldy and I would like to be able to pass around URLs like `http://espy.github.io/ubersicht/?state=SOMOPAQUETOKENTHATLOSSLESSLYDECOMPRESSESINTOTHEORIGINALVALUES#hoodiehq`, the shorter the better.

My first attempt was going to be using some zlib-like algorithm for [this](https://github.com/imaya/zlib.js). Then @flipzagging pointed to [antirez/**smaz**](https://github.com/antirez/smaz), which looks more suitable for short strings. ([JavaScript version here]( https://github.com/personalcomputer/smaz.js).)

Since `=` and `&amp;` are not specifically handled in the Javascript version (see [line 9 of the main lib file](https://github.com/personalcomputer/smaz.js/blob/master/lib/smaz.js#L9)), we might be able to tweak things a little there.

Furthermore, there is an option for encoding the values in a fixed table. With this option, the order of arguments is pre-defined and all we need to keep track of is the actual value. Example: turn `a=hamster&amp;b=cat` into `7hamster3cat` (length+chars) or `hamster|cat` (value + `|`), potentially before the smaz compression.

Is there anything else I should be looking for?


How to compress URL parameters

What is the difference in Angular 2 between the following snippets:

&lt;!-- language: html --&gt;
    &lt;div [class.extra-sparkle]=&quot;isDelightful&quot;&gt;
    &lt;div [ngClass]=&quot;{&#39;extra-sparkle&#39;: isDelightful}&quot;&gt;
    


Difference between [ngClass] vs [class] binding

When building SPA style applications using frameworks like Angular, Ember, React, etc. what do people believe to be some best practices for authentication and session management? I can think of a couple of ways of considering approaching the problem.

1. Treat it no differently than authentication with a regular web application assuming the API and and UI have the same origin domain. 

   This would likely involve having a session cookie, server side session storage and probably some session API endpoint that the authenticated web UI can hit to get current user information to help with personalization or possibly even determining roles/abilities on the client side. The server would still enforce rules protecting access to data of course, the UI would just use this information to customize the experience.

2. Treat it like any third-party client using a public API and authenticate with some sort of token system similar to OAuth. This token mechanism would used by the client UI to authenticate each and every request made to the server API.

I&#39;m not really much of an expert here but #1 seems to be completely sufficient for the vast majority of cases, but I&#39;d really like to hear some more experienced opinions.

SPA best practices for authentication and session management

I tried to update the angular CLI following [this][1], but now I can&#39;t run my app. When I try to run the command `ng serve`, it gives me this error:

    Could not find the implementation for builder @angular-devkit/build-angular:dev-server
    Error: Could not find the implementation for builder @angular-devkit/build-angular:dev-server
        at WorkspaceNodeModulesArchitectHost.resolveBuilder (C:\Users\Lupus\Documents\full-stack-projects\financial-app-ui\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js:49:19)
        at ServeCommand.initialize (C:\Users\Lupus\Documents\full-stack-projects\financial-app-ui\node_modules\@angular\cli\models\architect-command.js:135:55)
        at process._tickCallback (internal/process/next_tick.js:68:7)
        at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
        at startup (internal/bootstrap/node.js:283:19)
        at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

I have tried everything I could found.

 - I tried to manually install devkit with the command `npm install --save-dev @angular-devkit/build-angular`
 - I tried to run the command `npm i --only=dev`
 - I tried to run the commands

:

    npm install
    ng update
    npm update

- Removed the `node_modules` folder and the `package-lock.json` file and ran the commands all again.

Nothing worked. Running `ng v` gives me this:

    Angular CLI: 8.0.3
    Node: 10.15.0
    OS: win32 x64
    Angular: 8.0.1
    ... animations, cdk, common, compiler, compiler-cli, core, forms
    ... language-service, platform-browser, platform-browser-dynamic
    ... router
    
    Package                           Version
    -----------------------------------------------------------
    @angular-devkit/architect         0.13.9
    @angular-devkit/build-angular     0.13.9
    @angular-devkit/build-optimizer   0.13.9
    @angular-devkit/build-webpack     0.13.9
    @angular-devkit/core              7.3.9
    @angular-devkit/schematics        8.0.3
    @angular/cli                      8.0.3
    @ngtools/webpack                  7.3.9
    @schematics/angular               8.0.3
    @schematics/update                0.800.3
    rxjs                              6.5.2
    typescript                        3.4.5
    webpack                           4.29.0

And my package.json is like this: 

    {
      &quot;name&quot;: &quot;financial-app-ui&quot;,
      &quot;version&quot;: &quot;0.0.0&quot;,
      &quot;scripts&quot;: {
        &quot;ng&quot;: &quot;ng&quot;,
        &quot;start&quot;: &quot;ng serve&quot;,
        &quot;build&quot;: &quot;ng build&quot;,
        &quot;test&quot;: &quot;ng test&quot;,
        &quot;lint&quot;: &quot;ng lint&quot;,
        &quot;e2e&quot;: &quot;ng e2e&quot;
      },
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;@angular/animations&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/cdk&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/common&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/compiler&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/core&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/forms&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/platform-browser&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/platform-browser-dynamic&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/router&quot;: &quot;^8.0.1&quot;,
        &quot;core-js&quot;: &quot;^2.6.9&quot;,
        &quot;font-awesome&quot;: &quot;^4.7.0&quot;,
        &quot;primeicons&quot;: &quot;^1.0.0&quot;,
        &quot;primeng&quot;: &quot;^7.1.3&quot;,
        &quot;rxjs&quot;: &quot;~6.5.2&quot;,
        &quot;tslib&quot;: &quot;^1.10.0&quot;,
        &quot;zone.js&quot;: &quot;~0.9.1&quot;
      },
      &quot;devDependencies&quot;: {
        &quot;@angular-devkit/build-angular&quot;: &quot;^0.13.9&quot;,
        &quot;@angular/cli&quot;: &quot;^8.0.3&quot;,
        &quot;@angular/compiler-cli&quot;: &quot;^8.0.1&quot;,
        &quot;@angular/language-service&quot;: &quot;^8.0.1&quot;,
        &quot;@types/jasmine&quot;: &quot;~2.8.8&quot;,
        &quot;@types/jasminewd2&quot;: &quot;~2.0.3&quot;,
        &quot;@types/node&quot;: &quot;~8.9.4&quot;,
        &quot;codelyzer&quot;: &quot;~4.5.0&quot;,
        &quot;jasmine-core&quot;: &quot;~2.99.1&quot;,
        &quot;jasmine-spec-reporter&quot;: &quot;~4.2.1&quot;,
        &quot;karma&quot;: &quot;~4.0.0&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;~2.2.0&quot;,
        &quot;karma-coverage-istanbul-reporter&quot;: &quot;~2.0.1&quot;,
        &quot;karma-jasmine&quot;: &quot;~1.1.2&quot;,
        &quot;karma-jasmine-html-reporter&quot;: &quot;^0.2.2&quot;,
        &quot;protractor&quot;: &quot;~5.4.0&quot;,
        &quot;ts-node&quot;: &quot;~7.0.0&quot;,
        &quot;tslint&quot;: &quot;~5.11.0&quot;,
        &quot;typescript&quot;: &quot;~3.4.5&quot;
      }
    }

Does anyone have any other suggestion?

  [1]: https://www.npmjs.com/package/@angular/cli#updating-angular-cli


Could not find the implementation for builder @angular-devkit/build-angular:dev-server on ng serve command

I have classic web application rendered on server. I want to create admin panel as single page application in React. I want to server admin panel from https://smyapp.example.com/admin/. I try to use `create-react-app` but it assumes that i serve SPA from root URL. How should I configure `create-react-app` to serve app from `&quot;admin&quot;` subdirectory? In documentation I found `&quot;homepage&quot;` property but if I properly understand it requires complete url. I can&#39;t give complete url because my app is deployed in few environments.

How should I configure create-react-app to serve app from subdirectory?

I&#39;m using a Vue.js computed property but am running into an issue: The computed method _IS_ being called at the correct times, but the value returned by the computed method is being ignored!

My method

    computed: {
        filteredClasses() {
            let classes = this.project.classes
            const ret = classes &amp;&amp; classes.map(klass =&gt; {
                const klassRet = Object.assign({}, klass)
                klassRet.methods = klass.methods.filter(meth =&gt; this.isFiltered(meth, klass))
                return klassRet
            })
            console.log(JSON.stringify(ret))
            return ret
        }
    }

The values printed out by the `console.log` statement are correct, but when I use `filteredClasses` in template, it just uses the _first cached value_ and never updates the template. This is confirmed by Vue chrome devtools (`filteredClasses` never changes after the initial caching).

Could anyone give me some info as to why this is happening?

Project.vue

    &lt;template&gt;
    &lt;div&gt;
        &lt;div class=&quot;card light-blue white-text&quot;&gt;
            &lt;div class=&quot;card-content row&quot;&gt;
                &lt;div class=&quot;col s4 input-field-white inline&quot;&gt;
                    &lt;input type=&quot;text&quot; v-model=&quot;filter.name&quot; id=&quot;filter-name&quot;&gt;
                    &lt;label for=&quot;filter-name&quot;&gt;Name&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col s2 input-field-white inline&quot;&gt;
                    &lt;input type=&quot;text&quot; v-model=&quot;filter.status&quot; id=&quot;filter-status&quot;&gt;
                    &lt;label for=&quot;filter-status&quot;&gt;Status (PASS or FAIL)&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col s2 input-field-white inline&quot;&gt;
                    &lt;input type=&quot;text&quot; v-model=&quot;filter.apkVersion&quot; id=&quot;filter-apkVersion&quot;&gt;
                    &lt;label for=&quot;filter-apkVersion&quot;&gt;APK Version&lt;/label&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col s4 input-field-white inline&quot;&gt;
                    &lt;input type=&quot;text&quot; v-model=&quot;filter.executionStatus&quot; id=&quot;filter-executionStatus&quot;&gt;
                    &lt;label for=&quot;filter-executionStatus&quot;&gt;Execution Status (RUNNING, QUEUED, or IDLE)&lt;/label&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div v-for=&quot;(klass, classIndex) in filteredClasses&quot;&gt;
            &lt;ClassView :klass-raw=&quot;klass&quot;/&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/template&gt;
     
    &lt;script&gt;
    import ClassView from &quot;./ClassView.vue&quot;
     
    export default {
        name: &quot;ProjectView&quot;,
     
        props: {
            projectId: {
                type: String,
                default() {
                    return this.$route.params.id
                }
            }
        },
     
        data() {
            return {
                project: {},
                filter: {
                    name: &quot;&quot;,
                    status: &quot;&quot;,
                    apkVersion: &quot;&quot;,
                    executionStatus: &quot;&quot;
                }
            }
        },
     
        async created() {
            // Get initial data
            const res = await this.$lokka.query(`{
                project(id: &quot;${this.projectId}&quot;) {
                    name
                    classes {
                        name
                        methods {
                            id
                            name
                            reports
                            executionStatus
                        }
                    }
                }
            }`)
     
            // Augment this data with latestReport and expanded
            const reportPromises = []
            const reportMeta     = []
            for(let i = 0; i &lt; res.project.classes.length; ++i) {
               const klass = res.project.classes[i];
               for(let j = 0; j &lt; klass.methods.length; ++j) {
                   res.project.classes[i].methods[j].expanded = false
                   const meth = klass.methods[j]
                   if(meth.reports &amp;&amp; meth.reports.length) {
                       reportPromises.push(
                           this.$lokka.query(`{
                               report(id: &quot;${meth.reports[meth.reports.length-1]}&quot;) {
                                   id
                                   status
                                   apkVersion
                                   steps {
                                       status platform message time
                                   }
                               }
                           }`)
                           .then(res =&gt; res.report)
                        )
                        reportMeta.push({
                            classIndex: i,
                            methodIndex: j
                        })
                    }
                }
            }
     
            // Send all report requests in parallel
            const reports = await Promise.all(reportPromises)
     
            for(let i = 0; i &lt; reports.length; ++i) {
               const {classIndex, methodIndex} = reportMeta[i]
               res.project.classes[classIndex]
                          .methods[methodIndex]
                          .latestReport = reports[i]
           }
     
           this.project = res.project
     
           // Establish WebSocket connection and set up event handlers
           this.registerExecutorSocket()
       },
     
       computed: {
           filteredClasses() {
               let classes = this.project.classes
               const ret = classes &amp;&amp; classes.map(klass =&gt; {
                    const klassRet = Object.assign({}, klass)
                    klassRet.methods = klass.methods.filter(meth =&gt; this.isFiltered(meth, klass))
                    return klassRet
                })
                console.log(JSON.stringify(ret))
                return ret
            }
        },
     
        methods: {
            isFiltered(method, klass) {
                const nameFilter = this.testFilter(
                    this.filter.name,
                    klass.name + &quot;.&quot; + method.name
                )
                const statusFilter = this.testFilter(
                    this.filter.status,
                    method.latestReport &amp;&amp; method.latestReport.status
               )
               const apkVersionFilter = this.testFilter(
                   this.filter.apkVersion,
                   method.latestReport &amp;&amp; method.latestReport.apkVersion
               )
               const executionStatusFilter = this.testFilter(
                   this.filter.executionStatus,
                   method.executionStatus
               )
               return nameFilter &amp;&amp; statusFilter &amp;&amp; apkVersionFilter &amp;&amp; executionStatusFilter
           },
           testFilter(filter, item) {
               item = item || &quot;&quot;
               let outerRet = !filter ||
               // Split on &#39;&amp;&#39; operator
               filter.toLowerCase().split(&quot;&amp;&quot;).map(x =&gt; x.trim()).map(seg =&gt;
                   // Split on &#39;|&#39; operator
                   seg.split(&quot;|&quot;).map(x =&gt; x.trim()).map(segment =&gt; {
                       let quoted = false, postOp = x =&gt; x
                       // Check for negation
                       if(segment.indexOf(&quot;!&quot;) === 0) {
                           if(segment.length &gt; 1) {
                               segment = segment.slice(1, segment.length)
                               postOp = x =&gt; !x
                           }
                       }
                       // Check for quoted
                       if(segment.indexOf(&quot;&#39;&quot;) === 0 || segment.indexOf(&quot;\&quot;&quot;) === 0) {
                           if(segment[segment.length-1] === segment[0]) {
                               segment = segment.slice(1, segment.length-1)
                               quoted = true
                           }
                       }
                       if(!quoted || segment !== &quot;&quot;) {
                           //console.log(`Item: ${item}, Segment: ${segment}`)
                           //console.log(`Result: ${item.toLowerCase().includes(segment)}`)
                           //console.log(`Result&#39;: ${postOp(item.toLowerCase().includes(segment))}`)
                       }
                       let innerRet = quoted &amp;&amp; segment === &quot;&quot; ?
                           postOp(!item) :
                           postOp(item.toLowerCase().includes(segment))
     
                       //console.log(`InnerRet(${filter}, ${item}): ${innerRet}`)
     
                       return innerRet
                   }).reduce((x, y) =&gt; x || y, false)
               ).reduce((x, y) =&gt; x &amp;&amp; y, true)
     
               //console.log(`OuterRet(${filter}, ${item}): ${outerRet}`)
               return outerRet
           },
           execute(methID, klassI, methI) {
               this.project.classes[klassI].methods[methI].executionStatus = &quot;QUEUED&quot;
               // Make HTTP request to execute method
               this.$http.post(&quot;/api/Method/&quot; + methID + &quot;/Execute&quot;)
               .then(response =&gt; {
               }, error =&gt;
                   console.log(&quot;Couldn&#39;t execute Test: &quot; + JSON.stringify(error))
               )
           },
           registerExecutorSocket() {
               const socket = new WebSocket(&quot;ws://localhost:4567/api/Executor/&quot;)
     
               socket.onmessage = msg =&gt; {
                   const {methodID, report, executionStatus} = JSON.parse(msg.data)
     
                   for(let i = 0; i &lt; this.project.classes.length; ++i) {
                       const klass = this.project.classes[i]
                       for(let j = 0; j &lt; klass.methods.length; ++j) {
                           const meth = klass.methods[j]
                           if(meth.id === methodID) {
                               if(report)
                                   this.project.classes[i].methods[j].latestReport = report
                               if(executionStatus)
                                   this.project.classes[i].methods[j].executionStatus = executionStatus
                               return
                           }
                       }
                   }
               }
           },
           prettyName: function(name) {
               const split = name.split(&quot;.&quot;)
               return split[split.length-1]
           }
       },
     
       components: {
           &quot;ClassView&quot;: ClassView
       }
    }
    &lt;/script&gt;
     
    &lt;style scoped&gt;
    &lt;/style&gt;

Vue.js computed property not updating

I am currently writing a web application using angularjs, but I think this question applies to any client-side javascript framework that does routing on the client side ([as angular does][1]).

In a single-page app, what is the right way to deal with wrong URLs? 

Looking at a few major sites, I see that gmail will redirect to the inbox if you type any random URL below https://mail.google.com/mail/. This happens server-side (with an http 300 code) or client-side, depending on whether the wrong path is before or after the # character. On the other hand, twitter shows a real HTTP 404 for any invalid URL. A third option would be to show a &quot;soft&quot; 404, a purely client-side error page. 

These solutions seem appropriate for different situations. Twitter wants the links to twitter users and tweets to be real links, so people can share them, post them in news articles, etc, so it is important that invalid links be recognized as such (if I have a broken link to a tweet in my website, a simple crawl will tell me that). In gmail, on the other hand, you are not expected to share links into your inbox, and I&#39;m not even sure if the links are really permanent/persistent: it seems the url updating mostly serves the purpose of browser history navigation within the single-page app. The third approach of giving soft errors might be appropriate for situations similar to gmail, but where there is no reasonable &quot;default&quot; page. 

After this long introduction, here are some specific questions:

 - Is it ever acceptable to give a &quot;soft&quot; error page instead of a 404 error, or should a single-page app always redirect to a real 404 if a url is invalid?
 - Gmail&#39;s code may be perfectly bugfree, but if it did have a bug leading to invalid links that end up redirecting back to the inbox, that might be even more confusing for users than an error page. For most web apps out there, that are not as well tested as gmail, would it be better to show an error page?
 - To implement real 404s for single-page apps, it seems necessary to duplicate the routing logic on the server-side. Is there any way around this?
 - When redirecting to a 404, I think the user should be able to see the URL that caused the error, possibly in the URL bar. With the html5 history api, I think this can be accomplished by simply triggering a reload of the current page (with the wrong url), combined with the server-side routing mentioned above. For browsers that do not support this or when using hashbang notation, this does not seem possible. What&#39;s the best way to support all browsers?


  [1]: https://docs.angularjs.org/api/ngRoute

All Single Page-Application Solutions on Gang of Coders

Total of 14 Single Page-Application Solutions