Deployment Targets, Adapters, and Stacks

During runtime, Remix runs on an underlying web server and handles incoming HTTP requests. Starting a new Remix project also means selecting a web server and JavaScript runtime. The Remix team and its community maintain starter templates and adapters for many popular deployment targets. In this chapter, we will review different deployment targets, templates, and Remix stacks.

We’ll cover the following topics:

• Picking a deployment target
• Switching between adapters
• Using Remix Stacks
• Working with BeeRich

First, we will provide an overview of popular templates, deployment targets, JavaScript runtimes, and hosting environments. Next, will practice switching adapters and introduce you to Remix Stacks. At the end of this chapter, we will bootstrap a new Remix application using the custom template for this book.

After working through this chapter, you will know what to consider when picking a deployment target...

Technical requirements

To complete this chapter, you will need a computer that can run Node.js. All popular operating systems should suffice. Please install both Node.js and npm on your machine. An editor such as VS Code is recommended.

You can download Node.js and npm here: https://nodejs.org/en/download/.

The code for this chapter can be found here: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/03-deployment-targets-adapters-and-stacks.

Picking a deployment target

One of Remix’s most significant features is its flexibility. Remix supports many different web servers and runtime environments, including serverless and edge environments. Selecting a template also means choosing a JavaScript runtime, a hosting environment (server, serverless, edge), and potentially a hosting provider platform. To decide which template to pick for a project, we need to know the pros and cons of the different deployment targets to make an informed decision. In this section, we provide an overview of popular templates and adapters and review their differences.

In the previous chapter, we created a new Remix application using the create-remix CLI script. In the process, we had to specify a template or use Remix’s basic template. The Remix team and community maintain adapters and templates for many different deployment targets. A template bootstraps a new Remix app with the required web server code. The web server code is not...

Switching between adapters

We sometimes have to migrate from one template to another one. To do so, we must switch our Remix app’s setup. In this chapter, we will walk through the process of switching templates and adapters.

The process of switching between templates and adapters can be summarized as follows:

1. Locate your Remix project and open it in an editor or file explorer.
2. Create a new Remix project using the new template and adapter.
3. Open the new Remix project side by side with your old project.
4. Rename the app folder in the new project to temp. Move the app folder from your old project to the new project.
5. Replace the code in app/entry.client.tsx with the code in temp/entry.client.tsx and integrate any custom code previously added to the file.
6. Replace the code in app/entry.server.tsx with the code in temp/entry.server.tsx and integrate any custom code previously added to the file.
7. For every Remix-specific file and folder in the root of...

Using Remix Stacks

In this section, you will learn about Remix Stacks. First, we will have a look at Remix’s official stacks and how to use them. Next, you will learn how to use community templates.

Working with Remix official stacks

Remix also offers pre-configured templates ready for production. These templates are referred to as Remix Stacks. As of now, Remix provides three official stacks:

Working with BeeRich

Welcome to BeeRich! BeeRich is a dashboard-like application that mimics both personal and enterprise use cases. BeeRich is a personal finance management application that helps you stay on top of your bee – pardon me – bookkeeping. Well, at least that’s the goal. There is nothing much there yet. In every chapter, we will add more code to this application. In this section, we will run BeeRich locally and review the folder structure.

We bootstrapped BeeRich in the preceding section using the create-remix script. BeeRich is nothing more than a simple skeleton application on top of Remix’s Express.js template that we tried out in Chapter 2, Creating a New Remix App. You can also find the BeeRich Remix template in this book’s GitHub repository: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix.

Let's run BeeRich locally. Open the terminal and navigate to the project's root folder. Then execute...

Summary

In this chapter, you learned what to consider when selecting a deployment target for your Remix application. You learned more about different hosting providers, environments, and runtimes. You now understand that Remix runs on long-running servers, serverless environments, and edge runtimes. Each environment has advantages and disadvantages that you must consider when selecting a template and deployment target.

Remix’s different deployment targets operate on different JavaScript runtimes, such as Node.js, workerd, and Deno. Different JavaScript runtimes support different web standards and either support or do not support Node.js standard libraries. When picking a template, you must consider what JavaScript runtime you want to work with.

