The Best Hosting Environments to Deploy a React App

[00:00 - 00:05] Module 5, deploying an app to the world. So once your app is finished and ready, you're going to want to deploy it to the world.

[00:06 - 00:20] In a large commercial organization, there will likely be multiple steps for this involving different environments, teams, and complex cloud hosting platforms, such as Amazon's AWS or Microsoft Azure. These commercial environments can both be expensive to use, and complex to set up and manage.

[00:21 - 00:33] In fact, it's more than likely that if you end up in a place using these environments, you'll have entire teams dedicated to setting up the hosting, running integration and deployment pipelines, and managing things from build through deployment. They usually refer to as DevOps teams.

[00:34 - 00:42] However, for single developers or small teams, static sites are simple apps. You may just want to deploy your app to the world using your own hosting provider or deployment platform.

[00:43 - 00:53] That's what we're going to do in this module. Taking our furry friends gallery Mark 2, we're going to build an optimized set of deployable code files, and have them deployed to a public URL on the excellent Netlify cloud hosting platform.

[00:54 - 01:04] First, it's worth exploring some of the different terms, practices, and conventions that you'll come across when exploring deploying your apps to the world. In the early days of the web, there were a limited number of ways to host a website.

[01:05 - 01:20] More often than not, it involved one or a handful of linked servers in a physical location serving requests from browsers. For example, in the early days of Google's founding, circa 1997, this first search services were provided by a set of servers, slotted into a rack physically based in their company office.

[01:21 - 01:43] Things moved on considerably over the years, but websites remain largely split into either simple, front end sites consisting of HTML and CSS, maybe with a little JavaScript for basic interactivity, with CGI scripts to process payments or form submissions, to more complex backend sites involving PHP and server-side rendering. A lot of hosting models are still based on physical hardware service space being sold to some redundancy built in.

[01:44 - 01:57] They were relatively expensive, challenging to set up and maintain and at a higher risk of failure. As new languages emerge to power a new breed of complex websites, hosting evolved to a more complex base with a variety of options that we see today.

[01:58 - 02:22] Depending on your needs, you can opt for virtual servers, machines, aka VMs, managed hosting environments, shared hosting spaces, containerized deployments, e.g. Kubernetes or Docker, scalable instances, or even serverless hosting for things like lambdas or serverless functions. Cloud-based hosting providers offer access to a huge computing power that can start as small as you need and seamlessly scale up and down if you have an app that suddenly has an influx of active users.

[02:23 - 02:40] Still based on physical servers, this computing hardware is housed in massive data centers located across multiple sites across the globe. Code and apps and websites are rarely ever kept in one physical place, but rather replicated across slices of physical hardware across multiple data centers using complex management software techniques.

[02:41 - 02:48] This offers a number of benefits, redundancy for your data. If any link in the chain suffers a fault, a duplicate or replicated link will take its place.

[02:49 - 03:03] Zero management hassle, all the ins and outs of the complex hosting infrastructure are taken off your hands and the management of the environment is taken care of so you can focus on deploying more features. You pay for what you need, depending on the host, you often only pay for the resources you use.

[03:04 - 03:19] An instant scaling, app going viral, not to worry, your hosting can instantly spin up more resources to handle the incoming spike in traffic. Some of the larger players in this cloud-based hosting space include Amazon's AWS, Microsoft Azure, and Google Cloud.

[03:20 - 03:33] You can host just about anything you want on these providers. The Big Three offer a range of flexible scaling hosting options and services within their platforms, but they can be overkill and work out fairly expensive if you're trying to deploy a small website or simple app.

[03:34 - 03:43] Nowadays you have a lot more choice for hosting your apps and websites and we'll explore some of those options in a moment. React and similar frameworks deal in the business of single-page applications or SPA's.

[03:44 - 03:52] SPA's are kind of what the name implies, a single page that runs an entire application. In a traditional website, you have separate HTML pages for each route.

[03:53 - 04:02] So index.html is a separate page as is about.html. In server-side driven websites such as WordPress, there is a separate page generated and rendered for each route.

[04:03 - 04:23] However, with SPA's, like apps or sites that we've created with the Create React app, you might remember that we only have a single index.html page in the /public directory. That's because we start from this entry point and our framework processes a ton of JavaScript behind the scenes to build up sections of HTML, injecting it into the starting page and managing any UI updates and changes as needed.

