Skip to content
FRONTEND

Publishing

Frontend’s publishing feature provides a streamlined way to deploy your projects to a production environment, making them accessible online to your audience. Publishing creates a live, optimized version of your application that you can share with the world.

How Publishing Works

Section titled “How Publishing Works”

When you publish a Frontend project, the system handles all the complex deployment steps automatically:

  1. Your project files and code are deployed to Vercel, a leading hosting platform
  2. An optimized production build is created for maximum performance
  3. Static assets are distributed to a global CDN for fast loading
  4. A secure HTTPS domain is assigned to your project
  5. Your site becomes accessible via a unique URL

This end-to-end deployment process happens with a single click, eliminating the need for complex DevOps knowledge or manual server configuration.

Technology Stack

Section titled “Technology Stack”

Published Frontend projects leverage a powerful, modern technology stack:

  • Next.js: A React framework that provides server-side rendering, static site generation, and optimized performance
  • React: The industry-standard JavaScript library for building user interfaces
  • Tailwind CSS: A utility-first CSS framework for rapid UI development

This stack ensures your published projects have excellent performance, modern features, and responsive design capabilities out of the box.

Important Considerations

Section titled “Important Considerations”

When publishing a Shopify-connected project, it’s important to understand:

  • Publishing does not modify or alter your Shopify template files or online store
  • It creates a new Headless eCommerce landing page or website that connects to your Shopify backend
  • Your Shopify products, collections, and checkout are accessed through the Storefront API
  • The published site exists independently from your Shopify admin theme editor

This separation allows you to maintain your existing Shopify setup while creating custom shopping experiences with Frontend.

Custom Domains

Section titled “Custom Domains”

While every published project receives a default Vercel domain, you can also assign your own custom domain for a more professional presentation:

Setting Up a Custom Domain

Section titled “Setting Up a Custom Domain”
  1. Navigate to the publish menu in your Frontend project
  2. Select the “Custom Domains” option
  3. Enter your domain name (e.g., yourbrand.com or shop.yourbrand.com)
  4. Follow the provided instructions to verify domain ownership

DNS Configuration

Section titled “DNS Configuration”

After adding your custom domain, you’ll need to create a DNS record with your domain registrar:

  1. Add a CNAME record that points to cname.vercel-dns.com
  2. Allow time for DNS propagation (typically 24-48 hours)
  3. Once verified, your site will be accessible via your custom domain

Frontend will automatically handle SSL certificate provisioning for your custom domain, ensuring secure HTTPS connections for all visitors.

Publishing Updates

Section titled “Publishing Updates”

When you make changes to your project, they won’t appear on the live site automatically:

  • Changes made in the Frontend editor are staged for review
  • You must explicitly publish again to deploy these changes
  • Each new publication creates a new deployment version
  • Previous deployments are preserved in your project history

This workflow ensures that you can thoroughly test changes before making them public, maintaining control over what your users see.

Deployment Logs

Section titled “Deployment Logs”

If you encounter any issues during the publishing process, you can inspect the deployment logs:

  1. Navigate to the publish section in your project
  2. Select “View Deployment Logs”
  3. Review the detailed output from the build and deployment process
  4. Identify and resolve any errors that may have occurred

These logs provide valuable diagnostic information that can help troubleshoot issues with your deployment, ensuring your site goes live smoothly.

Best Practices

Section titled “Best Practices”

To ensure successful publishing:

  • Test your application thoroughly in the development environment before publishing
  • Use the preview functionality to check how changes will appear in production
  • Consider setting up a staging domain for testing before updating your main domain
  • Regularly publish smaller updates rather than infrequent major changes
  • Monitor your deployment logs to catch and address issues quickly

By following these practices, you can maintain a reliable, up-to-date published version of your Frontend project.