Logo
  1. Docs
  2. Deployment

Deploy to Vercel

Published on Jan 24, 2024, updated a month ago

Deploying Your Weaverse Hydrogen Project to Vercel

As a dynamic cloud platform, Vercel provides developers with robust tools for deploying, managing, and scaling their web and application projects. While it excels in deploying Next.js applications, its capabilities extend to a wide range of other application frameworks.

Important Considerations

Before opting to host your website on Vercel, be aware of these critical points:

  • Vercel offers a unique approach to caching requests, which may not natively support the Remix app. Modifications in the code could be necessary for optimal performance on Vercel. Further information can be found here.
  • Vercel is not included for free in the Shopify Basic plan like Oxygen is. Thus, it incurs additional costs.
  • Deploying to Vercel is particularly recommended if:
    • You're on the Shopify Starter/Development plan, which doesn't include the Oxygen feature.
    • Vercel is used solely for development/testing purposes.
    • You prefer Vercel's features and are willing to bear the associated costs.

In this guide, we focus on deploying a Weaverse Hydrogen Project, a Remix-based application, to Vercel.

Video Tutorial

For a visual walkthrough, watch our video tutorial below:

Guided Deployment Procedure

Clone the Theme on GitHub

Weaverse offers two distinct starter themes: Pilot and Naturelle. Select your preferred theme and use the "Use this template" button to forge a new repository. For a more streamlined approach, utilize the "Deploy to Vercel" option found in the theme's README page, allowing Vercel to facilitate the deployment process.

Connect with Vercel

Once your repository is set up, navigate to your Vercel dashboard and select the "Add New Project" button. Identify and choose the newly created repository, then proceed by clicking the "Continue" button.

Configure the Environment Variables

Following the repository connection, your next step is to configure the necessary environment variables. Detailed guidance on these variables can be found in our comprehensive Environment Variables guide.

Deploy

With the environment variables configured, simply click the "Deploy" button to initiate the deployment of your project on Vercel.

Update Weaverse Preview URL

Upon successful deployment, acquire the public URL of your project and proceed to update the Weaverse Preview URL within the Weaverse Studio interface.


Was this article helpful?