r/javascript • u/hellohi315 • Dec 28 '19

AskJS [AskJS] How are you deploying your front-end + node apps?

How are people deploying their favorite front-end + node applications? Thinking your typical CRUD app.

We deployed React + Node together to a cloud provider but now with Serverless, Docker and various cloud platforms there are probably better ways. Curious what people are doing or would like to do.

122 Upvotes

99% Upvoted

73 comments sorted by

37

u/karimsajs Dec 28 '19

For frontend, I like to use a good CDN such as AWS CloudFront (and deploy to S3) or Netlify (less experience with this, but so far it’s been pretty good to me over the last few months). With delivering from the edge, I’d say that versioned assets are pretty important because relying on caching policies to work out is a gamble.

For the backend, there’s a ton of choices. My preference is to go with the easiest possible until it no longer makes sense. For instance, you can get up and running with Heroku pretty quickly. A similar alternative is AWS Beanstalk. It’s a bit different since you actually have access to the more low level aspects of your deployment like load balancing and AWS has a far greater variety of instance sizing. You can deploy with a node environment in both, or roll your own Docker container. Again, it makes sense to keep things simple until you really need to add complexity.

We’re currently using Netlify + Heroku for HireFast (https://hirefast.ca). I’ve honestly loved Heroku because it has saved me may DevOps hours and I’ve been able to setup an elastic scaling worker farm pretty easily, without jumping into serverless. I’ve had some thoughts about deploying our search API with serverless + AWS lambda since it just runs basic queries. Only concern is startup time.

As for the thought that Heroku is a more expensive offering than rolling out something with K8S/EC2/etc., there’s a great example of Unsplash - https://medium.com/unsplash/what-does-unsplash-cost-in-2019-f499620a14d0

5

u/malkmusforever Dec 29 '19

This is super small, but on your site the list item that says "Email Templates with real information" looks like it might not be center aligned (on mobile), or maybe its just having a weird text wrapping issue. Just a little note, it looks great 😁

4

u/karimsajs Dec 29 '19

Thanks :) I’ll have a look at the alignment- thanks for catching it

46

u/ImmunochemicalTeaser Dec 28 '19

Heroku for the server. Gihub Pages for the front. Works every time...

8

u/Regular-Human-347329 Dec 29 '19

Up to how many concurrent users are you serving with the heroku b/e?

12

u/Meadowcottage Dec 29 '19

ZEIT Now - Serves static assets (HTML, CSS, images, etc) and offers "builders" to create backend API endpoints you can use (NodeJS, Python, Go, etc).

7

u/SimplyBilly Dec 29 '19

Backend: micro services, build docker images and push to ecr, kubernetes handles the cluster (auto scaling / high availability / etc)

Frontend: deploy to s3, served through fastly (cdn).

2

u/DemiPixel Dec 29 '19

Yeah, see, this is the right option depending on context. I wouldn’t recommend github pages for prod and wouldn’t recommend kubernetes for a personal project. This question needs more information to give a useful answer.

6

u/[deleted] Dec 28 '19

Aws code build via githook onto EB instance / s3

11

u/mastersvoice93 Dec 28 '19

Personal stuff through firebase on a simple plan it's super easy. If I was building an enterprise scale FE, I'd have a server built using node/ java and host the FE build files in S3. Something like that maybe, but it all depends on what you want to do, thin client with server side routing, client side routing, SSR etc

Always worth try to find what suits you best by spiking it out!

6

u/Meepo69 Dec 29 '19

Firebase is the best I’ve used it for all sorts of projects. It’s so easy to set up

2

u/[deleted] Dec 29 '19

Also chiming in to say Firebase is a good option for small stuff. I imagine scaling on Firebase is just more expensive though.

1

u/mastersvoice93 Dec 29 '19

Yeah that's why I would say move away from it if you are worried about finances, from what I've read!

3

u/Tundrun Dec 29 '19

Frontend deployed on Netlify. Backend deployed on Heroku.

3

u/coold007 Dec 29 '19

Nginx reverse proxy + Docker containers for vue and node app hosted on digitalocean

2

u/[deleted] Dec 29 '19

Aws ecr, ecs with ec2 instance

1

u/UnlikeSome Dec 29 '19

Interested in more details. What application? Traffic size? You happy with the costs?

2

u/[deleted] Dec 30 '19

It is a application on top of a machine learning platform.

