Partners

DatoCMS Academy

Deployments​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍​‌‍‌‌​​‍‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌‌‌‌​‌‍‌‌​​‌‍‌‌‌​​‍‌‌‌‌‌​‍‍​​‌‌​‌​​​‌‌‌​‍‌‍​‌‌‌​​​‍​​‍​‌‍‌​‌‌​‌​‍‌‌‍‌​‌​‌‌‍‌‌​‌​‌‌​‍​‌‍‌​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌​​‍‌‌​​​‌‌‍‍‌‌​‍‌‌‍‍‌​​​​‌​​‌‌​‍​​‌​​‌​‌‌​​‌‌​​‌‌‍​‌‍‌​‌​‌‍​‍​‌​‍​‌​‌‍‌​​‌​​‌​‍​‍‌‌

Understand some common use-cases, APls, and frameworks that go into building modern web experiences with Headless CMS​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍​‌‍‌‌​​‍‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌‌‌‌​‌‍‌‌​​‌‍‌‌‌​​‍‌‌‌‌​​‌‍‍‌‍‌​​‌​‌‍‍‌‌‌​‌‌​‍‌‌​‌‌‍​‍‌‍‌‌‌​‍‌‍​‌‍‌​‌​‌‌‌​‌​​‌‌‌‌‍‍​‌‍‍​‍​‌‌​‌​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌​​‍‌‌​​‌‍‍‌‍​‍‌​‌‌​‌‌​​​‌​​‌‌‌​‌​‌​‌​‍‌‌‍‌‌‌​​‌​‌‌‍​‌​‍‍‌‌‍‌‌‍​‌‌​‌‍​‌​​‌​‍​‍‌‌

Course chapters

This Modern Web Development​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍​‌‍‌‌​​‍‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌‌‌‌​‌‍‌‌​​‌‍‌‌‌​​‍‌‌‌‌​​‌‍‍‌‍‌​​‌​‌‍‍‌‌‌​‌‌​‍‌‌​‌‌‍​‍‌‍‌‌‌​‍‌‍​‌‍‌​‌​‌‌‌​‌​​‌‌‌‌‍‍​‌‍‍​‍​‌‌​‌​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌​​‍‌‌​​‌‍‍‌‍​‍‌​‌‌​‌‌​​​‌​​‌‌‌​‌​‌​‌​‍‌‌‍‌‌‌​​‌​‌‌‍​‌​‍‍‌‌‍‌‌‍​‌‌​‌‍​‌​​‌​‍​‍‌‌ course is part of DatoCMS Academy, a deep dive into the concepts around headless.

Cool, so you’ve got your CMS sorted, you’re creating tons of content, and you’ve built this incredible website or web-app using NextJS, React Native, Astro, or whatever else you chose to work with. It’s all sitting in your repo. All that’s missing is to deploy this and share it with the rest of the world so it’s not just a pretty thing collecting dust on localhost.​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍​‌‍‌‌​​‍‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌‌‌‌​‌‍‌‌​​‌‍‌‌‌​​‍‌‌‌‌‌​‍‍​​‌‌​‌​​​‌‌‌​‍‌‍​‌‌‌​​​‍​​‍​‌‍‌​‌‌​‌​‍‌‌‍‌​‌​‌‌‍‌‌​‌​‌‌​‍​‌‍‌​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌​​‍‌‌​​​‌‌‍‍‌‌​‍‌‌‍‍‌​​​​‌​​‌‌​‍​​‌​​‌​‌‌​​‌‌​​‌‌‍​‌‍‌​‌​‌‍​‍​‌​‍​‌​‌‍‌​​‌​​‌​‍​‍‌‌

Even if it’s a cool side-project, we don’t want another one of these now, do we 👇

Traditional web deployments

Traditional web deployments have been foundational in shaping today’s web hosting landscape. Originally, web hosting was centered around self-run physical servers (shoutout to the bare metal that’s still keeping a big chunk of the web going!), either through dedicated hosting for individual websites or shared hosting for multiple sites. This approach, while simple, often struggled with scalability.

