Frontend website strategy

[metakermit]

Really like the concepts inside responder! I'm wondering what would be the strategy for integrating frontend websites? I see webpack is mentioned in the README. Would something like https://parceljs.org/ also be interesting? Since the choice of frontend framework / tooling is pretty tangental to other things in responder, would it maybe make sense to just round up a few example folders or cookiecutters and link them up? E.g.

• responder + webpack + react
• responder + parcel + react
• responder + angular

One thing that would make sense to standardise IMHO would be the build command in package.json. E.g. always have an npm run build command for building the frontend. That way a standard responder Heroku buildpack / Dockerfile could be used for deploying the webapp no matter which frontend stack is used.

[kennethreitz]

I like that.

[kennethreitz]

running 'npm build' that is.

[metakermit]

OK, great! I'll see if I can cook up a nice working example with Parcel + React and then we can talk about an official buildpack / Dockerfile or something that would run npm install / npm run build if there's a package.json and therefore encode this standard 🙂.

[metakermit]

As a first baby step, I've made a very minimal React + Parcel example featuring:

• ES6 modules
• image importing
• frontend routing (using React-Router)

To deploy it's enough to do npm install & npm run build which packages everything in a dist folder ready for serving.

Here's the code:

https://github.com/metakermit/responder-react

I haven't touched any Responder stuff so far, but I see that there are going to be some challenges:

• it should be possible to serve static files on / instead of static/
• / should serve index.html
• all urls not found in Responder's own routes should be forwarded to index.html (which would be needed for frontend routing)

Starlette has options for some of these things, but I think they aren't all exposed in Responder.

As a side-note, I did solve some of these issues with Django & Whitenoise here, so I have some ideas for how these things could be solved. Not sure what the best approach would be in Responder architecture-wise.

[kennethreitz]

I have a prototype available here: #72

[kennethreitz]

@metakermit off master, you can now run static from /, but that disables all other routes;

api = responder.API(static_route="/")

[metakermit]

Wow, that's a great start. I'll continue working on this tonight and see if I can get the cli to build the frontend if it's there (e.g. a package.json is present) and copy whatever's in dist to the static folder.

[kennethreitz]

Now, off master, if you do this:

api.add_route("/", static=True)

static/index.html's content will be the response to /.

[kennethreitz]

Now, off master, if you have a static=True route, all routes will be forwarded to static index.html responder.

[kennethreitz]

this still leaves

it should be possible to serve static files on / instead of static/

but I think that's a small workaround, for now.

[metakermit]

@kennethreitz Perfect, that solves most of the SPA requirements, I think 🎉 I'll test it and if it works, we can later see if we want to have some order of precedence in the future, e.g. in the static=True mode:

1. check responder routes first (e.g. for some /api/users/ endpoints etc.)
2. if there aren't any, redirect everything to index.html to handle
3. the frontend then checks its routing and is responsible for the 404 page etc.

[kennethreitz]

@metakermit that's exactly the flow that's in place.

[kennethreitz]

I don't know much about single-page web apps, but this will always result in a 200 response from the server, even if it appears as though it's 404.

[kennethreitz]

unless there's a specific 404 view defined

[kennethreitz]

cool, i'll ship it

[kennethreitz]

v0.1.0 released, which includes this.

[metakermit]

Sure, I think that's fine. I think the way it's done is that if the frontend doesn't find its template, it renders a 404 page. Traditionally this is done by setting nginx to forward everything to index.html, but with Responder we don't need nginx 🙂

Awesome! 🚀

[metakermit]

Just an update that I've managed to update https://github.com/metakermit/responder-react to seamlessly deploy to Heroku with everything working as expected 🎉

It took some custom Parcel flags, a custom Heroku build step and an app.json that configures multiple buildpacks, but now you can simply hit that "Deploy to Heroku" button and you have a super smooth Responder + React SPA experience 🙂