
Show HN: A minimal setup for React/ES6 sites with a Firebase back end - WalterSear
https://github.com/Jon-Biz/simple-static-react-firebase
======
dvcrn
Apologies for the question but what benefits do I get if I build on firebase?

From the people I talked to it seems that the main audience for firebase is
mobile engineers that either don't have the skillset or the time to learn how
to build a backend system. Most people I talked to also told me they wouldn't
use firebase if they could build a backend.

~~~
mazlix
In addition to the other comments, by only needing to write frontend code you
can also host your website much cheaper and scalably (via something like
amazon S3 & CDN). You'd pay more like several pennies for 100's of users
(ignoring any scaling costs w/ Firebase) rather than a min of ~$10/mo.

~~~
WalterSear
Fwiw, Firebase also provides static file hosting.

I've added an issue to document the process for uploading to firebase after
building a production version.

------
kylestlb
Nicely done! I did a similar thing with the VueJS/horizon.io combo. It's a
little rough around the edges - I just wanted to have some sort of scaffold
for personal stuff. Link is [https://github.com/kylestlb/vuex-horizon-
scaffold](https://github.com/kylestlb/vuex-horizon-scaffold) for anyone
interested. And yes, there are tons of devDependencies so I wouldn't call mine
minimal I suppose :)

~~~
mercer
Awesome! I've been using horizon.io in combination with React (and Redux,
because I'm all hip and stuff!) for 'scratch-my-own-itch' projects and on the
whole I've been very happy with the process.

While there are some obvious limitations to using Horizon, it's incredibly
convenient for quickly getting something working that 1) is online, public-
facing, but secure (OAuth), and 2) provides a CRUD back-end very quickly with
little work.

I've run into a bug or two so far, and the documentation isn't entirely up to
snuff, but I can highly recommend Horizon for some use cases.

Specifically, Horizon is great out-of-the-box if you're creating an app where
there's authenticated users who can do pretty much anything to entities owned
by themselves, and where a client-side interface suffices. A todo app, or
journalling app would be a typical example: the user can do whatever he
pleases with his own todos/journal-entries, provided that he's authenticated.

Any greater complexity server-side probably needs an Express app (or Hapi,
Koa, etc.), but there's really quite a lot you can do with a 'vanilla' Horizon
server.

~~~
yazr
Is there any source/sample you can share ?

I am starting on a big SPA project. react+horizon+rethinkdb seem ideal for the
read-only parts, but i worried about how to integrate some business logic
which will require relational transactions on the backend

~~~
kylestlb
I think in that case you can just build a separate express API that talks to
the same rethinkdb instance, no? After all, horizon is basically just a front-
end driver that wraps rethinkdb changefeeds.

~~~
mercer
Yup. It should be pretty easy to set up an Express server that uses Horizon
for some of the simpler stuff, and your own routes/logic for more complicated
work.

~~~
yazr
Thanks both.

------
xuejie
[https://github.com/Jon-Biz/simple-static-react-
firebase/blob...](https://github.com/Jon-Biz/simple-static-react-
firebase/blob/master/package.json#L21-L32)

Sorry, but with those many dependencies, I could hardly call that minimal.

~~~
chvid
Should some of those not be dev-dependencies?

~~~
pietro
Yes, the ones related to Babel and Webpack.

~~~
diggan
Well, in fact all of them should be devDependencies because the artifact of a
build would contain everything, none of those things would be needed at
runtime.

------
bshimmin

       /pubic/
    
       output directory. Put your assets in here next to the compiled js and css.
    

Splendid!

~~~
WalterSear
:groan:

I have four of these little repos now, all forked from each other, all with
that spelling mistake, no doubt.

------
ben_jones
Has anyone here dealt with Firebase's authentication / authorization model in
production?

~~~
nc
Yup, it's pretty solid, no issues to report.

~~~
dsp1234
Except that the default is read/write for all users[0]. This starter kit
doesn't mention security at all, even just to warn the user about full
read/write.

[0] -
[https://www.firebase.com/docs/security/quickstart.html](https://www.firebase.com/docs/security/quickstart.html)

"By default, your app has rules which grants every request full read and write
permissions to your database"

~~~
WalterSear
Thanks. Let me make an issue to update the docs on that.

I've been using Firebase a while, and so I didn't fully think through the
experience for users unfamiliar with firebase.

By necessity, this repo use of firebase is somewhat opinionated. I intend to
add comments and docs to explain the architecture and how to set it up to work
with different kinds of persistent data (ie - shared and public data as well
as user related docs). And, of course, to set up secure separate docs for
different users.

------
hiimnate
How is it not a security issue to serve the API key in `public/auth.html`?

~~~
WalterSear
It's a public key, if I'm not mistaken.

------
conqrr
Does this come with Server side rendering out of the box?

~~~
WalterSear
No.

It's intended for static hosting, where there is no server-side rendering
(much of the point of firebase). At the moment it just does concatenation and
minification, but the files are rendered on the client.

This isn't ideal, obviously - it's still unclear to me whether Google
successfully crawls ajax sites. I would like to add build-time rendering, but
it's of debatable value for static sites, since obviously, it can't be
dynamically generated.

The hack for now would be to hard code 'content' into the React render target
`<div>`, so that it lands immediately.

------
mandarlimaye
Demo Pls

~~~
WalterSear
I'm making an issue. I'll host one on firebase shortly.

