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:
- Open a terminal in your project folder.
- 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
- Log in to Vercel (opens in a new tab).
- On the dashboard, click "New Project".
- 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".
- 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
-
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
.
- Framework Preset: Automatically detected as
-
Review the configuration and ensure everything is correct.
-
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:
- Go to your project’s Settings in the Vercel dashboard.
- Navigate to the Environment Variables section.
- Add the required environment variables, such as:
API_URL
: The base URL for your API.NODE_ENV
: The environment type (e.g.,production
ordevelopment
).
- 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.
- After the build process finishes, you will see a success message with the deployment URL (e.g.,
https://your-project.vercel.app
). - 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:
- Ensure your Git repository is linked to Vercel (see Step 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:
- Ensure your
vite.config.ts
includes the correctbase
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:
- Vercel Documentation (opens in a new tab): Official documentation for deploying and managing applications.
- Vite Deployment Guide (opens in a new tab): A guide specifically for deploying Vite projects to Vercel.