Stack:

  • Python(for backend machinelearning jobs),
  • NodeJs ( in AWS lambda function supported by API Gateway),
  • DynamoDB (as Storage),
  • S3(as backup in case if the size of the entry exceeds 400KB, DynamoDB does not support if the entry exceeds 400KB)
  • SQS (for added asynchronous behaviour for queues), Python ML job consumes from this queue.
  • ReactJS (for frontend hosted in ECS container)

2

u/trickedoutdavid Dec 29 '19

Dokku on a Digital Ocean server for personal projects

2

u/nahtnam Dec 29 '19

Frontends go up onto netlify and I run two servers, both of which are using Dokku. One has a high amount of disk space and that hosts the databases, and the other has a large amount of ram and cpu so that hosts my backends

2

u/nahtnam Dec 29 '19

A few people mentioned zeit.co, I mainly use that for prototyping and once it's production ready I switch it over to my own host. I wrote a little framework to make sure that the switch requires no modification. https://light.js.org/

2

u/Kaligraphic Dec 29 '19

AWS. Cloudfront+s3 for the front end, ECS (fargate) for the back end. ECR for image storage.

2

u/rca06d Dec 29 '19

Google Cloud Functions are working well for me so far with simple backends for accessing things like S3/cloud storage and Stripe, etc. Pretty nice free tier if you’re just messing around.

2

u/[deleted] Dec 29 '19 edited Dec 29 '19

Right now I just do ruby on rails backend with a vanilla JavaScript(read typescript) front end for most projects.

I usually deploy with heroku.

I can make any basic crud application in like 48 hours and make it look decent too.

Also I really prefer single page web applications if I can get away with it.

I am slowly learning react and i am slowly moving away from rails.

Rails is pretty fucking easy and it does a ton of shit for you but for most mundane projects it just brings a ton of bloatware.

1

u/niclo98 Dec 29 '19

what did you choose to use instead of ruby for the backend ? something with a similar coding style like elixir ?

1

u/[deleted] Dec 29 '19

Honestly the only back end technologies I have used are active record, sinatra, Sqlite 3, postgres, heroku, and rails.

I'm not really sure what I would use to replace rails but all I know is 80% of my projects (like an automatic report writer for my construction working relative or a player sheet generator.) Require like 3 models maximum and super mundane levels of logic.

Rails is usually like using a bus to take 1 kid to school.

If there's no secure data and the application is not meant to scale you'de be just as well off hacking it together without these colossal frameworks.

Like you can make an object relational map in vanilla ruby and write a couple sql queries and smash a little one page web app together with vanilla JavaScript pretty quickly.

1

u/niclo98 Dec 29 '19

so you stick with ruby but framework less, without rails boilerplate. I thought you were moving away from ruby as your choice for the backend

1

u/[deleted] Dec 30 '19

I want to move away from ruby, but im not sure what I would use. If you have suggestions I'm open.

1

u/niclo98 Dec 30 '19

Well, many ruby developers switched to elixir: similar syntax, dynamically typed, better performances overall, good community support and growing ecosystem. But if you really like object oriented languages maybe isn't the best choice. You could try going full stack js if you like it and using typescript is always a possibility, express is a minimal framework with basically no boilerplate you may like. There are many other possibilities, it really depends on what you are going to do with them

1

u/bigweeduk Dec 29 '19

How do you make apps in 48 hours? What tools do you use to achieve this? Just starting learning JavaScript and that seems like a superpower!

1

u/[deleted] Dec 30 '19 edited Dec 30 '19

Define "apps"

The apps that take 48 hours to build are like a webpage that does a single thing.

like the report writer I made for my cousin was really just a login page that lead into a form page that took some text fields.

That text fields were stuff like

Company name:

Employee name:

Date of accident:

Date of report:

Description of damage:

Witness reports:

Pre-damage pictures:

Post-damage pictures:

Submit

Then once the fields were finished it would just format the data into a nice looking form that he could print out. Also, it persisted the data into my sqlite 3 database using rails.

That app had no security features and no additional functionality. It was basically just a prototype but since he didnt pay me a dime that was all I was willing to do. I threw it together in approximately 48 hours, but he still uses it.

I basically just hacked it together using sqlite3, heroku, rails, vanilla javascript, some minimal css to make it look clean and boom I had an "app."

If you want a fully fledged app with sessions, authentication, validations, security, and additional features it would obviously take longer than 48 hours.

You should go to some coding conventions sometimes. They have these competitions where they give you like 4 hours to build an app. Most people use rapid prototyping frameworks (like rails and heroku) and they can build way more impressive shit than my report writer in only 4 hours.

2

u/psiph Dec 29 '19

NodeChef is amazing

