Anyone developing and deploying Single Page Apps?
I’d like to know what technologies you use to build your single page apps and how it’s deployed at the moment if you don’t mind sharing.
I personally use Ember.js and deploy to AWS S3, what do you use? For those who use AWS or interested in using AWS, please read on.
I founded a small AWS automation tool called Simple Silo (simplesilo.app) that makes it super simple to host static web sites on your AWS complete with free SSL for every site.
Checkout this article for the problem I am trying to solve and how I approach it
https://medium.com/@joshuaaob/web-hosting-on-aws-made-simple-7d68ead6c574
Indie Hackers itself is a single page app using Ember.js, various AWS services, and Firebase.
How has firebase worked out for you when it comes to relationships (many to many, etc)? That's been the reason I've always stayed from it..
I understand Firebase is not a relational database , therefore there’s no relational feature available. I like to think of Firebase as a highly available storage for storing user preferences or app states. For instance, storing the user profile data or notification settings... another important point to keep in mind is the fact that Firebase does not support aggregation of data, for instance finding the max value from from a set of records is not possible (unless you iterate through all the documents and compute the value yourself, which is expensive). In short, think of Firebase as a non-volatile memory on the cloud for your app’s data. 🙂
+1 for Ember, Firebase seems to have a very strong presence here and for good reason, their service offering is pretty amazing. Next time you need to host a static website, please give simple silo a try, I’d love to hear your feedback especially as an Ember + AWS user. You can also say hello@simplesilo.app
Right now using Netlify for sake of minimal setup with a vue app. Previously used S3 with React.
Netlify 🔥🙌
I will encourage you to try simple silo as a former s3 user. The pain of configuring s3, cloudfront and ssl is exactly the problem we solved. Please get in touch with me at hello@simplesilo.app for more information about the free trial.
Vue.js & firebase (auth, firestore and hosting). Fast development and no costs unless your app gains traction.
I use this too.
Vue.js is great because you can start simple and build out to the level of complexity you need. To get started you can just source the vue.js directly in your html and go for it. Later, as your app grows, you can go for the full webpack everything with Single File Components, etc.
Firebase is simple to setup including auth, DB and SSL. Fast and scalable. The only downside is having to use the firebase-cli to deploy rather than git or similar. The upside is that you can deploy your cloud functions in the same way.
I have a similar setup. I'm curious about firebase hosting with your own custom domain. Was it hard to set that up?
Not at all, you need to create some nameserver cname entries, thats all.
+1 also how does SSL work when using a custom domain, do you provide one of does firebase provide one for you?
You get it from firebase automatically
How has Firebase been working out? I'm always curious out newer Baas platforms. I used Parse a few years ago before it was shut off and found it was just so-so.
Former Parse user here, now using Firebase a lot. Firebase filled the hole that parse left very well, but they can offer much more because they're backed by the Google cloud (it's easy to add more pieces outside firebase if you need them).
10/10, would recommend
Until now great, the workflow is easy, no costs because I'm just prototyping with it.
Zeit.co/now all the way including https://nextjs.org, mongodb on http://mlab.com, rabbitmq via cloudamqp.com, etc.
I'm currently using:
Next.js (React) for the frontend
Apollo for the data-layer/caching
Prisma for the GraphQL layer (via Prisma Cloud)
Node.js (express) app for all business logic
All deployed via zeit.co/now and tests run on commits via CircleCI.
I'm a big fan of the setup, Next.js gives me SSR without having to deal with it myself which is great and the tooling built around GraphQL is astounding. Really enjoying the Prisma experience too.
I also have a custom CMS running that's built with React, no SSR though, just uses create-react-app and styled-components, again, hosted via Zeit.
I'm curious: what's the benefit you get out of adding GraphQL to your project? I haven't looked into it deeply yet but it just seems like a lot of additional work in order to not have to use a REST api. What am I missing?
Initially I decided to use it as I liked the initial idea of only requesting what I needed without having to clean a standard rest response to include the minimal output . However, the more I've been working with it (about a year now) I definitely think its the future of API development and may come to become the preferred approach over REST.
Unlike other GraphQL APIs, FabFit's API is native so I'm not wrapping a REST api - which, from I've seen is where a lot of the extra work is involved. In my opinion apart from having to learn something new GraphQL is not more effort over a REST api, I'd probably argue that it's less effort in the long-term.
So far the benefits that I've encountered are:
A self documenting API, using tools like GraphQL Playground or GraphiQL I can easily see what data is available to me, its type and what it relates to
The benefit of being able to call deeply nested data with a single, performant db call instead of multiple rest calls. For example, in FabFit when we fetch a "Programme" we also fetch all related classes, user data, user progress and other content that exists on the class and user objects not just the programme one
The Apollo client tooling and caching is brilliant, I no longer need to use a state-management library and if I do I just use
apollo-link-stateOnly having to manage a single API endpoint is also really nice
You only get what you need, no 100+ line responses when all you need is a user's email, ID and name.
The client is (kind of) in control over what data they need, a backend engineer doesn't need to define every data structure for every endpoint, instead the client can request what information they need, when they need.
If I was building a new API today then I would definitely build it GraphQL first.
If you're interested and want to read some information on large companies making the switch Medium have a great article: https://medium.engineering/2-fast-2-furious-migrating-mediums-codebase-without-slowing-down-84b1e33d81f4 they also spoke at GraphQL Europe which I highly recommend folk checkout. Other interesting information might be to read up on what GitHub are doing as they are GraphQL first, their GraphQL API generates their REST api.
If you wanted to try out GraphQL I'd checkout Prisma and/or GraphCMS (built on Prisma). Also, howtographql.com is a brilliant resource.
Wow, thanks for the extensive answer! It makes a lot of sense if it's possible to skip the rest api and go straight to using GraphQL. I was under the impression you always had to wrap an existing api, which is why it just seemed like much more work.
Thanks for taking the time to write it up! Appreciate it.
This is great, haven't heard about zeit.co/now before but it looks cool. How does this work out in production? it seems you get a new URL every time you upload a new build with the now command, do you have to update DNS also to point your prod to the latest build? Also how does this setup work with SSL & custom domain?
Zeit's Now has the idea of immutable deployments, essentially giving you an unlimited number of development sites.
When you are ready for production you run
now alias <deployment.now.sh> <you-domain.com>and now your domain will point towards that deployment. However, before doing this you need to point your domain towards Zeit, I just use the CNAME alias.zeit.co.I've been using Zeit for nearly two years and its brilliant.
If you wanna know more they recently moved their community to Spectrum (which is also hosted on Zeit): https://spectrum.chat/zeit
I use angular5 hosted on firebase
Same here;) firebase hosting and ng5 app, easy;)
Meteor.js + React
Just curious, why do you need both?
I used React for a long time. It was a step up from Angular but it just rubbed me the wrong way, I think it was just personal preferences with the templates. Once I found Vue, I was sold immediately.
But I'm old school and fight new JS conventions hard haha. I still use Ruby on Rails for backend, and try to limit my JS build stuff.
That's a cool app idea. What would you consider the lowest cost to be using this method? Do you want to target it toward SPA developers, or do you have another target in mind? I worked in web hosting in the early 2000's, and a static hosting option that was guaranteed to be up with low costs would've been amazing, but I think most people default to WordPress nowadays.
Nice setup you got there, I use ruby also but with Sinatra on the backend, mainly for APIs these days as I have found a sweet spot for developing client and sever side separately and Ember.js is go to JS framework.
What would you consider the lowest cost to be using this method?
Using the method we provide, the lowest cost will be your AWS S3 storage costs followed network traffic costs to AWS Cloud front. For a low traffic website, this is easily under $5 per month. We also charge a small fixed fee to manage websites for you.
Do you want to target it toward SPA developers, or do you have another target in mind?
Yes I want to target SPA developers. I think there are a lot of frameworks that build static websites these days and AWS among others offers a simple way to host them.
Hi there, currently running a small-medium sized SPA (Makerlog).
It's been quite a ride. For hosting I'm using Nginx with some basic GZip and other optimizations. Also Let's Encrypt.
Maybe an unpopular opinion; none.
Throwing lots of JS at a problem early on always seems to add additional, unneeded complexity.
Front End: React, Redux
Mobile App: React-Native, Redux
Backend: Node.js, MySQL & MongoDB
Thanks for chipping in, where is your front end hosted?
heruko
Hi, if you want to see technologies from public web sites, just open for example wappalyzer.com which identify and uncovers the technologies used on websites. It detects content management systems, ecommerce platforms, web frameworks, server software, analytics tools and many more.
I'm using React/Mobx/Webpack to build my SPA. I'm building a website builder, so SPA is the key point for a better UI/UX. I shared my frontend structure in this public repo https://github.com/wwayne/spa-config
For the deployment, I'm running it on the DigitalOcean.
I shared some scripts for setting up git/nginx/ssl https://github.com/pocket-watch/vps-setting
Also, I wrote an article about as a beginner, how I use docker to iterate my small SaaS https://medium.com/@cominsoon_io/docker-behind-small-saas-344e22f259c5
Next.js (React for the frontend)
PHP and MySQL (RDS Aurora) for the backend
CircleCI for the CI/CD
I run this on Docker locally, and it's deployed to Amazon ECS. I think ideally one of these days, depending on time constraints, I'll move over to some sort of GraphQL setup and replace the PHP parts, but I'm still working on earning my first dollar.
I recently created a one-page app in Github. Super easy, free, and deployment is as simple as
git commit.I use Vue and Go on GitHub Pages and Heroku
I'm using React on the frontend(SPA) and Node on the backend. Both containerized and running on Kubernetes(Google Kubernetes Engine).
My current project is a complete SPA: www.fullstack.cafe.
Stack:
Angular 5 (TypeScript)
Material Design
Node.js + ExpressJS (JS)
MongoDB
Prerender.io (for SEO)
Stripe
Deployment (via simple git push):
Bitbucket (free)
Heroku (7$/m)
How did you generate the data on your site?
Sourcing from Dev.to, Medium, books, SO using VA and fact checking by myself after.
For my latest project I’m using Angular 6 on Netlify + Node with Typescript on the backend deployed to Digital Ocean. Coming from React and my productivity has increased substantially.
How are you finding the pricing for Netlify or are you still using it on the free plan?
I'm on their free plan, so can't comment on that yet :)
We use emberjs and deploy to heroku (while assets are deployed to S3). Simple Silo seems much easier and faster, but I don't see the pricing.
High five for ember + s3. We are still working on the pricing but you can try it out now for free. Our entry level plan will be under $10 for a few silos, please get in touch with me at hello@simplesilo.app for more information.
🙌Sure. Sounds fair, will definitely give it a try!
I use Ember and Rails, deploying to a Digital Ocean droplet using a neat CI/CD devops tool from a fellow indie hacker www.codemason.io
I use Vue, hosted on a Google Cloud Bucket. Using Gitlab for CI/CD.
Using Digital Ocean, Nginx, Flask, and Bootstrap for http://mydomaininfo.com
Is Ember.JS pretty easy to setup? I always hear good things about it, but I haven't taken the initiative to try it out. Really just a matter of learning a bit more JS on my end.
Sounds like your front end is couple with your back end and hosted on Nginx via digital ocean droplet. I used to do that until I found a sweet spot for developing two separate apps (web and API) and hosting them separately.
I will always recommend Ember as the front end framework of choice, it has a bit of a steep learning curve but once you get how things should be done the Ember way, developing clinent side apps with Ember is a breeze.
I disagree with this. There is nothing inherently wrong with a coupled front and back end.
Some applications work just fine this way, others call for being a SPA. Depends on the problem you want to solve.
Do you know of any downsides for the way you used to set the sites up? Also, not sure what you mean by front-end being coupled with back-end?
Not really downsides More like more pros than cons
Easier to add a mobile app as the mobile and web app will use the existing API
Slightly better performance as the new setup uses a global content delivery network
The separation makes it easier to maintain for some developers for example the back end can be updated without touching the front end and vice versa
By coupled, I mean that both front end and back end are probably developed as a single app, and hosted on a single server. As opposed to have a client side web app developed with JavaScript and server side app developed with a server side language.
That is what I have, for filerequest.eu (name dropping) only it happens to be hosted on the same droplet. One does not exclude the other.
https://slice.capital is a single page app built using create-react-app hosted on AWS ECS with a backend utilizing AWS RDS and GraphQL via Graphine. Can't say that this is simple and I will likely migrate both the backend and the frontend to a different hosting set up, ie away from a single page app structure.
Beautiful landing page and domain name. What are you biggest issues with your current setup? Why do you want to move away from SPAs?
Thanks! We are primarily making the switch because the current setup makes SEO difficult as well as the complexity surrounding dynamic header tags. Each company that raises through our platform gets its own offering page, similar to Kickstarter. We tend to share these pages a lot and we want specific images and text to show up in the pre-generated previews. Due to the nature of how create-react-app handles header tags, we are unable to set these dynamically without some sort of proxy.
we use prerender.io for this, has been reliable and not too much effort to setup. maybe a nice option if you like SPA otherwise.
Looks interesting, checking it out now, thanks!
I am just making this as a test but it's basically a list to organize small computer cases and filter them out by specific features. The front end is in React and all the data is just in one JSON file. It is currently hosted in a free Heroku host as a test.
For www.wrkflows.io we use Vue.js for the front end, and our backend is built on Node JS. We use Wercker for CI and everything is hosted on Heroku. Having our API separate from our front-end has been great because we have several front-end apps now all connecting to a single API.
I am using React and then to host it I use Firebase.
Hey there,
For my side project, I use Ruby On Rails for the backend and Vue.JS for the frontend. Everything is bundled together using Webpacker.
Databases include Postgres for the customer data and Redis for temporary data (like job queues).
I am deploying the app to Heroku using their standard pipelines.
I really like how cheap and scalable this setup is.
I've been using CircleCI to build, test and deploy to S3. When I build the app, I generate a dev, stage and prod version that are all saved to a versions bucket on S3. When I go to deploy to dev, I do an S3 copy from the dev version folder (S3://versions-bucket/v123/dev) to the static site bucket, then trigger a cache invalidation on CloudFront for the site. I'm on v544 of the app and haven't had any issues.
Hi! I'm using Angular with Firebase for Guidable (guidable.org). I'm then using Ionic to wrap it up as iOS and Android applications.
Vue.js for the front-end and then usually Heroku for the server. I've been building my back-ends recently with Clojure and have really enjoyed the experienced.
Most of what I'm doing these days is in the single page style as it forces me to build the server in a way that makes adding mobile apps or other connections in the future trivial.
React, Django and GCP.
Durandal JS & MS Web API
React & redux/firebase