DEV Community

Ramandeep Singh
Ramandeep Singh

Posted on

πŸ“― Quick Vercel Deployment Guide

πŸ“―πŸŽ‰ChromaCore: Chatbot Interface Wizard πŸŽ‰

I have built a πŸ€– Chatbot interface wizard providing a variety of themes for your chatbot and is live on Vercel.

I am happy to announce that the ChromaCore project is now live on Vercel! πŸš€

Here is the live preview: ChromaCore 🌐

Visit the website and explore the themes you wish to purchase. 🎨

Here is detailed repository for the same: chromacore πŸ“š

How I deployed the website on Vercel: πŸ› οΈ

  1. Install Vercel CLI πŸ’»
   npm install -g vercel
Enter fullscreen mode Exit fullscreen mode
  1. Login to Vercel πŸ”‘
   vercel login
Enter fullscreen mode Exit fullscreen mode
  1. Configure Deployment βš™οΈ
    • Create a vercel.json file in your project root with the following configuration:
   {
     "version": 2,
     "builds": [
       {
         "src": "**/*.html",
         "use": "@vercel/static"
       },
       {
         "src": "**/*.css",
         "use": "@vercel/static"
       },
       {
         "src": "**/*.js",
         "use": "@vercel/static"
       },
       {
         "src": "**/*.png",
         "use": "@vercel/static"
       },
       {
         "src": "**/*.jpg",
         "use": "@vercel/static"
       },
       {
         "src": "**/*.jpeg",
         "use": "@vercel/static"
       },
       {
         "src": "**/*.gif",
         "use": "@vercel/static"
       },
       {
         "src": "**/*.svg",
         "use": "@vercel/static"
       }
     ],
     "routes": [
       {
         "src": "/(.*)",
         "dest": "/$1"
       }
     ]
   }
Enter fullscreen mode Exit fullscreen mode
  1. Deploy to Production πŸš€
   vercel --prod
Enter fullscreen mode Exit fullscreen mode
  1. Follow the Prompts πŸ“
    • Choose "Y" to set up and deploy βœ…
    • Select your scope (personal or organization) πŸ‘₯
    • Choose "N" for linking to existing project ❌
    • Enter your project name (e.g., "chromacore") ✏️
    • Press Enter to use current directory ↩️
    • Choose "N" to not override settings ❌
    • Choose "Y" to deploy to production βœ…

The configuration ensures: βœ…

  • All theme directories are included in deployment πŸ“
  • All file types (HTML, CSS, JS, images) are handled correctly πŸ“„
  • Directory structure is maintained πŸ—‚οΈ
  • Proper routing for theme directories πŸ›£οΈ

Your site will be available at: https://[your-project-name].vercel.app 🌐

Top comments (0)