This chapter introduces you to a nine-step process to migrate from one adapter to another. Switching out adapters enables you to try out different hosting providers and environments and to stay agile in case your requirements change...

Further reading

You can find a list of available adapters in the Remix documentation: https://remix.run/docs/en/2/other-api/adapter.

The Remix documentation also provides more explanations about available templates here: https://remix.run/docs/en/2/discussion/runtimes.

The official announcement post for Remix stacks can be found here: https://remix.run/blog/remix-stacks.

Listen to Wes Bos and Scott Tolinski talk about the limitations of serverless on Syntax.fm: https://syntax.fm/show/542/serverless-limitations.

Learn more about the distinction between serverless computing and containers here: https://www.cloudflare.com/learning/serverless/serverless-vs-containers/.

You can find more information about V8 isolates here: https://developers.cloudflare.com/workers/learning/how-workers-works/#isolates.

The rest of the chapter is locked

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Renews at £13.99/month. Cancel anytime

Start free trial

Previous Chapter

Chapter 5 of 23

Next Chapter

You have been reading a chapter from

Full Stack Web Development with Remix

Published in: Nov 2023Publisher: PacktISBN-13: 9781801075299

© 2023 Packt Publishing Limited All Rights Reserved

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Sign up now

undefined

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at £13.99/month. Cancel anytime

Author (1)

Andre Landgraf

Andre is a full stack developer from Germany. He graduated with an MS in Information Systems from the Technical University of Munich and was also awarded an MS in Computer Science from Sofia University in Palo Alto. Andre currently lives in Cupertino, California, and he works as a Software Engineer at LinkedIn. Andre loves learning, writing, and speaking about all things web. In his free time, he tutors aspiring developers and builds for the web.
Read more about Andre Landgraf

See other products by Andre Landgraf

Personalised recommendations for you

Based on your interests and search pattern

Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development covers everything a frontend developer or a Drupal developer needs to know about the Drupal 10 theme layer. Using real-world examples, this book will help you to build up from an empty theme to a fast, responsive, maintainable, and accessible Drupal website in both monolithic and decoupled ways.

BookAug 2023360 pages4

Full Stack Development with Spring Boot 3 and React

Full Stack Development with Spring Boot 3 and React contains a wealth of practical guidance for picking up full stack development. The step-by-step exploration of everything from dependency injection, ORM with Hibernate, and JWTs to RESTful APIs, UI styling, and TypeScript will help you to develop the Spring Boot and React skills you need.

BookOct 2023454 pages5

Modern API Development with Spring 6 and Spring Boot 3

This practical guide teaches inexperienced Java programmers and web developers how to design, develop, test, and deploy highly scalable and maintainable APIs using REST, gRPC, GraphQL, and reactive programming paradigms with Java and Spring Boot. Complete with real-world examples, it will guide you to build enterprise-level APIs and services.

BookSep 2023494 pages1

Hands-On Web Scraping with Python

This book guides you to discover and extract quality data from the web using Python libraries such as requests, lxml, pyquery, scrapy, and to use effective scraping techniques. It’ll help you master the fundamentals and advanced concepts of web scraping and apply your skills to real-world data extraction tasks, with analysis and visualization.

BookOct 2023324 pages

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages4

Mastering Blazor WebAssembly

Mastering Blazor WebAssembly is a comprehensive, practical guide that’ll help you to develop advanced web applications. By combining real-world experience with the thorough knowledge needed to build Blazor apps in a masterful fashion, this book enables you to efficiently manage cross-platform mobile development with .NET MAUI and Blazor.

BookAug 2023370 pages3

Full Stack Web Development with Remix

Unlock the power of the web platform and cutting-edge technologies for your React applications using Remix to take advantage of the full stack to create a great user experience. This book is a complete resource covering the conventions, levers, and primitives of Remix and illustrates concepts through a real-world project.

BookNov 2023318 pages

Real-World Svelte

This book is a must-have guide to unlocking Svelte's true potential. You’ll learn about advanced component development, efficient coding, and powerful UI patterns using actions. With a focus on state management, custom stores, and renderless components, this book equips you to build exceptional web apps with lightning-fast performance.

BookDec 2023282 pages3

Building Micro Frontends with React 18

