Frontend
1.0.0
1.0.0
  • Introduction
  • Project Guidelines
    • INTRODUCTION
    • PROJECT SETUP
      • Frameworks
      • Static type checking
      • Code Quality Tools
      • Enforcing good practices
      • Testing
      • Code versioning flow
      • Continuous Integration & Delivery
      • Isolated component development
    • EFFECTIVE AND CONSISTENT WORKFLOW
      • Code structure, architecture
      • Code versioning and review flow
      • Testing
      • Continuous Integration & Delivery
      • Dependency checking
      • Project Management Tools
      • Communication
    • THE QUALITY OUTPUT
      • Great UX/UI
        • Design & User Experience
        • SEO, SMO
      • Accessibility
        • Introduction
        • Why a11y?
        • Fundamentals
        • A11y in STRV
          • Share Knowledge
          • Project Life Cycle
          • A11y culture
      • Performance
        • Bundle Size
        • Deployment
        • Audits & Reports
      • Stability
        • Documentation
        • Analytics & Error Tracking
        • Quality Assurance
      • Security
    • FINAL WORDS
    • ACKNOWLEDGEMENT
Powered by GitBook
On this page
  • Deployment services
  • Heroku
  • Netlify
  • Amazon Web Services
  • Vercel, Firebase
  • Static vs. server-side
  • Docker
  • Continuous delivery
  • Content Delivery Network (CDN)
  • What is a CDN and how does it work?
  • Some of the benefits of using a CDN for your website
  • Additional resources

Was this helpful?

  1. Project Guidelines
  2. THE QUALITY OUTPUT
  3. Performance

Deployment

PreviousBundle SizeNextAudits & Reports

Last updated 2 years ago

Was this helpful?

In the chapter, we already covered that deployment shouldn’t be done manually. Continuous delivery should be used to achieve the best results. Now, let’s focus on where and how the solution should be deployed.

Deployment services

There are many services available. Let’s focus on the main services we use.

Heroku

is a Platform used as a Service. It’s built on top of and offers nice UI and a simple setup. A great choice for server-side rendered apps.

You can set up a development pipeline and easily promote from development to staging or from staging to production.

Another favorite feature is to set up an auto-deployment from the GitHub branch. Put simply, you just push new changes and they are promoted to Heroku.

The simplicity of installing add-ons makes Heroku a great go-to service. But it gets pretty expensive with scaling.

Netlify

is a web development platform with all the stuff needed for static websites. It’s probably the best player in the world.

It works really nicely for static websites. The deploy preview is an amazing feature which you can set up for any pull request.

Netlify also offers the following add-ons:

  • Analytics

  • Functions

  • Identity

  • Forms

  • Large Media

And the majority of the features are free for small or personal projects.

Amazon Web Services

Amazon Web Services (AWS) offers AWS EC2 or AWS S3 combined with Amazon CloudFront. It’s the cheapest and most scalable solution. But it’s the most difficult to set up.

Vercel, Firebase

Static vs. server-side

The server is needed for dynamic data, or the server is needed to run some backend tasks. However, it’s recommended to decouple things. Go serverless or use a monorepo.

Docker

In a way, Docker is a bit like a virtual machine. But unlike a virtual machine, rather than creating a whole virtual operating system, Docker allows applications to use the same Linux kernel as the system that they're supposed to run on and only requires applications to be shipped with things not already running on the host computer. This gives a significant performance boost and reduces the size of the application.

And importantly, Docker is an open source. This means that anyone can contribute to Docker and extend it to meet their own needs if they need additional features that aren't available out of the box.

Docker is great for the backend. But it’s also suitable for larger and especially server-side rendered apps.

Continuous delivery

Both Heroku and Netlify have built-in Continuous delivery. For AWS S3, you can set up AWS CodeBuild with AWS CodePipeline.

Content Delivery Network (CDN)

There are clearly many ways to use this, but why should you?

What is a CDN and how does it work?

A CDN is a way to deliver content from your website or mobile application to people more quickly and efficiently, based on their geographic location. A CDN is made up of a network of servers (“points of presence,” or POPs) in locations all over the world.

Some of the benefits of using a CDN for your website

  • Faster load times for web and mobile users

  • Quickly scalable during times of heavy traffic

  • Minimizes risk of traffic spikes at point of origin, ensuring site stability

  • Decreases infrastructure costs due to traffic offloading (less load on origin)

  • Better site performance

Additional resources

There are many great alternatives. has great support for . works nice for static content, but Netlify seems to be better.

Differences between each are described in . To have quality output, you must know the benefits of each solution.

Static(-ally generated) websites work great with or other static hosting combined with .

Kindly borrowed from

is a tool designed to make it easier to create, deploy and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package. By doing so, thanks to the container, the developer can rest assured that the application will run on any other Linux machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code.

You can read What is Continuous Delivery and Why You Should Use It in .

For serving any static content or assets, the best approach is to use CDNs. Netlify uses . integration works like a charm with any other AWS product. You can easily install . Or use .

by Fastly

Vercel
monorepos
Firebase Hosting
Project Setup
https://opensource.com/resources/what-docker
Docker
the Project Setup chapter
its own
AWS CloudFront
Fastly
add-on on Heroku
Cloudflare
Why you should use a Content Delivery Network
Effective and Consistent workflow
Heroku
Netlify
JAMStack
AWS
Netlify
CDN