[04:24 - 04:32] This is what React does. Typically, you won't navigate away from this initial starting page even though the UI may swap and change and replace whole portions of the screen .

[04:33 - 04:45] Even when you inject some form of routing into an SPA, we'll be doing that later in the course with React Router so that you can visit what looks like a different page, e.g. visit the /about route or /customers. We're still not physically visiting a different web page.

[04:46 - 04:59] There's no call out to a server that responds to our request by building a page, gathering the data, generating the HTML file to return to the browser. What's actually happening is that React, or a similar framework, is updating the required UI changes and managing the browser history in the background.

[05:00 - 05:30] The Jamstack, you may see it written with a capitalized Jam, is a phrase coined by Netlify themselves who are arguably the original champions of this way of building modern interactive websites. The Jamstack stands for JavaScript APIs and Markup, and it's a particular way of building a website that deals with complex user interfaces and aggregating data from databases, server sources, APIs, or even template files, e.g. Markdown or .md files, squashing all these things together at BuildTime to produce a more simple, static site that hark back to the early days of the web.

[05:31 - 05:48] The advantage of these statically generated sites is that they can be hosted without any special requirements, they're super performant, and can enjoy more security and benefit from heavy caching. The sites and apps we're building using the Create React app are a form of Jamstack site in that they are built into a set of CSS, JS, and HTML files.

[05:49 - 05:57] However, when talking about the Jamstack in the context of React, you're more likely to come across specific static site frameworks such as Next. js or Gatsby.

[05:58 - 06:23] In the next lesson we're going to cover what happens when we build and deploy a statically generated site or SPA. For now, we'll just highlight that, especially in the case of the SPA's we're going to be building, we need to look for a host that can incorporate both the building and the deploying part as one seamless process. Any of these hosts offer a great blend of developer experience, ease of use and setup, fair pricing, usually free for small sites or apps, and modern development and hosting tooling.

[06:24 - 07:51] Netlify. We're going to look into Netlify and greater depth in the coming lessons in this module, but Netlify are a great choice and I'd recommend them. Although I'm not personally affiliated with them, I host a number of personal sites and projects on the Net lify platform, and it's always a great developer experience. You can deploy from a command line or the simple user-friendly GUI that they offer, you can get started for free with a generous number of limits on various features and all you need to do is plug it into your GitHub repository into the system and tell Netlify which build commands to run. They also have some very cool features such as automatic form recognition within your site, build time plug-ins, webhooks and more. You can use custom domains and they'll even secure your site for you with a free SSL certificate. Versale. Versale are the creators of the React Best Framework Next.js. They offer a very comparable set of services to Netlify and also offer a complete free level of hosting for smaller projects. Whilst they don't quite have the same breadth of features as Netlify, where Versale's shine is in their handling of any Next.js project. Unsurprisingly since they're created Next.js, their hosting is a little geared more towards supporting Next.js projects and this is really where they perform best. However, they are an excellent choice for any SPA or site that you wish to host. They have custom integrations such as Google Lighthouse, which triggers a performance and optimization report on each build. The process works in much the same way as Netlify. You hook Versale into your GitHub repository and the platform will then monitor the code for changes or commits in rebuild and redeploy the site or app as needed.

[07:52 - 09:10] Surge. If you're looking for possibly the simplest way to host a static site or SPA, you've got to take a look at Surge. Surge is a command-line based hosting platform that takes you from Project folder to hosted site in about six lines in your terminal or command window. Surge offers simple hosting for simple needs and does it all for free whilst also offering support for custom demands. They have a pro package if you need features such as custom SSL certificates, custom redirects or cross-origin resource sharing. Surge is a great choice but is designed to work with already built sites. This isn't a problem but it does mean that you would either have to build your site first then deploy to Surge, not integrate Surge as part of your CI/CD pipeline to be triggered once your build process is finished running successfully. And finally we have Heroku. Heroku is another popular choice for modern web apps and data-driven sites. Starting at free, Heroku offers a range of services to support modern app development. The Heroku platform is more complex than the previous hosting options but it does support containerized app deployment and additional services such as data storage providers such as Postgres and Redis and support for a range of backend languages such as Ruby, Node, PHP and more. It also has a free option with very minimal pricing to add extra services and features such as extended container hours and SSL certificates.