7 ms·

How to deploy a React app for free

155 points by walter12 6y ago

deleted 6y ago
[deleted]
emersonrsantos 6y ago
Very nice free service list. I think it could been added a way of running node CLI’s without installation through npx instead of installing global packages.
- walter12 6y ago
  Thanks and That's a very good feedback,
juskrey 6y ago
vs "How to earn $2.5 a month to deploy your apps the way you want"
wtphilip 6y ago
Great list! Thank you for putting this together. Highly appreciated. What about way 9: https://stormkit.io https://stormkit.io?
- walter12 6y ago
  This is new to me :) I would have added if I knew of this. Maybe next year I will try to update this post and try to get the number to 8
  - wtphilip 6y ago
    If only I had known you were writing the article ;) I am curious to hear what you'll have to say about it.
Pandabob 6y ago
This is kind of Off-topic, but I've been getting back to doing web development for the past few months. One thing I've been surprised is how much high quality content marketing/blogs there are especially regarding React. The Logrocket blog is an excellent example of this. Lots of useful blog posts. Another one I've been relying on is the blog of Robin Wieruch [1]. I guess stating this is a little obvious, but one of the upsides of using popular tools is the productivity boost you get from the surrounding ecosystem. [1]: https://www.robinwieruch.de/blog https://www.robinwieruch.de/blog
- moltar 6y ago
  Listicle spam evolved aka tower content strategy.
  - k__ 6y ago
    Is it really spam when the content is actually useful?
    - moltar 6y ago
      I think so. I think it’s the intent that counts. They are clearly doing an SEO and content marketing play. I see their articles in SERPs for lots of keywords. But I find them to be just barely passable quality.
      - wyattpeak 6y ago
        Is it intent? Authors write how-to books to make sales, not to pass on information for the good of humanity. Does that mean that all technical works are barely-disguised spam? I'll grant that they probably do like the idea of passing on what they know, but I very much suspect the same thing of the tech lead who was asked to write a blog post by their marketer.
      - koonsolo 6y ago
        Alright, then we can all stop writing articles and making YouTube videos. Let's only allow some starving hippies to create content as of now.