This book is a step-by-step guide to building production-grade, highly scalable, and performant web apps using multi-SPA and micro apps patterns, where you’ll learn to deal with complexities related to micro frontends. The book is a full life cycle guide to building, deploying, and managing micro frontends in a cloud-native environment.

BookOct 2023218 pages

Drupal 10 Masterclass

This all-in-one guide helps you get up and running with building Drupal applications using the latest Drupal 10 features. You’ll develop a complete practical understanding of Drupal frontend, backend, architecture, content management, themes, and modules to deliver a rich user experience by creating custom Drupal apps.

BookDec 2023310 pages

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages5

Full-Stack Flask and React

This book teaches you how to build simple yet efficient production-ready web applications. Starting with an introduction to React, this book will equip you with deeper knowledge of Flask and React technology stacks to undertake web application development with confidence.

BookOct 2023408 pages2

GO TO TOP

Machine LearningKubernetesReactPythonCybersecurityUnity Game DevelopmentPower BIAzureWeb Development

• Machine Learning
• Kubernetes
• React
• Python
• Cybersecurity
• Unity Game Development
• Power BI
• Azure
• Web Development

Legal

Terms and ConditionsPrivacy PolicyCookie PolicyShipping PolicyReturn Policy

Support

HelpContact Us

Business

Partnerships

Sponsored eBooks

Custom eBooks

CareersBecome an author

Packt+ Membership

SubscriptionDataProSecPro

Packt Subscription Packt NewsLetter

Legal

Terms and Conditions

Privacy Policy

Cookie Policy

Shipping Policy

Return Policy

Support

Help

Contact Us

Business

Packt Subscription

Packt NewsLetter

---

Company Address: Packt Publishing Ltd, Grosvenor House, 11 St Paul's Square, Birmingham, B3 1RB© 2024 Packt Publishing Limited All Rights Reserved

Stack	Deployment target	Comes with	Use case
Blues	Fly.io	PostgreSQL database	Large-scale applications and regional distribution
Indie	Express.js	SQLite database	Small-scale projects with dynamic data
Grunge	Architect...

Working with BeeRich

Welcome to BeeRich! BeeRich is a dashboard-like application that mimics both personal and enterprise use cases. BeeRich is a personal finance management application that helps you stay on top of your bee – pardon me – bookkeeping. Well, at least that’s the goal. There is nothing much there yet. In every chapter, we will add more code to this application. In this section, we will run BeeRich locally and review the folder structure.

We bootstrapped BeeRich in the preceding section using the create-remix script. BeeRich is nothing more than a simple skeleton application on top of Remix’s Express.js template that we tried out in Chapter 2, Creating a New Remix App. You can also find the BeeRich Remix template in this book’s GitHub repository: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix.

Let's run BeeRich locally. Open the terminal and navigate to the project's root folder. Then execute...

Summary

In this chapter, you learned what to consider when selecting a deployment target for your Remix application. You learned more about different hosting providers, environments, and runtimes. You now understand that Remix runs on long-running servers, serverless environments, and edge runtimes. Each environment has advantages and disadvantages that you must consider when selecting a template and deployment target.

Remix’s different deployment targets operate on different JavaScript runtimes, such as Node.js, workerd, and Deno. Different JavaScript runtimes support different web standards and either support or do not support Node.js standard libraries. When picking a template, you must consider what JavaScript runtime you want to work with.

This chapter introduces you to a nine-step process to migrate from one adapter to another. Switching out adapters enables you to try out different hosting providers and environments and to stay agile in case your requirements change...

Further reading

You can find a list of available adapters in the Remix documentation: https://remix.run/docs/en/2/other-api/adapter.

The Remix documentation also provides more explanations about available templates here: https://remix.run/docs/en/2/discussion/runtimes.

The official announcement post for Remix stacks can be found here: https://remix.run/blog/remix-stacks.

Listen to Wes Bos and Scott Tolinski talk about the limitations of serverless on Syntax.fm: https://syntax.fm/show/542/serverless-limitations.

Learn more about the distinction between serverless computing and containers here: https://www.cloudflare.com/learning/serverless/serverless-vs-containers/.

You can find more information about V8 isolates here: https://developers.cloudflare.com/workers/learning/how-workers-works/#isolates.