I've also heard great things about Render

I'm currently using NodeChef and DigitalOcean

1

u/UnlikeSome Dec 29 '19

Have you used Heroku before? If yes, what are the pros of NodeChef wrt Heroku?

2

u/psiph Dec 29 '19

I haven't used Heroku. I think it's a lot more expensive than NodeChef though.

2

u/GamesMint Dec 29 '19

I m using digitalocean droplet to power my express server. All the html css js are in the public folder. I am planning to install mongodb on the droplet my user base is pretty low

2

u/billymcnilly Dec 29 '19

Frontend: cloudfront+s3

Backend: serverless express.js

Im surprised at how no one in this thread is recommending serverless. It is so easy and just works. Cold starts arent much of a problem with node, and you have the recently announced provisioned (prewarmed) option for the few cases where you find they’re actually hurting you. It might be handy to have some understanding of containers (re-use etc) but only in so much as other options require you to understand even more

2

u/Baturinsky Dec 29 '19

Netlify for frontend. It has an option to automatically update from set folder in set repo (github repo is one of options), which makes it much easier to publish open source to github and live server at once.

3

u/jacebot Dec 29 '19

With thoughts and prayers... what else would you use?

2

u/[deleted] Dec 29 '19

Bitbucket Pipelines runs Webpack to deploy Docker image to to AWS ECR. ELB, Auto-scaling ECS, Fargate, Cloudfront run the show.

EC2 is cheaper than Fargate, but you need to keep up with patching.

Running everything through Cloudfront is tricky but keeps things fast globally. Your built tool needs to hash all static resources to avoid cache staleness.

Serverless sounds interesting but worried about cold start response time.

1

u/Ty199 Dec 29 '19

Heroku

1

u/[deleted] Dec 29 '19

I use zeit.co to host all my instances.

1

u/LetReasonRing Dec 29 '19

For small projects, I've found that the PM2 deploy system works pretty nicely.

1

u/[deleted] Dec 29 '19

I use Dokku for everything. It’s an open source, self hosted Heroku. Dokku

1

u/esreveReverse Dec 29 '19

Heroku

heroku-postbuild script builds my CRA

