Hyperapp: Router - what code do I need on the server?

[cdeutmeyer]

First, I want to say thank you!!! I'm really loving HyperApp!

I've implemented the default router client side and it works great.
But what happens if someone _enters_ the application with a URL containing one of the routes?

My express server gets confused because I'm only serving the index.html at the root of the application.
How do I connect it to the HyperApp routing?

Here is my server code.

`var express = require('express')
var path = require('path');
var app = express()

app.use(express.static(path.join(__dirname, '/dist')));

app.get('/', function (req, res) {
res.sendFile('index.html');
});

app.listen(3000)`

Thanks!

[tunnckoCore]

Server-side rendering is not supported currently. But we have https://github.com/hyperapp/hyperapp/pull/28. Until then you can try to do it manually or use mich-to-html for example, but that means you should traverse the current virtual dom to change tag to tagName and data to properties.

[FlorianWendelborn]

@tunnckoCore I think @cdeutmeyer is not talking about server-side rendering, but about serving /* instead of only /.

@cdeutmeyer You have to serve index.html on all routes that your application uses. A simple /some-route/* should work if you have multiple sub-routes. Make sure that your <script/> uses an absolute path so a subfolder won't confuse it.

[jorgebucaran]

@cdeutmeyer But what happens if someone enters the application with a URL containing one of the routes?

Hi! 👋 I'm glad you're having fun with HyperApp!

If your client application handles all your routes, you could make your server to redirect all /* routes to index.html, then HyperApp's router will do what it's supposed to do.

Does that make sense?

[rbiggs]

@jbucaran @tunnckoCore how about support for #! routes. That's usually what I'd expect for an SPA with routing. Like Director, etc.

[FlorianWendelborn]

@rbiggs I don't see any reason to use this anymore except if you want to support IE9.

[rbiggs]

Well there are a lot of guys stuck support IE8 & 9 because banks, etc. use it. The other day in my bank I saw that they had computer terminals still running XP 😶

[jorgebucaran]

@rbiggs Hash-based routing was originally baked into the router, but I removed it, because I felt it was hypocritical to support some of IE9 quirks, but not all the quirks.

Now, in hindsight, I realize that hash-based routing is not really an IE9 quirk, but just another way to do SPA routing.

Using the History API is still simpler and _correct_ (as in not a hack), but I can see its value. There's no reason to bring it back right away, but the router still needs work, so we could put hash-based routing back into it in the future.

By hash-based routing I mean /#.

! has a few other characteristics I didn't address in the original implementation:

• https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

[rbiggs]

To tell you the truth, I haven't really bothered with the router because I was having so many problems with setLocation running on localhost. I could only get it to run when using Browserify. I used to do a lot with Express, but now I'm pretty much just doing front end. However, there should be some simple way to have our cake and eat it too. 🍰🍽

[tunnckoCore]

you just need pushstate server. for fast prototyping i use budo, cuz it support pushstate behind a flag. it use browserify.

[cdeutmeyer]

@dodekeract & @jbucaran I ended up adjusting the server code based on your suggestions and it works great. I'm going to need some routes for a data access API later so I wont be able to use /* once that's in place but I'm pretty sure I'll just need to serve index.html on any of the routes that are handled client side.
Below is the adjusted server code in case it helps anyone else.. Thanks again for your help!

var express = require('express')
var path = require('path');
var app = express()

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000)

[jorgebucaran]

@cdeutmeyer Sounds right! If anything else comes up, just ask away :)

[lukejacksonn]

I made a very simple node module for serving apps like this (SPA architecture with frontend routing, that expects all path requests be pointed to index.html). I use it in most of my project node scripts like:

serve : 'http-server-spa build index.html 8080'

The module is tiny with one dep (mime) and can be found here