deleted 6y ago
[deleted]
SirHound 6y ago
I used Vercel for the first time last week and the time between creating a repo to have a Next site publicly deployed was minutes. A custom domain was a couple minutes more. I was gobsmacked, this is something that took me weeks four years ago.
sergiotapia 6y ago
Netlify is one of the best services my team uses. It does exactly what you expect it to do and then gets the fuck out of your way. I love it! They also have smart features baked right in like pre-rendering. Literally hit a checkbox and you're prerendering.
soneca 6y ago
Great list. My personal choice is Netlify. With Netlify Functions and FaunaDB (also with a generous free tier), I have a full stack web app, complete with a database, hosted for free (https://www.quidsentio.com https://www.quidsentio.com)
- onion2k 6y ago
  FaunaDB's 50MB/day data output quota is tiny, and they explicitly state they don't have a hard cap or throttling so if you ever get hugged to death by a viral HN/Reddit/whatever post it's going to be expensive. That puts me off using it for anything publicly accessible.
  - johnmw 6y ago
    Do you (or anyone else) have any other suggestions for good low cost database/data layer services to work with these options? These free services are fantastic but the limitation is that they seem to be only for static sites (static in the sense that there is no data persistence).
    - onion2k 6y ago
      Firebase's free tier is enough to run a small startup on. The 1GB database size is small, but if you're only storing simple structured text records rather than media it goes a long way.
- bestest 6y ago
  I was first on Vercel free tier, yet one of my projects was a bit too resource hungry so they were kindly asking me to go for a paid tier. Before signing up for a paid plan I tried out Netlify. According to Netlify my functions were even more resource hungry, and they were deployed to USEAST AWS region, with no way of changing that (unless you're an enterprise) — yet my API endpoint is in Europe, so they took longer to execute (~1200ms each). Thus I finally went for the Vercel paid tier. They allow you to choose where your functions are deployed, so I've got ~300ms now. And they work better with Next.js apps, as on Netlify you have to jiggle around a bit more to get that working.
mvn9 6y ago
What's the point of using those services over uploading the app files into a directory that is served by any webserver? >Render is a unified platform to build and run all your apps and websites with free SSL, a global CDN, private networks and auto deploys from Git. Apart from the CDN, that's all available for e.g. Digital Ocean Droplets. But why would a CDN be needed for static websites?
- anchpop 6y ago
  A CDN is most useful for static sites, no? Since the page content rarely changes it's easy to cache.
  - mvn9 6y ago
    But why do you need it? Being on top of HN with 10,000 visitors doesn't kill a simple static site. Likewise, a client-rendered web-app shouldn't be too much for a simple server. It makes sense to use those services for all the additional stuff, like Netlify's offers: >User identity, Serverless functions, Instant forms, Split testing & rollouts, Analytics, Large media But for a basic web-app, where's the benefit?
    - borgchick 6y ago
      I think it isn't so much about what traffic to a static site will do to a server, but rather what the experience is for the end user. The tie in to CDNs help reduce load time for your end user.
      - mvn9 6y ago
        Yet web-apps are made to not be bothered by load-times. Web-apps are cached by the browser. Once downloaded, startup-time should be instantly. And downloads shouldn't take too long. Basic 1Gbit connections give you 100Mbyte per second, 10M per 100mils. A landing page should be doable in 10M, and then there is at least one second left to load the rest of the page before the user can react and make a choice.
gempir 6y ago
I don't recommend Github Pages as they have issues with routing. Read this [1] for workarounds but it's more than annoying to work around instead of just using a better hosting solution. Personally I have only ever tried GH Pages and Netlify had no issues at all with Netlify. [1] https://github.com/rafgraph/spa-github-pages https://github.com/rafgraph/spa-github-pages
catchmeifyoucan 6y ago
We've been using AWS Amplify and it's been pretty nice. It allows pairing with Github and deployments by branches. CI Integrations are not that great, like Slack bots and stuff, but it gets the job done as a good place to deploy code. The free-tier is fairly generous, and it's nice that everything lives in AWS (if you're already using them for other things) https://aws.amazon.com/amplify/console/ https://aws.amazon.com/amplify/console/
- moooo99 6y ago
  Google Firebase offers a similar product called Firebase hosting [1]. They also offer a fairly generous free tier with 10GB of storage and 10GB of transfer for the hosting. The free plan also includes SSl and supports custom domains. I've been using it to host project websites or single page apsp for a while and so far it turned out to be the cheapest option. The CLI is also fairly good so its relatively easy to deploy with a CI system [1] https://firebase.google.com/products/hosting?hl=en https://firebase.google.com/products/hosting?hl=en
timmit 6y ago
I like vercel/zeit, and dislike firebase
- riffraff 6y ago
  Your comment might be interesting if you could explain why you like and dislike them, but as it is it's not very useful.
  - timmit 6y ago
    Oh, I did not realised that explaination is required. Reason: Zeit is very easy to use, you do not even need to config your workflow, and FaaS and multiple framework are well supported. Firebase, it belongs to Google, there is no doubt Google will limit the free tier and charge you more in the next a few years.
mburst 6y ago
So cool to see all the different free services out there for getting in to web dev. I remember having to do graphic design work growing up to afford a shared hosting plan on my mom's credit card. Times have definitely changed :D Lately I've been enjoying KubeSail's (https://kubesail.com/ https://kubesail.com/) free tier for playing around with some SSR things. A lot of the lambda like services don't do great with doing realtime stuff since they're just meant to run one piece of code then die a few seconds later
- erulabs 6y ago
  Hey thanks! I’m the cofounder/CTO of KubeSail and this is more or less our purpose for existing! Our goal is to help people learn - open source tools and not black boxes - from just learning javascript to bootstrapping a company :) Thanks so much for the shoutout!
  - passthejoe 6y ago
    This is a nice discovery. Thanks!
- jkarneges 6y ago
  > A lot of the lambda like services don't do great with doing realtime stuff Another way to handle this is by delegating the management of long-lived connections to a separate infrastructure layer. Then it's fine if the app runs/dies all the time, since it only needs to run when there's client activity. Some options are Fanout (disclosure: I'm its founder) and AWS API Gateway.
