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.
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.
For a visual walkthrough, watch our video tutorial below:
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.
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.
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.
With the environment variables configured, simply click the "Deploy" button to initiate the deployment of your project on Vercel.
Upon successful deployment, acquire the public URL of your project and proceed to update the Weaverse Preview URL within the Weaverse Studio interface.