Stay organized with collections
Save and categorize content based on your preferences.
Build a serverless ecommerce web app with Python, Cloud Run, Cloud SQL, and Firebase
Learn how to build a modern serverless ecommerce web app using a Django and Cloud Run backend, Cloud SQL data storage, and Firebase.
Go back
check_circle
Overview: Building a serverless ecommerce web app
ondemand_video
Video
Learn about architecting a serverless, content-driven web application built with a Django backend on Cloud Run, using Cloud SQL for data storage and Firebase. Explore the critical considerations for building a serverless ecommerce web app.
check_circle
Backend for a serverless content-driven app
subject
Article
Optional
This pathway uses the
Django REST framework
to build its backend. This is a popular choice due to its ease of use, scaling and performance
features, and extensive developer community.
Building this backend includes the following:
Following the serverless approach to a three-tier web application architecture:
the frontend communicates with the Django-based backend, which communicates with
data storage services.
Using Cloud Build, Django framework features, and
Playwright
to automate testing and deployment.
Deploying the application to Cloud Run and Firebase, which manage the underlying
infrastructure and automatically handle scaling.
Learn more about designing the backend for a content-driven web application and the key
considerations when selecting an architecture and framework, such as a serverless, containerized
approach.
This application uses
CloudSQL for PostgreSQL
as a relational database system to store product and transaction data.
This data storage model offers the following for an ecommerce application:
Strong data consistency, transactional reliability, and support for advanced
SQL-based queries.
Automatic scaling and management of the database system.
Native connection to Django's data model system, making integration into the backend easier.
Static assets and files, such as product photos, are stored in
Cloud Storage
,which is optimized for storing, retrieving and serving files and blobs.
For any content-driven application, using a dedicated storage system for static assets offers
the following:
Automatic scaling, caching and distributed serving of content.
Media can be served directly at scale using built-in access control and content delivery
features, including the option to connect it to a CDN service such as
Cloud CDN
.
Direct integrations into the backend to simplify the management of data.
Learn more about data storage options for a content-driven web application including how to
choose the best database type and data storage model, how to improve your storage's performance,
and the regulatory requirements that should be considered.
Frontend for a modern ecommerce application with Material Web Components
subject
Article
Optional
The frontend is broken down into web components:
Web components make it easy to structure the frontend into small interoperable components
supported by all modern browsers.
Web components add little performance overhead and simplify development, including
abstractions through scoped styles and reactive properties for efficient re-renders.
The UI is built with a toolkit that supports Material Design on the web, which includes
the following:
UI components that follow accessibility standards for typography, contrast, and more.
Elements that follow web forms best practices, which is critical for a smooth shopping
and checkout experience.
Learn more about designing and building the frontend for a modern ecommerce application.
Frontend uses client-side rendering and is hosted on Firebase,
which automatically manages scaling, latency, and performance.
Backend is deployed to Cloud Run, which offers scalable, serverless hosting of
containerized applications.
Static assets are stored and served directly from Cloud Storage, which is optimized for
static files and can be enhanced using a content delivery network (CDN).
Deployments to these services are managed through Cloud Build, which handles testing and
configuring the environment.
Learn more about hosting and serving options for a serverless, content-driven web application.
Build and deploy a dynamic web application with Python and JavaScript
subject
Article
Explore the sample ecommerce application through a jump-start solution - "Dynamic
Web Application with Python and JavaScript."
As you explore the application,
consider the critical parts discussed in this pathway: the backend, data storage,
hosting, and frontend.
Deploy and run it directly on Google Cloud and see
how to structure and build a modern ecommerce web application with Django, Firebase,
Cloud Run, and Cloud SQL.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[[["\u003cp\u003eThis guide explains how to deploy and use a dynamic web application with Python and JavaScript, showcasing the building and running of dynamic websites on Google Cloud.\u003c/p\u003e\n"],["\u003cp\u003eThe solution deploys the "Avocano" app, a demonstration storefront that simulates inventory management using a Cloud Run-powered API, Cloud SQL for PostgreSQL, and a Firebase frontend.\u003c/p\u003e\n"],["\u003cp\u003eThe deployment process can be executed through the Google Cloud console for a default configuration or via the Terraform CLI for customized, infrastructure-as-code (IaC) management.\u003c/p\u003e\n"],["\u003cp\u003eThis solution utilizes several Google Cloud products, including Cloud Run, Cloud Build, Cloud SQL for PostgreSQL, Secret Manager, Cloud Storage, and Firebase.\u003c/p\u003e\n"],["\u003cp\u003eThe guide provides detailed instructions on how to deploy the solution, customize the application, explore the deployment, and delete it to avoid ongoing billing, including troubleshooting steps for common errors.\u003c/p\u003e\n"]]],["Choosing a backend for a web app depends on the level of control needed, the uniqueness of requirements, and expected traffic. For common needs, popular languages and frameworks with managed servers are recommended. Heavy traffic warrants managed services to reduce infrastructure management effort. Key considerations include the team's expertise, framework and language choices, thorough testing, scaling and performance needs, deployment pipeline setup, and security measures. Each factor should align with the application's current and future demands.\n"],null,["# Backend for a content-driven web applications\n\nThe most important consideration for choosing a backend for a web app is how\nmuch control you need in operating the backend, informed by how unusual your\nneeds are and how much traffic you expect. If you're doing something relatively\ncommon, you're generally best served by using a popular language and framework\nwith a managed server.\n\nIf you expect to have to serve heavy traffic, opting for a managed service lets\nyou save engineering effort in managing your own infrastructure.\n\nConsider the tradeoffs of common web app architectures, language and framework\nchoices, and setting up a reliable testing and build pipeline.\n\nKey Considerations for web backends\n-----------------------------------\n\nMultiple factors impact your architecture choice for a content-driven web\napplication.\n\n| Considerations ||\n|--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| Team's expertise | Your development team's unique skill set, talent, and knowledge influence the types of frameworks and languages that best meet your needs. Your team should know the intricacies of your chosen language. |\n| Frameworks and languages | Backend framework and language options provide the components and structure for creating successful web applications. Select a framework that best supports the language and architectural pattern of your choice. |\n| Testing | Testing is a critical part of the development process and any on-going monitoring to ensure the health of your application. |\n| Scaling and performance | Scaling and progressive performance are critical; be sure to consider how your application will grow and develop in the future. Scaling horizontally and vertically may require additional resources and impact the cost of running your backend, including unique challenges for content-driven web application backends. If expanding an existing web application, consider the potential constraints of the current infrastructure and your needs as you expand. |\n| Deployment | Implement an effective build pipeline for your backend to cover the entire build, test, deploy, and promote the lifecycle of your application. |\n| Security | Consider a security solution that best meets your application's requirements to ensure the confidentiality and integrity of private customer data. |"]]
