Skip to main content

​
Quick Start Guide

Get Plugin Agency up and running on your local machine in just a few minutes. This guide will walk you through the essential steps to clone, configure, and launch the application.
Make sure you have Node.js installed on your system before proceeding. Node.js 18 or higher is recommended.

​
Setup Steps

1

Clone the Repository

Clone the Plugin Agency repository from GitHub:
git clone https://github.com/salvador-castro/plugin-agency.git
cd plugin-agency
This will download the project and navigate into the project directory.
2

Install Dependencies

Install all required dependencies using your preferred package manager:
npm install
This will install:
  • React 19.2.0 and React DOM
  • Vite 7.2.4 (build tool)
  • Nodemailer 7.0.13 (email handling)
  • react-google-recaptcha 3.1.0 (spam protection)
  • Lucide React 0.575.0 (icon components)
  • All development dependencies including ESLint
3

Configure Environment Variables

Create a .env file in the root directory of your project:
touch .env
Add the following environment variables:
EMAIL_USER=your_gmail_address
EMAIL_PASS=your_app_password
VITE_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key
For Gmail, you need to generate an App Password instead of using your regular password. This is required for security reasons.
Get your reCAPTCHA keys from the Google reCAPTCHA Admin Console. You’ll need to register your site and get both a site key and secret key.
4

Start the Development Server

Launch the Vite development server:
npm run dev
You should see output similar to:
VITE v7.2.4  ready in 324 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.10:5173/
➜  press h + enter to show help
The development server runs on port 5173 by default. Open your browser and navigate to http://localhost:5173 to see your application.
5

Verify Installation

Your Plugin Agency landing page should now be running! You should see:
  • A dynamic video background in the hero section
  • Responsive navigation bar
  • Team showcase with avatars
  • Services overview section
  • Contact form with reCAPTCHA
Try resizing your browser window to test the responsive design, or open the site on your mobile device using the network URL provided by Vite.

​
Build for Production

Once you’re ready to deploy, build the production version: 
npm run build
This creates an optimized production build in the dist/ directory.

​
Preview Production Build

Test your production build locally before deploying: 
npm run preview

​
Next Steps

Detailed Installation

Learn more about prerequisites, configuration, and troubleshooting.

Configuration

Customize your Plugin Agency installation.

Build docs developers (and LLMs) love

Get started for freeTalk to us