ecesena 6y ago
Great list, I'm glad to see the number of options increasing. This reminded me of one of my projects, http://hasgluten.com http://hasgluten.com, kind of forgotten but still up & running on github pages since I learned react 6y ago. Code is here for the archeologists: https://github.com/hasgluten/hasgluten https://github.com/hasgluten/hasgluten
josep-panadero 6y ago
It is fantastic how far we have gotten. I had a web in Geocities before the Yahoo purchase. It allowed 150 Kilobytes of storage and no CGI (Common Gateway Interface). I do no see mention of size limits in the article. I just checked Firebase and the free tier allows up to 1 GiB total. Security is the other change. To run CGI allowed control of too much for any provider to be comfortable with it. Containerization and overall Operating System improvements allow for server-side code with safety (Spectre aside). Great article and great opportunity for anyone that wants to start small on the cloud.
hashamali 6y ago
It's worth pointing out that most (if not all) the options listed are only free to a certain point. Netlify and Github Pages, for example, are capped at 100 GB of bandwidth per month. It's a very generous cap and ample for most use cases, but something to keep in mind as your projects gain traction.
- sydd 6y ago
  Yea, they are very useful for small sites. The bigger problem for me was to find a free backend hosting service, I've only found 3 free and all of them were pretty limiting: Heroku (the instances go to sleep and take 30+ secs to wake up), IBM cloud (256MB memory limit), Azure (pretty complicated, need a credit card for the free tier). I was looking for a solution where I can host Java Spring/ASP.net toy projects easily and none of them were satisfactory
  - remorses 6y ago
    Check out google cloud run, you can run containers super cheaply
    - zadokshi 6y ago
      Do you dare to post the URL of your “super cheap to run” could run instance to test that theory? (My point being you’ll need cloud flare DDOS protection or something similar, and I’m not sure I’d classify that as “super cheap” if we are comparing against “free”. Don’t get me wrong, Cloud run is certainly an amazing product, I love it slot. It is also cheap to run as long as you don’t run into any hiccups. However, It’s ability to generate a personal $1000 or $10000 credit card bill disqualifies it from being a good candidate for small to medium projects. It is clearly an enterprise product.
  - ptman 6y ago
    Oracle cloud has some pretty good freebies. https://github.com/ripienaar/free-for-dev#major-cloud-providers https://github.com/ripienaar/free-for-dev#major-cloud-provid...
  - 6y ago
azangru 6y ago
The word "React" in the title is irrelevant and clickbaity. "X ways to deploy a static site" would have been more appropriate.
- amenod 6y ago
  Disagree - some advice is specifically tailored to React apps (created using create-react-app).
aussieguy1234 6y ago
I use Netlify for https://expose.sh https://expose.sh It's configured to auto deploy from GitHub every time I merge to the "master" branch. Works pretty well for my static site and it's free because I'm a solo founder therefore there's only one team member.
ecmascript 6y ago
I have always disliked services like netlify or vercel. Sure it seems nice with free hosting but in reality it's quite limiting and often it's cheaper to host on a $5 DO droplet or some similar vps offering. Also, with those kind of services that are free, soon gets very expensive as soon as you leave the free tier. With a vps, you can do front and backend and host hundreds of low traffic websites. I don't really understand what type of developer only does front end work or where do you host your backend stuff whjen you use Vercel / Netlify?
- nikon 6y ago
  Couple of reasons why you'd pick one of these services over a $5 DO droplet: - Maintenance (zero) - Auto deployment - Global CDN - Serverless functions can deal with spikes automatically, but cost zero when idle
  - ecmascript 6y ago
    Yeah I get that, it's a fair reason to choose serverless stuff before a VPS and I understand why people do it. In fact, I understand it enough and have felt the pain enough that I am actually working on a project that will help solve several of these issues for traditional server hosting. The only thing it won't have is a global cdn but that could potentially be added in the future as well.But I think a CDN is not needed for most projects actually and my service will focus on smaller to medium sized projects. https://deployjs.com/ https://deployjs.com/ - but it's pretty far from even reaching an alpha release :)

155 points by walter12 6y ago

deleted 6y ago

[deleted]

Very nice free service list. I think it could been added a way of running node CLI’s without installation through npx instead of installing global packages.

walter12 6y ago
Thanks and That's a very good feedback,

juskrey 6y ago

vs "How to earn $2.5 a month to deploy your apps the way you want"

wtphilip 6y ago

Great list! Thank you for putting this together. Highly appreciated. What about way 9: https://stormkit.io https://stormkit.io?

walter12 6y ago
This is new to me :) I would have added if I knew of this. Maybe next year I will try to update this post and try to get the number to 8
- wtphilip 6y ago
  If only I had known you were writing the article ;) I am curious to hear what you'll have to say about it.