cPanel stands out as a significant tool from this era. It simplified website and hosting account management with a user-friendly graphical interface, offering functionalities like domain management and web app installation (#SoftaculousMemories). Despite advancements in web hosting, cPanel’s comprehensive features maintain its relevance in many hosting environments.

Heroku is another behemoth that represents an early evolution in web-app deployments. As a cloud platform as a service (PaaS), it simplified deploying, managing, and scaling web applications, introducing developers to more efficient deployment processes compared to traditional server-based setups.

Firebase, initially a backend-as-a-service (BaaS), also contributed significantly. It provided developers with essential tools for building web and mobile applications, especially useful for real-time applications and database management.

In essence, while traditional web deployments may not offer the scalability and flexibility of newer technologies, their legacy lives on. Tools like cPanel and Heroku continue to be pertinent for certain deployment scenarios, balancing reliability and user-friendliness with technological advancements.

However, in the emerging JS-first world of the web, with new buzzwords like Edge, Serverless, CI/CD pipelines and what not, there’s another new breed of deployment foundations coming up. These traditional web deployments laid the groundwork for today's advanced web technologies. Don’t write them off yet though – their continued use underscores the balance that developers and businesses often seek between cutting-edge technology and proven, stable solutions.

Shift to modern techniques

The evolution from traditional to modern web deployment techniques marks a significant shift in how devs approached building and managing websites and apps, primarily driven by the need for more scalable, efficient, and flexible development processes, so let’s look into a few of those unlocked achievements.

Advantages of Modern Deployment Techniques

Scalability and Performance

Modern techniques prioritize scalability, allowing web apps to handle increased traffic and data loads smoothly (no one wants a Black Friday 529 or 404 anymore). This scalability is often achieved through cloud-based solutions and serverless architectures, which dynamically allocate resources as needed. It’s no surprise that AWS, GCP, and Azure alone account for over 65% of the cloud market given the near-infinite real-time scalability 🤯

CI/CD

The adoption of CI/CD pipelines has also added big gains into the development process. Changes to codebases are automatically tested and deployed, significantly reducing the time and effort required for updates and ensuring that applications are always in a deployable state.

Increased DX and Productivity

Modern deployment tools streamline various processes, from code integration to server management. This automation reduces the manual workload on developers, allowing them to focus more on development rather than operational challenges, or spending the whole day waiting for branches to merge.

Improved Reliability and Uptime

Advanced deployment strategies come with enhanced reliability. Techniques like blue-green deployments and canary releases ensure that new versions are rolled out smoothly without disrupting the user experience. And even if it does, rollbacks to previous versions are much easier than they used to be when having to manually revive backups from a database.

Features unlocked by Modern Deployment

Containerization

Technologies like Docker and BuildKit have popularized containerization, allowing applications to be packaged with their dependencies, ensuring consistency across different environments and simplifying deployment processes, rather than the entire app being a mammoth of a code-maze.

Microservice Architectures

Modern deployments often leverage microservices, breaking down applications into smaller, independently deployable services and APIs. This approach enhances flexibility and facilitates quicker updates. The approach has gotten so reliable, that entire suites are being replaced by Stacks (think a DXP going from being an all-in-one solution to a composable architecture consisting of individual APIs for a CMS, cart, PIM, CRM, etc.)

Serverless and Edge

The cool buzz from the late 2010s, serverless architectures abstract server management and infrastructure decisions away from devs. This means developers can focus on code, while the platform handles scaling, deployment, and infrastructure management. This, in many ways, gave rise to Edge Computing - where modern deployments deliver content closer to the user, reducing latency and improving content delivery speeds.

Automated Testing and Monitoring

Modern tools integrate automated testing and monitoring, ensuring that any deployment issues are quickly identified and addressed, maintaining the overall health of the application.

The shift to modern deployment techniques has fundamentally changed the landscape of web development. It offers a more agile, efficient, and scalable approach, focusing on the exponentially increasing demands of modern web apps and their end users. So let’s take a quick look at this, and look at some of the new solutions enabling this change.

The rise of Serverless Architectures and Frontend Clouds

This move serverless architecture and frontend clouds has significantly influenced the web development landscape. This approach shifts much of the infrastructure management burden away from developers, allowing them to focus on code, while the backend dynamically adjusts to the application's requirements. But who’re the frontrunners on this? At Dato we’ve got all our starters ready to deploy with Vercel and Netlify, along with plugins and docs for other platforms too, so let’s take a closer look at some of the ones you should have your eyes on.

Vercel

Specializing in frontend frameworks, especially Next.js, Vercel offers a developer-friendly environment with features like edge functions and optimal performance. Its automatic scaling and ease of use for deployment make it a top choice for developers looking to quickly launch and update their web applications. They also ship INCREDIBLY fast, and have one of the most active communities out there making NextJS + Vercel an obscenely common choice and for good reason.

Netlify

A pioneer in Jamstack development (they basically coined the term), Netlify provides a robust platform for building, testing, and deploying web projects. Its strengths lie in continuous deployment from Git across a global application delivery network, enhanced with features like form handling, serverless functions, and large-scale automation.

PS: Gatsby Cloud used to be another one until the Netlify folks acquired Gatsby.

GitHub Pages

Tailored for hosting simpler websites and documentation, GitHub Pages is seamlessly integrated with GitHub, offering a straightforward solution for deploying static content directly from repositories. It’s particularly suited for developers already using GitHub for their repos and collaboration.

Cloudflare Pages

With a focus on performance, Cloudflare Pages is optimized for serving static content across its vast global network (considering they’re arguably the largest CDN out there). It offers excellent integration with existing Cloudflare features, enhancing the security and speed of web applications.

Others

While those are sometimes considered the big 4, there’s other mammoths out there from AWS, GCP, and Microsoft too that we can’t ignore, especially for large-scale and complex apps.

AWS Amplify

As part of Amazon’s cloud offerings, AWS Amplify stands out for its comprehensive approach to building full-stack applications, providing both frontend and backend solutions, including authentication, data storage, and an API gateway for serverless computing.

Firebase

Google's Firebase offers a wide range of tools for web and mobile development. Its hosting services are known for delivering static and dynamic content with high performance, and it’s often used alongside Google Cloud functions for an extended serverless architecture.

Azure Static Web Apps

This service from Microsoft integrates with Azure Functions, offering an environment for modern web app development. It focuses on first-class support for a variety of frontend frameworks and automatic deployment from GitHub repositories.

Are there more? Yes. Depending on your use case you’d see names like Google App Engine, Digital Ocean Droplets, Surge, Render, and more. Depending on your project, there’s definitely some due diligence needed to make sure you’re deploying on the best possible platform for you.

It’s worth noting that the move towards serverless architecture and frontend clouds is more than just a trend; it's a pretty big shift that offers unprecedented levels of efficiency and flexibility. As these technologies continue to evolve, they're set to define the future growth of web development and continue giving birth to a whole new ecosystem of really innovative and cool dev tooling!

Previous chapter
Frameworks and Technologies​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​‌​​‍‍​‍​‍‌‍​‌‍‌‌​​‍‍‌‍‌​‌‍​‌‌‌​‌‍‌‍​‌‍‌‌​​‍‍‌‍​‌‍‌‍‌​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​‌‍‌​‍​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌‌‌‌​‌‍‌‌​​‌‍‌‌‌​​‍‌‌‌‌‌​‍‍​​‌‌​‌​​​‌‌‌​‍‌‍​‌‌‌​​​‍​​‍​‌‍‌​‌‌​‌​‍‌‌‍‌​‌​‌‌‍‌‌​‌​‌‌​‍​‌‍‌​‍‌‍‍‌‌‌​‌‍‌‌‌‍‌‌​​‍‌‌‌‌‌​‌‌‌​​‌‍​‍​​‌​‌‌​‌‌‌‌‍‌‌​‌‌​​‌​​​‌‍‌‍‍‍‌‌‍‌‌​​​‍​‌‍​‌‍‌‍‌‍​‌​​‌​‌‌​‍​‍‌‌