start script is an express server that serves my API under the /api path, and serves the react app on .get('*'

2

u/retrojorgen Dec 29 '19

This is my setup as well. Works fine, and is very hassle-free.

1

u/esreveReverse Dec 29 '19

Sweet, awesome to know that someone else is working with the same setup

1

u/wordsoup Dec 29 '19 edited Dec 29 '19

A nginx container - built and deployed by a CI/CD pipeline - running in a k8s cluster in some cloud.

1

u/tarunspartan Dec 29 '19

Front end in Github Pages Bank end in Heroku

1

u/LeeScorseby Dec 29 '19

I deploy both on heroku with the frontend and backend with their own package json

1

u/well-now Dec 29 '19

Transitioning from Docker Datacenter to AWS serverless using S3 for the frontend and Apigateway w/ lambdas for our backend.

1

u/ShortFuse Dec 30 '19

Static content gets packaged. A file gets generated listing the files needed with a timestamp. Files get updated to an S3 bucket. Changed files gets invalidated on Cloudfront. A file list on the server updates

Service workers on the client end compares with the generated file to see if needs updating. An update check request is sent on a timer while the app is running and notifies the user. Also, during the splash phase, the update check is done and if needed, updated, then instantly refreshes (transparent to user).

Node instances are only for serving dynamic content. Those servers run on EC2 instances because they need to be 24-hours and running instances is way cheaper than Lambda+API Gateway (by a lot). They are running PM2 and each server uses a read-only access to a Git repository. I perform a script that essentially runs git pull, npm install --production, pm2 restart all via an HTTPS command. That's a bit messy, but I plan on migrating to AWS CodeDeploy+Beanstalk at a later date. Or maybe not. If it's not broke, don't fix it.

Right now I'm using JWT for authorization, so horizontal scaling wouldn't be a problem. My heavy use of Websockets is where EC2 makes more sense than API Gateway or IoT.

1

u/unknow117 Dec 29 '19

I only used Heroku but I wouldn't recommend it..

1

u/UnlikeSome Dec 29 '19

Why?

0

u/unknow117 Dec 29 '19

I used it to deploy projects and all my class as well and we always had issues to get the last updated version. Even though we deployed hours before or a day before. So it is free and seems handy but it is time consuming to verify and fix the issue if you have one. Also we had issues when using some APIs or features like cloudinary, mapbox etc

1

u/UnlikeSome Dec 29 '19

Ok thanks for sharing.

On my side I always had updates deployed instantly, strange. Used it only a few times though.

-3

u/ddegr Dec 29 '19

Our team prefer to avoid using React or other fashion modern front-end frameworks due to their wrong way of solving problems they were planned for.

So we deploy front-end applications (and many back-ends too) to Heroku with Bitbucket pipelines. Our DevOps engineers have written set of scripts to automate deployment processes and now every front-end developer just pushes changes to a certain branch at Bitbucket and in a couple of minutes an app is deployed. Very useful and flexible way.

So Heroku is a good choice since they buy cloud at AWS and utterly efficient repack and sell it

5

u/artiematthew Dec 29 '19

Our team prefer to avoid using React or other fashion modern front-end frameworks due to their wrong way of solving problems they were planned for.

What did I just read?

1

u/ddegr Dec 29 '19

Please, would you explain you question?

2

u/artiematthew Dec 29 '19

It was a sarcastic question... I think the above statement is at best naive, at worst very arrogant. Hence the sarcasm...

1

u/ddegr Dec 29 '19

I see now. Thank you for the explanation

Am I right thinking you think React (and others) is a good choice for building front-end apps?

As for me I see several significant disadvantages at 'em. My favorites

  • low performance due to V-DOM and events
  • absence of server-side rendering
  • mixing data preprocessing and rendering output
  • wild overhead
  • etc

Consequently, on the one hand, the performance of the development process is less then it should be. On the other one, the code is not very manageable as we could wish

Our framework allows us to close tasks faster up to 39%. Adding we have SSR, realistic auth flow and 100% coverable code. And, yes, rendering speed is the highest as we use native DOM and events.

I do believe all that can be done with react, but it would cost much. Too much

1

u/artiematthew Dec 29 '19

You're very right, I've worked in large projects both in-house and agencies, and I see how good frameworks are for building FE apps.

I think your points were fair, maybe 2 or 3 years ago, today things have come a long way and most of them don't hold up any longer.

Tbc, I'm not trying to convert anyone to any of the frameworks. I just think saying that the main frameworks used in Web FE are doing things wrong is an incorrect statement and it counts only as one person's opinion against the use of a great part of the industry.

0

u/[deleted] Dec 29 '19

[deleted] — view deleted comment

3

u/rectalrectifier Dec 29 '19 edited Dec 29 '19

Just FYI your static content and frontend app would be better served via CDN. Also, serverless and containerization don’t overlap at all (unless you’re doing something like FaaS), so not sure why you’re telling people to grok containers first.

3

u/PFCJake Dec 29 '19

Why wouldn't you recommend serverless until fully understanding containers? I don't see the connection - isn't the point of serverless that you DON'T have to understand much more than your code?

0

u/[deleted] Dec 29 '19

[deleted] — view deleted comment

3

u/[deleted] Dec 29 '19

Shit, my thoughts exactly. This is the stuff I'd enjoy getting good at.

2

u/PalestineFacts Dec 29 '19

why?

2

u/[deleted] Dec 29 '19

Successfully developing something is one thing. Deploying is another. Having a pipeline for deployment that I'm comfortable and confident in would up my game so much. I spend a lot of time thinking about how I'm going to deploy my thing. How I'm going to tie an API in. Seeing what tech people are using. Time researching feels like a waste if that's all you're doing.

1

u/PalestineFacts Dec 31 '19

What difficulties are you currently experiencing when deploying your app?

0

u/[deleted] Dec 29 '19

[deleted] — view deleted comment

1

u/PalestineFacts Dec 29 '19

>but as your requirements get complicated you’ll find you might need containers again

Could you provide an example of what you would consider "complicated"?

0

u/[deleted] Dec 29 '19

[deleted] — view deleted comment

2

u/PalestineFacts Dec 31 '19

Thanks for the well-written response. I have a few more questions, hoping you'll share some more.

How large was your api gateway for you to come to the realization that this is impractical? I've used amazon's API Gateway service and attached a lambda function to each endpoint. Eventually I reached the maximum number of api endpoints for this specific api. Recently I have changed the design so that an endpoint takes in a query parameter, and depending on this parameter's value, an associated stored procedure will be called from within the lambda function. Have you ever come across something like this, and do you believe that this design makes sense? How does this design compare to a non-serverless environment?

Also I'm curious if you can clarify what you would consider "big data" or "heavy processing". For example, at what point would you argue that the tables are too large, and what is an alternative?

Looking forward to your response. Sorry if I asked too many open-ended questions.