Pandabob 6y ago

This is kind of Off-topic, but I've been getting back to doing web development for the past few months. One thing I've been surprised is how much high quality content marketing/blogs there are especially regarding React. The Logrocket blog is an excellent example of this. Lots of useful blog posts. Another one I've been relying on is the blog of Robin Wieruch [1]. I guess stating this is a little obvious, but one of the upsides of using popular tools is the productivity boost you get from the surrounding ecosystem. [1]: https://www.robinwieruch.de/blog https://www.robinwieruch.de/blog

moltar 6y ago
Listicle spam evolved aka tower content strategy.
- k__ 6y ago
  Is it really spam when the content is actually useful?
  - moltar 6y ago
    I think so. I think it’s the intent that counts. They are clearly doing an SEO and content marketing play. I see their articles in SERPs for lots of keywords. But I find them to be just barely passable quality.
    - wyattpeak 6y ago
      Is it intent? Authors write how-to books to make sales, not to pass on information for the good of humanity. Does that mean that all technical works are barely-disguised spam? I'll grant that they probably do like the idea of passing on what they know, but I very much suspect the same thing of the tech lead who was asked to write a blog post by their marketer.
    - koonsolo 6y ago
      Alright, then we can all stop writing articles and making YouTube videos. Let's only allow some starving hippies to create content as of now.

deleted 6y ago

[deleted]

SirHound 6y ago

I used Vercel for the first time last week and the time between creating a repo to have a Next site publicly deployed was minutes. A custom domain was a couple minutes more. I was gobsmacked, this is something that took me weeks four years ago.

sergiotapia 6y ago

Netlify is one of the best services my team uses. It does exactly what you expect it to do and then gets the fuck out of your way. I love it! They also have smart features baked right in like pre-rendering. Literally hit a checkbox and you're prerendering.

soneca 6y ago

