Prerequisites
Before you begin, ensure you have the following installed:
Node.js
Version 20.x or higher
npm
Version 10.x or higher (comes with Node.js)
VS Code
Recommended IDE (optional)
Installation
Clone the repository
git clone <repository-url>
cd source
Install dependencies
Install all required packages using npm:This will install all dependencies listed in package.json, including:
- Next.js 14.2.14
- React 18
- TypeScript 5
- Tailwind CSS 3.4.1
- And many more…
Configure environment variables
Create a .env.local file in the root directory:# API Configuration
NEXT_PUBLIC_API_BASE_URL=http://your-api-url
# Add other environment variables as needed
The API base URL should point to your backend Laravel API endpoint.
Run the development server
Start the Next.js development server:The application will be available at http://localhost:3000 Available Scripts
SIGEAC includes the following npm scripts:
npm run dev
# Starts the Next.js development server with hot reload
TypeScript Configuration
SIGEAC uses TypeScript with the following configuration (tsconfig.json):
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"paths": {
"@/*": ["./*"]
}
}
}
The @/* path alias allows you to import modules from the root directory:import { Button } from '@/components/ui/button'
import { useAuth } from '@/contexts/AuthContext'
IDE Setup
VS Code Extensions
Recommended extensions for optimal development experience:
- ES7+ React/Redux/React-Native snippets - Code snippets
- Tailwind CSS IntelliSense - Autocomplete for Tailwind classes
- ESLint - Code linting
- Prettier - Code formatting
- TypeScript and JavaScript Language Features - Built-in
VS Code Settings
Add to your .vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"tailwindCSS.experimental.classRegex": [
["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
}
Next.js Configuration
The Next.js configuration (next.config.mjs) includes:
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "http",
hostname: "172.190.0.162",
},
{
protocol: "https",
hostname: "apisigeactmd74.share.zrok.io",
},
],
},
};
Remote image patterns are configured for specific API domains. Update these to match your backend server.
Troubleshooting
Port Already in Use
If port 3000 is already in use:
# Use a different port
npm run dev -- -p 3001
Module Not Found
If you encounter module not found errors:
# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
Type Errors
If TypeScript shows errors:
# Restart TypeScript server in VS Code
# Command Palette (Cmd/Ctrl + Shift + P)
# TypeScript: Restart TS Server
Verify Installation
After setup, verify everything is working:
Check development server
Navigate to http://localhost:3000 - you should see the login page
Check hot reload
Make a small change to any file and verify the page updates automatically
Check TypeScript
Open any .ts or .tsx file - you should see proper IntelliSense and no errors
Next Steps
Project Structure
Learn about the codebase organization
Tech Stack
Explore the technologies used
