Every Ecommerce website needs a good CI/CD Setup.
CICD stands for Continuous Integration and Continuous Deployment (or Continuous Delivery). It's a set of practices that aims to improve the software development process by introducing automation and a consistent set of principles. Here's a breakdown:
- Continuous Integration (CI):
- Definition: CI is the practice of frequently integrating code changes from multiple contributors into a shared repository. After integration, automated and manual tests are run to catch and fix integration errors as quickly as possible.
- Purpose: The main goal is to detect and address integration problems early, ensuring that software components work together seamlessly.
- Continuous Deployment/Delivery (CD):
- Definition:
- Continuous Delivery: This ensures that the codebase is always in a deployable state. It involves automatically building, testing, and preparing code for production, but the final step of deploying to production is manual.
- Continuous Deployment: This is a step further than Continuous Delivery. Every change that passes the automated tests is automatically deployed to production without human intervention.
-
Purpose: The aim is to release new features, configurations, and bug fixes to users as quickly and efficiently as possible.
Why is CI/CD needed?
- Faster Release Rate: CI/CD accelerates the software release process, enabling organizations to bring new features and improvements to users more quickly.
- Improved Developer Productivity: Automation reduces manual and repetitive tasks, allowing developers to focus on writing code and improving the product.
- Reduced Integration Issues: By integrating frequently, integration problems are detected and fixed early, reducing the complexity of merges and improving code quality.
- Reliable Releases: Automated testing and staging environments ensure that any code destined for production has undergone rigorous testing, reducing the chances of post-release bugs.
- Faster Feedback Loop: Developers receive immediate feedback on their changes, allowing for quicker iterations and improvements.
- Reduced Costs: By catching and fixing issues early in the development lifecycle, the costs associated with bug fixes, downtime, and customer dissatisfaction are reduced.
- Enhanced Customer Satisfaction: With the ability to release new features and fixes more frequently, organizations can be more responsive to customer needs and feedback.
- Scalability: CI/CD practices, especially when combined with containerization and orchestration tools, allow for scalable and consistent deployment processes.
CI/CD introduces automation and consistency into the software development lifecycle, leading to faster, more reliable releases, and enabling merchants to be more agile and responsive to market demands and customer feedback.
For a smooth CICD setup, multiple ecommerce environments are required so that different work streams and stakeholders can collaborate and work together all aimed at getting the website to golive on time and to help provide improved user experience in a continued and sustainable manner.
Let us go through the different Environments and why a merchant may need them:
- Production Environment: This is the live environment where the website is available to end-users. Any code deployed here should be thoroughly tested in the previous environments.
- Development Environment: This is where developers write and test their code. Each developer might have their own local development environment on their machine.
- Integration Environment: After developers complete their individual tasks, they merge their code into a shared repository. The integration environment is where this merged code is deployed and tested to ensure that different pieces of code work well together.
- Staging Environment (or UAT - User Acceptance Testing): This environment closely mirrors the production environment. It's used to validate the functionality and performance of the application in a setup that's as close to the real-world scenario as possible. UAT specifically refers to the process where end-users (or QA teams) test the application to ensure it meets business requirements.
- Backup or Disaster Recovery Environment: Some enterprises maintain a backup of their production environment to quickly restore services in case of failures.
- Feature or Topic Branch Environments: For teams practicing feature branching or trunk-based development, temporary environments might be spun up for testing specific features or changes before they're merged into the main codebase. This is ideal for preparing for a specific campaign like the Christmas theme of the website.
- Performance Testing Environment: In some cases, especially for large e-commerce platforms, there might be a dedicated environment to conduct performance and load testing.
- QA Environment: Some organizations have a separate environment where the Quality Assurance team tests the application before it moves to UAT or staging.
Let us now assume that a BigCommerce merchant has signed up.
They will start adding the users (own, agency and any external consultants) working on the store.
The different teams who may be involved in the Store setup:
Here's a breakdown of the potential teams and their responsibilities for setting up the website:
- Project Management Team:
- Role: Oversee the entire project, ensuring that milestones are met, resources are allocated appropriately, and communication flows smoothly between all teams.
- Responsibilities: Project planning, timeline management, stakeholder communication, risk management.
- Design & UX Team:
- Role: Create the visual and interactive elements of the store.
- Responsibilities: Designing the store's layout, creating graphics and visual assets, ensuring a user-friendly experience, mobile responsiveness, and optimizing user flow.
- Development Team:
- Role: Implement the design and functionality of the store.
- Responsibilities: Setting up the BigCommerce store, customizing themes, developing custom features or integrations, ensuring the store is mobile-responsive, and addressing any technical issues.
- Content Team:
- Role: Populate the store with necessary content.
- Responsibilities: Product descriptions, blog posts, informational pages, multimedia content (photos, videos), and SEO optimization.
- Product Management Team:
- Role: Manage the store's product catalog.
- Responsibilities: Product categorization, pricing, inventory management, product attributes, and variations.
- Marketing & SEO Team:
- Role: Drive traffic to the store and optimize its visibility on search engines.
- Responsibilities: SEO strategy, pay-per-click (PPC) campaigns, email marketing, social media marketing, and promotions.
- QA (Quality Assurance) Team:
- Role: Ensure the store functions correctly and meets quality standards.
- Responsibilities: Testing the store's functionality, identifying bugs or issues, ensuring compatibility across devices and browsers, and validating that user flows work as intended.
- Customer Support & Service Team:
- Role: Assist customers and address their concerns.
- Responsibilities: Handling customer inquiries, managing returns or exchanges, addressing complaints, and providing post-purchase support.
- Operations & Logistics Team:
- Role: Manage the backend operations related to order fulfilment.
- Responsibilities: Order processing, shipping, inventory management, and supplier coordination.
- Security & Compliance Team:
- Role: Ensure the store is secure and meets any regulatory requirements.
- Responsibilities: Implementing security measures, monitoring for threats, ensuring data protection, and ensuring compliance with industry regulations (e.g., PCI DSS for payment processing).
- Analytics & Data Team:
- Role: Analyse store performance and customer behaviour.
- Responsibilities: Setting up analytics tools, monitoring KPIs, generating reports, and providing insights for optimization.
- Training Team (if necessary):
- Role: Train staff on using the BigCommerce platform.
- Responsibilities: Conducting training sessions, creating documentation, and providing ongoing support.
These team members are required to do a bunch of settings and changes to a Store to get it ready for going live.
There are over 35 different interfaces within the control panel where the changes are implemented.
Design and Content
- Pages
- Widgets
- Coupon Codes
- Banners
- Blog Posts
- Email Templates
- Abandoned Cart Email Templates
- Design Themes
Product Catalogue Data
- Brands
- Categories
- Product Catalogue
- Price Lists
- Price List Assignments
- Promotions
Order Data
- Gift Certificates
- Customer Groups
- Customer Attributes
- Anonymise Customer data
Store settings
- Currencies
- Channel Currency Assignments
- Channel Customer Settings
- Channel Order Settings
- Email Statuses
- Search Filters Enabled
- Search Contextual Filters
- Store Locale
- Store Front Robots
- Store Front Search
- Store Front SEO
- Store Front Status
- Web Analytics
- Catalog Settings
- Inventory Notifications
- Store Logo Settings
- Store Profile
- Storefront Category Settings
- Storefront Product Settings
- Storefront Security Settings
- Shipping Zones
- Shipping Methods
- Channels & Multistore Settings
B2B Edition
- Companies
- Addresses
- Users
- Orders
- Super Admins
- Quotes
- Shopping List
- Invoices
Pages, Categories for each storefront
Let us say they managed to do all the changes on a single store and made that live.
How will they test incremental product additions, campaigns, apps, setting changes, promotions on the production without disrupting their live customers?
Welcome to Staging Pro.
View all production and staging environments in one place. Unlike Shopify, BigCommerce staging offers full feature share by provisioning independent stores with their own login and control.
Staging Pro Creates a staging website with all the 40 + settings with a single Click.
Users can do INCREMENTAL DATA MOVEMENT AND TESTING by doing one product, a group of products or all products from a web interface.
Code control: This is needed so that all the codes developed by the team is on a repository to be able to rollback easily. BigCommerce allows up to 20 themes.
https://support.bigcommerce.com/s/article/Stencil-Themes?language=en_US
An ecommerce website goes through hundreds of updates to the theme and ideally should have a CICD that is able to view/rollback all the versions.
User control: Not all the users need to be given Production access. Also not all users need to be given access to all the different environment. Staging Pro helps user control in a seamless way by allowing to login to any of the stores the user has access from the home panel itself.
Changing agencies: Sometimes a merchant wants to change agency or may be want to add a new agency for a separate use case like integration to a new ERP that the current agency may not be able to do. StagingPro allows multiple teams to work independently for a smooth CICD.
Rollback of themes: One can roll back to all themes ever deployed to the production store from the time StagingPro is installed till now.
Preview outside of BigCommerce on the Production store: StagingPro headless setup allows for a store owner to preview the store by connecting to an environment before the theme is uploaded to the control panel. A merchant’s team can place test orders on the production system from the preview theme without end customers even seeing the new design. This is safe and secure before making hew design changes live.
StagingPro also provides an option to Accept or Reject a Developers Theme preview. Accept will publish the theme to the environment.
Content scheduling: A must have for customers needing to deploy promotions, new product lines and theme changes rolled out at different time zones and also at late night when team members may not be available.
Rollback Pro: We have released RollBack Pro for backup and rollback of over 40 different data types in a BigCommerce Store. 40 data types = 40 ways thing can go wrong. So Rollback can provide immense peace of mind should a merchant ever need to rollback changes.
Notifications: Team members work from different locations. Without StagingPro there is absolutely no easy way to notify the changes taking place on a store.
StagingPro: Staging Pro notifies changes for Data migrations and Code Deployments via email, Slack and Microsoft Teams.
Real time status: Without StagingPro a user has no way to know if a deployment is taking place or if a data migration is in progress. StagingPro shows real-time status of the data migrations.
Data anonymisation: While testing on a staging environment a user should not use live customer data as it can have disastrous consequences. StagingPro has an option to anonymise data with a single checkbox during data migration.
GitHub and Channels: B2B and Channels require re-creation manually if StagingPro is not there. Customers using StagingPro can replicate the same settings across B2B and Channels as and when needed.
GitHub and GitLabs integration: All the environments and the different branch should be created, stored and used rigorously for a smooth CICD. Without StagingPro it is hard to keep track of changes being made by different team members. StagingPro integrates with the Merchant’s repository making it safe and secure. A merchant can keep all codes if an agency team member or the agency stops working on the website.