DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Because the DevOps movement has redefined engineering responsibilities, SREs now have to become stewards of observability strategy.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack
  • Overcoming React Development Hurdles: A Guide for Developers

Trending

  • Software Delivery at Scale: Centralized Jenkins Pipeline for Optimal Efficiency
  • Understanding the Shift: Why Companies Are Migrating From MongoDB to Aerospike Database?
  • Go 1.24+ Native FIPS Support for Easier Compliance
  • Advancing Your Software Engineering Career in 2025
  1. DZone
  2. Coding
  3. JavaScript
  4. How To Deploy Your React Website in 2022!

How To Deploy Your React Website in 2022!

Different React apps need different deployment setups based on their case. In today's world, there is a sea of hosting platforms available.

By 
Ankit Karody user avatar
Ankit Karody
·
Sep. 06, 22 · Analysis
Likes (2)
Comment
Save
Tweet
Share
10.8K Views

Join the DZone community and get the full member experience.

Join For Free

Different React apps need different deployment setups based on their case. In today's world, there is a sea of hosting platforms available. This article will help you understand the market and your requirements.

Once you are ready to move from development to deployment, this choice is an essential step for you to get closer to that launch date.

There are many constraints to choosing a deployment provider, such as Security and Serverless. 

Basic Considerations

Before we discuss the various options available, let us first categorize the React OR Vue Js app you have built so we can choose the particular services the platforms provide. 

Pricing

Of course, one of the biggest questions is the price when choosing an option. Many options are available depending on the app category, starting from free deployment options.

 You can deploy SPA-s for free on the available platforms.

Data Served (Outbound)

Server providers have to serve requests made to the website. There is a cost of computation as well as data being sent out. In most cases, the inbound data is free or has a little cost, while outbound data /GB has a cost associated with it.

 Different tiers are based on the Outbound data limit.

Serverless

With the dawn of serverless computations on edge functions, this feature has become a significant consideration when choosing a service.

Serverless functions make the whole app extremely performant. They are often an integral part of the project, forcing customers to choose products that allow this feature. Though it is pricey, it is worth it!

Performance

Fundamentally, you always want a service that delivers the fastest. Response times, Request times, and Load times contribute to performance. UI/UX research shows that Load times are crucial for user retainment and reduced bounce clicks.

So performance is an essential aspect for the end-user. Optimizing performance is vital.

Management and Workflows

Development is not free. It requires an investment of time, skill, and a lot of money to do so. Issues like managing extensive stand-alone dynamic services like AWS servers, Security, CI/CD pipelines, etc., are cumbersome tasks. 

Most projects/companies cannot shill that sort of effort to develop and manage an extensive system. Hence it is preferred that the hosting provider handle the management themselves. This way, products can ship out fast with a budget in mind!

Categories

Based on the category of react-apps made, there are different hosting options available. Below are the major categories and a comprehensive outlook on the hosting options available.

SPA — Single Page Application

An SPA is a form of React application that is most common. It consists of single pages that can be directly pre-built before being deployed to hosting. This consist of marketplace apps, personal blogs, form apps, and information sites. Etc.

The key here is that everything in the app is fixed before deployment and has no dynamic pages (though content can be dynamic). You can always pre-build them.

SPA's can be easily deployed for free till you reach a threshold limit on these platforms — 

  • Netlify
  • Render
  • Surge
  • Vercel (for non-commercial)
  • GitHub Pages
  • Heroku (for non-commercial)

Furthermore, if you have a dynamic page site, you can try to configure its settings to make it a Client-Side Rendered App. However, this will drastically reduce performance and reduce SEO compatibility.

SPAs are a great place to start. You can always switch to a Server-Side app down the line.

Server-side Nodejs React-apps

Server-Side is the second time of React app. HTML is generated on every request when you use server-side props. You can also statically generate websites at build time with static props. 

This server manages the frontend requests, so dynamic page attributes like Meta-tags, Server-side authentication, and SEO optimizations can be served directly at the request of the page.

So when you view the page source, you can view all this information. 

A NodeJS app is a straightforward approach that requires many options to be coded by developers like caching, image optimizations, etc.

This is an advanced form of React-App, and direct NodeJS server providers can help you to set it up. You will have to buy an instance of a server to run this.

Pre-made Options

These are the popular service providers in this space — 

  • DigitalOcean
  • Heroku

Legacy Cloud Providers

Amazon AWS, Microsoft Azure, and Google GCP have Pay-Per-Use options to facilitate this type of server. 

However, this requires advanced Security and more developer effort to set up. You can use it if you know what you are doing or have grown to a large degree, where it is essential to use the scale they provide.

NextJS Apps

In a NextJS React app, the server-side part of the equation is handled by the hugely popular NextJS library. It provides all SSR features, Serverless Functions in a developer-friendly environment.

You can deploy Nextjs apps to Vercel, the creators of Nextjs. 

Or you can use AWS. NextJS has an auto-detection option when deploying with AWS.

Vercel, starting at 20$/pm, includes all NextJS features, complete with an optimized caching service, serverless functions, and a GitHub integrated CI/CD pipeline, and serves 1TB of outbound data. You can switch to enterprise plans if this doesn't meet your needs. 

Due to the global acceptance of NextJS, many other hosting providers are also capable of hosting NextJS apps with different configurations— 

  • Netlify (starting at 25$)
  • DigitalOcean (App starting 20$)

With AWS Amplify

Amazon AWS amplify provides a service to host NextJS apps from the get-go. Learn more at the docs here.

Conclusion

When choosing to host a website, there are options and considerations—from free hosting to a fully customizable Pay-Per-Use service. If you are switching from one option to the other, it is important to keep your user updated.

React (JavaScript library)

Opinions expressed by DZone contributors are their own.

Related

  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide
  • Mastering React App Configuration With Webpack
  • Overcoming React Development Hurdles: A Guide for Developers

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!