🎉 Neo Starter Kit is released. Buy now →
Deployment
Vercel

Vercel Deployment

Deploying Neo Starter Kit to Vercel is quick and easy. Vercel provides a reliable, high-performance platform optimized for React and Vite applications. Follow these steps to get your project live in no time!

Prerequisites

Before you start, ensure you have:

  • A Vercel account. Sign up at vercel.com (opens in a new tab) if you don’t already have one.
  • The latest version of Node.js installed locally.
  • A properly set up Neo Starter Kit project. Refer to the Installation Guide if you haven’t set it up yet.

Step 1: Initialize a Git Repository

Vercel works seamlessly with Git. If you haven’t already, initialize a Git repository for your project:

  1. Open a terminal in your project folder.
  2. Run the following commands:
git init
git add .
git commit -m "Initial commit"

3.Push your code to a remote repository (e.g., GitHub, GitLab, or Bitbucket).

Step 2: Connect Your Repository to Vercel

  1. Log in to Vercel (opens in a new tab).
  2. On the dashboard, click "New Project".
  3. Import your Git repository:
    • Select your Git provider (e.g., GitHub, GitLab, or Bitbucket).
    • Authorize Vercel to access your repository.
    • Choose the repository for Neo Starter Kit and click "Import".
  4. Vercel will detect your project settings automatically. Review and confirm the configuration.

Once the repository is connected, you can proceed to configure your build settings in the next step.

Step 3: Configure Build Settings

  1. After importing your repository, verify the following build settings on the Project Configuration page:

    • Framework Preset: Automatically detected as Vite.
    • Build Command: Ensure it is set to: 
      npm run build
    • Output Directory: Set to dist.

  2. Review the configuration and ensure everything is correct.

  3. Click "Deploy" to start the deployment process.

Vercel will now build your project and deploy it to a live URL. Once the deployment is complete, you’ll be provided with a unique URL for your application.

Step 4: Add Environment Variables (Optional)

If your project requires environment variables for things like API keys or configurations, you can add them in Vercel:

  1. Go to your project’s Settings in the Vercel dashboard.
  2. Navigate to the Environment Variables section.
  3. Add the required environment variables, such as:
    • API_URL: The base URL for your API.
    • NODE_ENV: The environment type (e.g., production or development).
  4. Click Save after adding each variable.

Tips for Environment Variables:

  • Make sure the variable names match those used in your code.
  • You can set different values for Production and Development environments if needed.

Once your environment variables are set, redeploy your application to apply the changes.

Step 5: View Your Live Application

Once the deployment is complete, Vercel will provide you with a live URL for your application.

  1. After the build process finishes, you will see a success message with the deployment URL (e.g., https://your-project.vercel.app).
  2. Click the URL to view your live application in the browser.

Next Steps:

  • Test your application to ensure everything works as expected.
  • Share the URL with your team or stakeholders for feedback.

Congratulations! Your Neo Starter Kit is now live on Vercel. 🎉

Step 6: Enable Continuous Deployment (Optional)

Vercel makes it easy to keep your application up-to-date with continuous deployment. This means any changes you push to your connected Git repository will automatically trigger a rebuild and deployment.

How to Enable Continuous Deployment:

  1. Ensure your Git repository is linked to Vercel (see Step 2).
  2. Make changes to your project locally and push them to your remote repository: 
    git add .
git commit -m "Your commit message"
git push origin main

Troubleshooting

Even with Vercel’s seamless deployment process, you might encounter a few common issues. Below are solutions to help you resolve them quickly.

Build Fails

If your build fails, check the following:

  1. Ensure your vite.config.ts includes the correct base property:
export default defineConfig({
   base: '/',
});
2.Verify that all dependencies are installed correctly by running:
npm install

Missing Environment Variables

If your app depends on environment variables, ensure they are added correctly in the Environment Variables section of the Vercel dashboard.

Performance Issues

For performance monitoring and suggestions:

  • Use Vercel’s Analytics feature to identify bottlenecks.
  • Ensure that images and assets are optimized for web usage.

Additional Resources

Here are some helpful links to guide you through Vercel and Vite deployment processes:

Dark Mode