Great list. My personal choice is Netlify. With Netlify Functions and FaunaDB (also with a generous free tier), I have a full stack web app, complete with a database, hosted for free (https://www.quidsentio.com https://www.quidsentio.com)

onion2k 6y ago
FaunaDB's 50MB/day data output quota is tiny, and they explicitly state they don't have a hard cap or throttling so if you ever get hugged to death by a viral HN/Reddit/whatever post it's going to be expensive. That puts me off using it for anything publicly accessible.
- johnmw 6y ago
  Do you (or anyone else) have any other suggestions for good low cost database/data layer services to work with these options? These free services are fantastic but the limitation is that they seem to be only for static sites (static in the sense that there is no data persistence).
  - onion2k 6y ago
    Firebase's free tier is enough to run a small startup on. The 1GB database size is small, but if you're only storing simple structured text records rather than media it goes a long way.
bestest 6y ago
I was first on Vercel free tier, yet one of my projects was a bit too resource hungry so they were kindly asking me to go for a paid tier. Before signing up for a paid plan I tried out Netlify. According to Netlify my functions were even more resource hungry, and they were deployed to USEAST AWS region, with no way of changing that (unless you're an enterprise) — yet my API endpoint is in Europe, so they took longer to execute (~1200ms each). Thus I finally went for the Vercel paid tier. They allow you to choose where your functions are deployed, so I've got ~300ms now. And they work better with Next.js apps, as on Netlify you have to jiggle around a bit more to get that working.

mvn9 6y ago

What's the point of using those services over uploading the app files into a directory that is served by any webserver? >Render is a unified platform to build and run all your apps and websites with free SSL, a global CDN, private networks and auto deploys from Git. Apart from the CDN, that's all available for e.g. Digital Ocean Droplets. But why would a CDN be needed for static websites?

anchpop 6y ago
A CDN is most useful for static sites, no? Since the page content rarely changes it's easy to cache.
- mvn9 6y ago
  But why do you need it? Being on top of HN with 10,000 visitors doesn't kill a simple static site. Likewise, a client-rendered web-app shouldn't be too much for a simple server. It makes sense to use those services for all the additional stuff, like Netlify's offers: >User identity, Serverless functions, Instant forms, Split testing & rollouts, Analytics, Large media But for a basic web-app, where's the benefit?
  - borgchick 6y ago
    I think it isn't so much about what traffic to a static site will do to a server, but rather what the experience is for the end user. The tie in to CDNs help reduce load time for your end user.
    - mvn9 6y ago
      Yet web-apps are made to not be bothered by load-times. Web-apps are cached by the browser. Once downloaded, startup-time should be instantly. And downloads shouldn't take too long. Basic 1Gbit connections give you 100Mbyte per second, 10M per 100mils. A landing page should be doable in 10M, and then there is at least one second left to load the rest of the page before the user can react and make a choice.

gempir 6y ago

I don't recommend Github Pages as they have issues with routing. Read this [1] for workarounds but it's more than annoying to work around instead of just using a better hosting solution. Personally I have only ever tried GH Pages and Netlify had no issues at all with Netlify. [1] https://github.com/rafgraph/spa-github-pages https://github.com/rafgraph/spa-github-pages

catchmeifyoucan 6y ago

We've been using AWS Amplify and it's been pretty nice. It allows pairing with Github and deployments by branches. CI Integrations are not that great, like Slack bots and stuff, but it gets the job done as a good place to deploy code. The free-tier is fairly generous, and it's nice that everything lives in AWS (if you're already using them for other things) https://aws.amazon.com/amplify/console/ https://aws.amazon.com/amplify/console/

moooo99 6y ago
Google Firebase offers a similar product called Firebase hosting [1]. They also offer a fairly generous free tier with 10GB of storage and 10GB of transfer for the hosting. The free plan also includes SSl and supports custom domains. I've been using it to host project websites or single page apsp for a while and so far it turned out to be the cheapest option. The CLI is also fairly good so its relatively easy to deploy with a CI system [1] https://firebase.google.com/products/hosting?hl=en https://firebase.google.com/products/hosting?hl=en

timmit 6y ago

I like vercel/zeit, and dislike firebase

riffraff 6y ago
Your comment might be interesting if you could explain why you like and dislike them, but as it is it's not very useful.
- timmit 6y ago
  Oh, I did not realised that explaination is required. Reason: Zeit is very easy to use, you do not even need to config your workflow, and FaaS and multiple framework are well supported. Firebase, it belongs to Google, there is no doubt Google will limit the free tier and charge you more in the next a few years.

mburst 6y ago

So cool to see all the different free services out there for getting in to web dev. I remember having to do graphic design work growing up to afford a shared hosting plan on my mom's credit card. Times have definitely changed :D Lately I've been enjoying KubeSail's (https://kubesail.com/ https://kubesail.com/) free tier for playing around with some SSR things. A lot of the lambda like services don't do great with doing realtime stuff since they're just meant to run one piece of code then die a few seconds later

erulabs 6y ago
Hey thanks! I’m the cofounder/CTO of KubeSail and this is more or less our purpose for existing! Our goal is to help people learn - open source tools and not black boxes - from just learning javascript to bootstrapping a company :) Thanks so much for the shoutout!
- passthejoe 6y ago
  This is a nice discovery. Thanks!
jkarneges 6y ago
> A lot of the lambda like services don't do great with doing realtime stuff Another way to handle this is by delegating the management of long-lived connections to a separate infrastructure layer. Then it's fine if the app runs/dies all the time, since it only needs to run when there's client activity. Some options are Fanout (disclosure: I'm its founder) and AWS API Gateway.

