What services do you use to build your web app?
I'm curious as to what services people use to build web apps. It seems like you would want something that you can get started quickly with, but also scales nicely in terms of price.
Examples of common services:
Web hosts: Heroku, Zeit, Netlify, etc.
Backend: Serverless, Heroku, AWS, Linode, DigitalOcean, etc.
Managed databases: DigitalOcean, MongoDB Atlas, Heroku, etc.
Object storage: Amazon S3, Linode, etc.
There are also all-in-one frameworks like Firebase or AWS Amplify.
I'm especially interested in what people use to host their databases and to store files (e.g. user uploaded content like images, etc.)
Trending on Indie Hackers
At Wagglio (solo founder) I'm using:
What's your experience with FaunaDB been like?
NextJS + Fauna has been my next stack to test out but I've been weary of calling FaunaDB directly from frontend. Are you calling FauanaDB from frontend via GraphQL? If so how do you handle security for those api calls?
From what I've read if someone gets your key from the frontend code they could make calls and do whatever they want... scares me a bit.
There is nothing to be scared of. You would anyway get a token that a clients store and send over with each an every request to perform actions that need authentication. Any key could be stolen and used by an attacker if no necessary client-side security precautions have been taken. FaunaDB would have nothing to do with that. With FaunaDB you are removing the need to manage this process including RBAC/ABAC which is built into FaunaDB. This is what makes it interesting!
Forgot to answer the first question! As for what's my experience with FaunaDB the answer below goes a bit into that!
Yep, all Apollo GraphQL calls are via the client. Currently the API calls are not secured, since I'm using a key that, as you say, is easily accesible from the client.
Since I haven't launched, this is fine for now. But my objective is to handle authentication directly with FaunaDB instead of Auth0 (my current OAuth provider).
Here's an example of handling authentication with FaunaDB in a very nice way: https://app.fauna.com/tutorials/authentication
I haven't done this yet because first, I need to learn a couple of things from the docs, and second because I haven't found a way to do this with Graphql + FaunaDB. The second option I see is handling authentication via the context and JWTs.
As for other security concerns, Graphql gives quite a lot of power to the client, so other precautions have to be taken, like these: https://blog.apollographql.com/securing-your-graphql-api-from-malicious-queries-16130a324a6b
Max Stoiber's article is a must read for client driven apps.
As for what you mention:
This is normal in client driven apps, the key here is fragmenting the access inside the DB so that the current user can only access and modify its own data.
Here's a very great read about it: https://fauna.com/blog/data-security-in-the-age-of-cloud-native-apps
For Wagglio, I'm planning to implement Object Access Control. But this is dependent on a FaunaDB-handled authentication, so I'm missing that part. But that's the objective.
I'm looking to potentially use this exact stack too (but still deciding between Fauna and Arangodb...the latter having some nice built-in geospatial and search capabilities as well as liking AQL over FQL a little more). Also can't decide between styled components and TailwindCSS.
Here's a good article on the ABAC + GraphQL system for Fauna for securing those queries:
https://fauna.com/blog/abac-graphql
Would love to know if you've run into any hiccups/limitations with your stack so far. I like the idea of basically using the functions within Fauna as stored procedures but curious if there are things you can't do there. On the flip, Arango has Foxx which is a built-in web server which can handle Graphql as well as role-based auth with its core drivers in several different languages.
Things I'd have to figure out for my use case in Fauna are:
Looking forward to the journey though!
Did you find any related to ranking?
Also can you please share how good is Arangodb over fauna, firestore?
Thank you for the article! Very helpful indeed
Not a limitation per se, it's just that I haven't found the time to dwell in their FQL language. That may be the only big barrier to entry with them, as every customization for mutations and queries you'd need have to be made with it. As far as I've read it seems all issues and usual problems are solved by using FQL, so there's that.
--
For styling I'm using Emotion+TailwindCSS, the best of both! Here's an official example for it: https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss-emotion
In short, you'd be using babel macros to inject the TailwindCSS classes via de CSS prop from emotion. This is how it looks:
Since the CSS prop receives an array and superposes the styles in order, you can play around with ternary operators to apply group of styles conditionally, like this:
Or even make functions with the CSS prop to interpolate however you want, making them reusable (if you want to) like this:
--
Regarding ranking, even though I'm not versed with Postgres, I believe this can be achieved by creating a rank field in the schema for the types you want, and then filter them or order them in the client, once you query them. Totally uncertain of what the objective is, but throwing an idea.
Best of luck!
Thanks!
Here's something else you may find useful:
https://github.com/vimota/next.js/tree/canary/examples/with-cookie-auth-fauna
Wow that's perfect! Thanks!
I've been using graph.cool but it seems like they stopped maintaining it. A developer buddy and mine did some research on alternatives. How are you liking FaunaDB? He ended up using Hasura. I am still using graph.cool
Yep I noticed graph.cool was terminated too! Tried creating an account and couldn't do it!
I'm loving FaunaDB, the moment I imported my schema all the methods were automatically created, that's a big time saver if you ask me! There are other things created automatically.
My biggest problem with Graphql and FaunaDB is learning FQL, their query language, but seems easy enough from what I've seen (gotta make a dive deep there).
It's a problem because when you try to optimize your queries and mutations you'll definitely end up with something very unique to your use case, something FaunDB can't create by it self. So that's where FQL comes in, if you need something unique to handle mutations or queries, that's your way to go.
For now I haven't optimized the queries and there's a n+1 problem that needs fixing lurking in the code base (lol), but once I learn FQL that'll be squashed.
Another thing I love is its scalability and pay as you go model, I don't have to worry about provisions like I did when I used DynamoDB, so that's the biggest of pluses for me.
I use everything on Digital Ocean from the app to database. Only image storage I use Google Cloud for pricing. I wanted to minimize the services so I can monitor them easily. I used to use Heroku but it felt tricky to remember all the Heroku specific commands. My thinking was that it'd be a lot easier to move from DigitalOcean to more solid services like AWS when (if) it scales.
Nextjs + Firebase + Firestore + Netlify
I've recently been looking into NextJS
How do you handle Auth? (If you do)
Is there a way to set sessions or something? Haven't been able to find very good answers or guides on it. I typically build true SPAs so Auth + SSR is new territory.
I use tokens for my Next.js apps. I am using apollo and graphQL. So upon login, I have a mutation that inserts the user or finds the user then sends back a token. Having Next.js doesn't change anything in that process.
I used react with firebase for auth. Firebase works quite well. I have created a boilerplate for it: www.reactmilkshake.com. I'm now working on a similar implementation but with Next and I'm pretty happy with it so far. Next gives you SSR pretty much out of the box. They also have great documentation so if you are familiar with React I definitely recommend it.
Frontend: ReactJS app securely hosted using AWS CloudFront
Backend: AWS Amplify
curious why not Amplify for the frontend too.
Amplify is more for easily creating serverless resources in AWS and connecting those resources to your application. They have some out of the box frontend components that you can use (ex. full auth page that connects to Cognito) but I haven't found these components flexible enough.
I would just like to echo the lack of flexibility in components. I am building my app using clojurescript and needed to drop down into the eventing system to get the behavior I wanted from Amplify JS.
I'm using it to deploy react apps and it's quite flexible. Connects with the repo directly and deploys on every push.
Yup! That is definitely useful and Amplify makes it easy to do.
I'm using:
Another "boring as I can be" tech stack:
http://boringtechnology.club/
Highly recommend, the Terraform Cloud offering from Hashicorp to deploy your infra-as-code.
I'm currently on Digital Ocean using the MeteorJS Framework. I guess MeteorJS is not the shiny new thing that it was five years ago but I really like the framework a lot. And they build it in such a way that it is super flexible with access to the entire NPM ecosystem, whatever client side framework you may want, etc...
I'll be standing up MongoDB soon and probably just host it myself off Digital Ocean also. I'm so small at this point I can probably jam it onto my app VM and then move it later when I start growing.
Framework: React
Hosting: Firebase
Database: Firebase's firestore
Auth: Firebase's auth
Design/Prototyping: Figma
Github
Best serverless stack IMO
For beefier projects; Django, AWS S3 for static storage.
I've started to enjoy hosting with Heroku but it did introduce a couple of hiccups in regards to media storage (if you do not use a 3rd party like S3).
Playing with carrd.co for squeeze pages and such
For lighthouse-metrics.com I'm using:
For https://storycreatorapp.com/ (Solo Founder also):
I'm using
Let me fill this for Memo App (https://usememo.com)
Just digital ocean. No database or user generated content.
This topic just shows the vast amounts of options developers have these days and the sheer amount of tech available to learn and keep on top of!
How do fellow developers cope with it all? Do you stick with specific stacks only? At what point do you choose to adopt the "shiny new thing"?
They way to avoid fatigue is by understanding what product YOU are building and it's needs. Then as you see new technologies you know exactly if it offers what YOUR product needs and you can quickly move on if it doesn't
Thanks for your response. I understand what you mean but the point I was trying to convey is that any problem requiring a coded solution can be achieved by any programming language.
If you know PHP, JavaScript and HTML you will think of solutions within these methods.
But these can be achieved with Node.js on the backend and it might actually be the best option, but unless you have invested time to learning it then you just don't know.
And furthermore it might take you longer to actually build the thing, so in terms of getting something out there asap one might just fall back to their comfort zone.
Of course with the array of tech out there it's impossible to keep up with all the new frameworks and options out there. You need to pick and choose what to actually explore and make a decision if it is worth investing time to learn it for using in future.
If you have good architecture it should be easy to interchange parts. The paradigm is to have detachable systems (microservices etc). So ideally you just follow your gut and see what tool gets the job done the best. Then if you're having a serious pain with one of your systems and a newer better one comes out, you kill and migrate a small part of your system. The idea is that once migrated it leaves no effect on the other parts.
So what I am saying is pick a tool that gets the job done the fastest so that you can get your thing out there, then adapt. If your system is well designed at first, then adapting shouldn't mean complete rewrites of the whole system.
Thanks for this. Of course writing your system initially to be able to take things out and plug things in is much easier said than done since your project scope can drastically change and you progress :)
This is what we use at octopulse.io for our web app:
Web host: Google Cloud
Frontend: ReactJs & Redux
Backend: Node.js
Databases: MariaDb & ElasticSearch
Frontend: Nuxt(VueJS App) hosted statistically on Netlify's CDN
Backend - Waves Blockchain(for decentralised apps) or SailsJS(Node) hosted on Heroku
Web hosts: DigitalOcean
Backend: Express.js + Next.js
Managed databases: PostgreSQL on DigitalOcean. First on the server and when the side project makes enough $
Object storage: None but would probably go with DigitalOcean Spaces
Frontend: AWS Amplify.
Backend: Heroku, CloudAMQP.
Database: AWS RDS.
Authentication: Firebase, Okta.
Storage: AWS S3.
We at kitfluence.com make use of the great ecosystem Firebase.
Backend: Code is on Github (+ CI), everything else is on Firebase. We make use of the firestore as a database, use the buckets as storage and implemented firebase cloud functions for rest-like API.
Hosting: also Firebase
Frontend: ReactJS with Typescript and Material UI
Firesbase is great. How is your experience managing its price?
In order to get access to some important features (to us at least) like multiple databases or buckets, we had to upgrade to Blaze plan. This plan basically says you only pay what you use.
The amazing part here is that there is a spark plan (free plan) as well and if you upgrade to Blaze, you first use the free stuff and only on top you pay as you go.
IMHO the very best configuration for startups or side projects, as it is serverless, smooth and free for a long time. Even if you have to pay, have a look at the pricing table, those numbers are insane. If I ever have for example 1 billion cloud function calls (a month!!), then you're fine with paying 500 or 600 bucks for your server setup.
Check out the pricing and the Blaze plan calculator at the bottom of the page: https://firebase.google.com/pricing.
Frontend: Nuxt JS on Zeit
Backend: Laravel API on Digital Ocean managed via Laravel Forge
I prefer boring technology, something that has been around for a long time and is likely to stick around for a long time.
My marketing site is comprised of static HTML and CSS files with little-to-none JavaScript. When gzipped, the average webpage weighs around 3kb. I didn't use any static site generators up until recently (I was simply copying and pasting HTML from one file to another -- it was the least painful solution to get started). The static site is hosted on Netlify.
I built the web app on a vanilla Rails stack. It is hosted on Heroku, but I will be migrating to AWS soon. All pages are rendered on the server: no front-end frameworks. Heroku costs me $7/month.
I use Sidekiq and Redis to process background jobs. Workers (the ones that perform background jobs) are AWS EC2 instances spread out across multiple locations throughout the world (I run a website monitoring service, so I need them to be geographically distributed). I looked into AWS ElastiCache (for managed Redis hosting), but it turned out that the instance could only be accessed within the VPC it was created, which is a deal-breaker for me (technically, you can connect via a proxy NAT instance or an SSH tunnel, but that’s too duct tapey). Redis Cloud costs me $10/month, and 4 AWS EC2 boxes cost me around $1.38/day (for 4 t3a.micro instances).
Postgres is my go-to database when I need to support concurrent writes and reads in a distributed environment. If I didn’t have those requirements, I would have opted for SQLite, which is a file-based database. Both are rock solid. I use AWS RDS to host my database, which costs me around $1.04/day (for a single
db.t3.microinstance with multi-az failover, for a higher availability).I share a detailed breakdown of all services (and their respective costs) I use to run my SaaS.
P.S. The reason I went with AWS is because I have $5k credit expiring in two years. AWS' UI is intimidating, and their billing is pretty opaque. If you're just getting started and want to rent a virtual machine, go with smaller VPS providers like Hetzner or Linode or a PaaS like Heroku. You also won't get a surprise bill for bandwidth or some service that you forgot to terminate.
I love the look and feel of https://tryhexadecimal.com/
Gets your message across quickly and in a no-nonsense way. I'm in your target market (dev/product manager) and am considering signing up to give it a try based on the no-nonsense design.
One thing that isn't clear is the frequency at which checks are done. If "uptime" is going to be the first feature it'd be nice to know how often you run the check. Or if the uptime check frequency is configurable at what intervals?
Also it's a tad confusing when you scroll down to the quick tour area. The video still image being a Sign Up form confused me for a split second. I thought I could click in and type to sign up until I realized it was inside a video frame. Very minor, but thought I throw it in as a potential client visiting your site for first time.
I do appreciate your feedback, Eric!
Uptime checks are performed every minute. Added a note to the landing page (it used to be there, but I removed it a few days ago 🤔).
Interval isn't configurable. To keep things simple (and uncluttered), I need to make choices on behalf of my customers. I believe that checking once every 60 seconds is a sane default for most production websites and APIs.
Ah, so Chrome renders
<video>differently. In Firefox, you have a big play button. Noted, I will change the image.Also, the email verification email went to my Spam in Outlook/Office365.
I marked it as not spam but just a heads up.
Thanks for the heads up!
AWS Elasticbenstalk for Rails webhost. AWS RDS for database. AWS CloudFront for CDN. It seems to be very old tech when looking at other responses.
Web hosts: Netlify
Backend: OVH Public Cloud
Managed databases: No usage
Object storage: Swift / AWS S3
Other services: Mailgun for SMTP Cloud
Frontend Landing: Custom HTML5 on Netlify.
Frontend Dashboard: React + Redux on Netlify.
Backend: Go + Postgres + Redis, orchestrated with K8s, running on GKE.
Data ETL: Google Cloud Composer + BigQuery.
DigitalOcean all the way. Recently they worked together with Stripe Atlas and many many other cos to give benefits to startups (https://www.digitalocean.com/hatch/) so I'm going on a $10k free credit. I'm going to consider S3 etc for larger uploads.
Firebase + Google Cloud Services
Mostly I use Linode and DigitalOcean for hosting and database. Recently tried MongoDB Atlas which is nice and simplifies things.
For my blog I use the Gatsby static site generator, and throw the static web assets into an AWS S3 bucket to serve up the website (AWS CloudFront handles the TLS/SSL and CDN).
For us - we built the front end on Gatsby.js: a static site generator built on top of React (though it is much more than that now). This gave us a fast, high performant (based on lighthouse reports) PWA out of the box.
For the backend, we ended up going with Firebase (Database, Authentication) and Netlify for hosting (though you can use Firebase hosting as well and keep everything in one place).
Netlify is awesome and is coming out with more and more features and at some point you might be just able to do everything there. For now - I'm shamelessly Google's bitch (glcoud) and love the services . Gcloud run is also interesting and I hope to use it for when I can get away with serverless only processes.
This comment was deleted 4 years ago.