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!
Side Notes
Although not directly related to the specifics of deployments in the general scope of this page, it's important to keep an eye on supplementary tooling choices and architectural decisions that highly impact your deployments and the end UX.
(This will be a rolling list of topics and concerns that come up from our community, so we'll try to keep it helpful and specific, and less vague 😬)
CDN & Caching
While most of the Academy is relatively vendor agnostic, we're going to be a bit biased here and cover CDNs from the perspective of how we do things at DatoCMS.
Your media assets like images and videos are already heavily cached through our partnerships with commercial CDNs. They should be fast and reliable around the world, and it's safe to directly serve these to your visitors. (Do check out our docs for how assets are handled, specifically for the way images are handled via imgix, and videos via Mux).
It isn't necessary to add your own CDN on top of ours unless you have special needs or can negotiate better pricing with another CDN vendor on your own. In general we already try to buy in bulk from our upstream providers and pass the savings onto you.
We also cache your GraphQL API calls to our Content Delivery API whenever possible, but very long or complex queries may not be cacheable (you can see details in a query's response headers). In general we recommend statically building your frontend, pre-fetching data from our API at build time and only serving your visitors the built pages. This way you pay for fewer API calls, and your visitors get better performance since they don't have to wait for a round-trip from your servers to ours. If you have more real-time content not suitable for static builds, that might require a different setup, which our support would be glad to discuss with you on a case-by-case basis.
Other DatoCMS systems, like our admin/editor UI or the Content Management API, go through different routes. These aren't as heavily cached, but they should not be user-facing anyway. They are generally used by your editors and developers, who have different needs than your visitors. If you have specific questions about these systems, we'd also be happy to discuss them on a case-by-case basis.