ecesena 6y ago

Great list, I'm glad to see the number of options increasing. This reminded me of one of my projects, http://hasgluten.com http://hasgluten.com, kind of forgotten but still up & running on github pages since I learned react 6y ago. Code is here for the archeologists: https://github.com/hasgluten/hasgluten https://github.com/hasgluten/hasgluten

josep-panadero 6y ago

It is fantastic how far we have gotten. I had a web in Geocities before the Yahoo purchase. It allowed 150 Kilobytes of storage and no CGI (Common Gateway Interface). I do no see mention of size limits in the article. I just checked Firebase and the free tier allows up to 1 GiB total. Security is the other change. To run CGI allowed control of too much for any provider to be comfortable with it. Containerization and overall Operating System improvements allow for server-side code with safety (Spectre aside). Great article and great opportunity for anyone that wants to start small on the cloud.

hashamali 6y ago

It's worth pointing out that most (if not all) the options listed are only free to a certain point. Netlify and Github Pages, for example, are capped at 100 GB of bandwidth per month. It's a very generous cap and ample for most use cases, but something to keep in mind as your projects gain traction.

sydd 6y ago
Yea, they are very useful for small sites. The bigger problem for me was to find a free backend hosting service, I've only found 3 free and all of them were pretty limiting: Heroku (the instances go to sleep and take 30+ secs to wake up), IBM cloud (256MB memory limit), Azure (pretty complicated, need a credit card for the free tier). I was looking for a solution where I can host Java Spring/ASP.net toy projects easily and none of them were satisfactory
- remorses 6y ago
  Check out google cloud run, you can run containers super cheaply
  - zadokshi 6y ago
    Do you dare to post the URL of your “super cheap to run” could run instance to test that theory? (My point being you’ll need cloud flare DDOS protection or something similar, and I’m not sure I’d classify that as “super cheap” if we are comparing against “free”. Don’t get me wrong, Cloud run is certainly an amazing product, I love it slot. It is also cheap to run as long as you don’t run into any hiccups. However, It’s ability to generate a personal $1000 or $10000 credit card bill disqualifies it from being a good candidate for small to medium projects. It is clearly an enterprise product.
- ptman 6y ago
  Oracle cloud has some pretty good freebies. https://github.com/ripienaar/free-for-dev#major-cloud-providers https://github.com/ripienaar/free-for-dev#major-cloud-provid...
- 6y ago

azangru 6y ago

The word "React" in the title is irrelevant and clickbaity. "X ways to deploy a static site" would have been more appropriate.

amenod 6y ago
Disagree - some advice is specifically tailored to React apps (created using create-react-app).

aussieguy1234 6y ago

I use Netlify for https://expose.sh https://expose.sh It's configured to auto deploy from GitHub every time I merge to the "master" branch. Works pretty well for my static site and it's free because I'm a solo founder therefore there's only one team member.

ecmascript 6y ago

I have always disliked services like netlify or vercel. Sure it seems nice with free hosting but in reality it's quite limiting and often it's cheaper to host on a $5 DO droplet or some similar vps offering. Also, with those kind of services that are free, soon gets very expensive as soon as you leave the free tier. With a vps, you can do front and backend and host hundreds of low traffic websites. I don't really understand what type of developer only does front end work or where do you host your backend stuff whjen you use Vercel / Netlify?

nikon 6y ago
Couple of reasons why you'd pick one of these services over a $5 DO droplet: - Maintenance (zero) - Auto deployment - Global CDN - Serverless functions can deal with spikes automatically, but cost zero when idle
- ecmascript 6y ago
  Yeah I get that, it's a fair reason to choose serverless stuff before a VPS and I understand why people do it. In fact, I understand it enough and have felt the pain enough that I am actually working on a project that will help solve several of these issues for traditional server hosting. The only thing it won't have is a global cdn but that could potentially be added in the future as well.But I think a CDN is not needed for most projects actually and my service will focus on smaller to medium sized projects. https://deployjs.com/ https://deployjs.com/ - but it's pretty far from even reaching an alpha release :)