Pages and Components
- Pages Locate src/app/
- Component Locate src/components/
Thank you for choosing our template!
If you need any assistance or have questions beyond this documentation, please don’t hesitate to open a support ticket on our support forum. We’re here to help and will get back to you as soon as possible.
Documentation v1.0
Important – Third-Party AI Services & Costs
This application uses OpenAI and Google Gemini. API keys and usage costs are not included in the
purchase price.
Weblify is a powerful AI-driven no-code website builder that allows users to generate fully responsive, multi-page websites in seconds. With real-time customization, drag-and-drop sections, and HTML export functionality, users can create professional websites without any coding knowledge.
Ensure you have Node.js installed on your computer. You can download it from here. Make sure to install the LTS (Long Term Support) version.
1. Open new terminal and go to WeblifyBackend:
cd WeblifyBackend
2. Install dependencies
npm install
3. .env file inside change your path:
BASE_URL=http://localhost:5001
JWT_SECRET=your_jwt_secret
FRONTEND_BASE_URL=http://localhost:3000
MONGODB_URl=mongodb://localhost:27017/dbname
GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET
GOOGLE_CALLBACK_URL=http://localhost:5300/api/auth/google/callback
GITHUB_CLIENT_ID=YOUR_GITHUB_CLIENT_ID
GITHUB_CLIENT_SECRET=YOUR_GITHUB_CLIENT_SECRET
GITHUB_CALLBACK_URL=http://localhost:5300/api/auth/github/callback
4. Run backend server:
npm start
or for development:
node app.js (will start the dev server at http://localhost:5001)
5. Admin Login Details:
Email : admin@gmail.com
Password : Admin@123
For more details, refer to the Node documentation here
1. Open new terminal and go to WeblifyFrontend:
cd WeblifyFrontend
2. Install dependencies
npm install
3. .env file inside change your path:
VITE_API_URL=http://localhost:5001/api/
VITE_BACKEND_BASE_URL=http://localhost:5001
4. Run Frontend:
npm start
or for development:
npm run dev (will start the dev server at http://loaclhost:3000)
For more details, refer to the React documentation here
Direct data import:
Open terminal / command prompt in the folder root directory
Run:
cd WeblifyBackend
node importdata.js
OR
Open new terminal and go to WeblifyBackend:
cd database
mongoimport --db dbname --collection admins --file admins.json --jsonArray
mongoimport --db dbname --collection countries --file countries.json --jsonArray
mongoimport --db dbname --collection states --file states.json --jsonArray
mongoimport --db dbname --collection user --file user.json --jsonArray
Like this type add all the collection one by one
Direct data Export:
Open terminal / command prompt in the folder root directory
Run:
cd WeblifyBackend
node exportdata.js
Generate exportdatabase folder in root directory
MongoDB Setup:
Use MongoDB Atlas Go to MongoDB Atlas
Backend Deployment:
Deploying to Render Go to https://render.com
Frontend Deployment:
Deploying to Vercel Go to https://vercel.com
OR
Deploying to Netlify Go to https://app.netlify.com
Locate src/styles/theme.css to change the primary color scheme of your theme and change your fonts. Done in no time!
Locate public/ to change the logo, favicon and other static images.
Locate src/app/App.tsx to check all routes.
Locate WeblifyBackend/database -> attach all the table.
Go to Admin dahsboard -> sidebar option Payment Gateway -> update your key
Go to Admin dahsboard -> sidebar option Settings -> update your Email & Password for email sent
Go to Admin dahsboard -> sidebar option Manage API -> update Key your requirement
Note :
2. You can select Gemini AI API Update Gemini AI API KEY
3. You can select OpenAI API Update OpenAI API KEY
4. You can using AI based description so set Gemini AI API KEY
Font Used: Google Fonts
Icon Used: React Lucide Icons
Image Used: Freepik & Vecteezy