256 lines
8.3 KiB
HTML
256 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Galaxy Strike Online - Complete Setup Guide</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
line-height: 1.6;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #2a5298;
|
|
text-align: center;
|
|
border-bottom: 3px solid #2a5298;
|
|
padding-bottom: 10px;
|
|
}
|
|
h2 {
|
|
color: #1e3c72;
|
|
border-bottom: 2px solid #1e3c72;
|
|
padding-bottom: 5px;
|
|
margin-top: 30px;
|
|
}
|
|
h3 {
|
|
color: #2a5298;
|
|
margin-top: 25px;
|
|
}
|
|
code {
|
|
background: #f4f4f4;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
pre {
|
|
background: #f4f4f4;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
overflow-x: auto;
|
|
border-left: 4px solid #2a5298;
|
|
}
|
|
.step {
|
|
background: #f9f9f9;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
.warning {
|
|
background: #fff3cd;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
.error {
|
|
background: #f8d7da;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #dc3545;
|
|
}
|
|
.success {
|
|
background: #d4edda;
|
|
padding: 15px;
|
|
margin: 10px 0;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Galaxy Strike Online - Complete Setup Guide</h1>
|
|
<p>This comprehensive guide will walk you through setting up the entire Galaxy Strike Online project from scratch.</p>
|
|
|
|
<h2>Table of Contents</h2>
|
|
<ol>
|
|
<li><a href="#prerequisites">Prerequisites</a></li>
|
|
<li><a href="#project-download">Project Download</a></li>
|
|
<li><a href="#server-setup">Server Setup</a></li>
|
|
<li><a href="#client-setup">Client Setup</a></li>
|
|
<li><a href="#database-setup">Database Setup</a></li>
|
|
<li><a href="#running-the-application">Running the Application</a></li>
|
|
<li><a href="#testing">Testing</a></li>
|
|
<li><a href="#troubleshooting">Troubleshooting</a></li>
|
|
</ol>
|
|
|
|
<h2 id="prerequisites">1. Prerequisites</h2>
|
|
<div class="step">
|
|
<h3>Required Software:</h3>
|
|
<ul>
|
|
<li><strong>Node.js 18.0.0 or higher</strong> - Download from nodejs.org</li>
|
|
<li><strong>MongoDB</strong> - Local installation or MongoDB Atlas account</li>
|
|
<li><strong>Git</strong> - For version control (optional but recommended)</li>
|
|
<li><strong>Code Editor</strong> - VS Code recommended</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="warning">
|
|
<strong>Important:</strong> Make sure Node.js is version 18.0.0 or higher. Check with <code>node --version</code>
|
|
</div>
|
|
|
|
<h2 id="project-download">2. Project Download</h2>
|
|
<div class="step">
|
|
<h3>Option A: Clone from Git Repository</h3>
|
|
<pre><code>git clone <repository-url>
|
|
cd galaxystrikeonline</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Option B: Download ZIP File</h3>
|
|
<ol>
|
|
<li>Download the project ZIP file</li>
|
|
<li>Extract to your desired location</li>
|
|
<li>Navigate to the project directory</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<h2 id="server-setup">3. Server Setup</h2>
|
|
<div class="step">
|
|
<h3>Step 1: Navigate to Server Directory</h3>
|
|
<pre><code>cd Server</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 2: Install Dependencies</h3>
|
|
<pre><code>npm install</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 3: Create Environment File</h3>
|
|
<pre><code>cp .env.example .env</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 4: Configure Environment Variables</h3>
|
|
<p>Edit the <code>.env</code> file with your configuration:</p>
|
|
<pre><code>PORT=3001
|
|
MONGODB_URI=mongodb://localhost:27017/galaxystrikeonline
|
|
JWT_SECRET=your_jwt_secret_key_here
|
|
CLIENT_URL=http://localhost:3000</code></pre>
|
|
</div>
|
|
|
|
<div class="warning">
|
|
<strong>Important:</strong> Replace <code>your_jwt_secret_key_here</code> with a secure random string.
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 5: Database Migration</h3>
|
|
<pre><code>npm run migrate</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 6: Seed Database</h3>
|
|
<pre><code>npm run seed</code></pre>
|
|
</div>
|
|
|
|
<h2 id="client-setup">4. Client Setup</h2>
|
|
<div class="step">
|
|
<h3>Step 1: Navigate to Website Directory</h3>
|
|
<pre><code>cd ../Website</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 2: Install Dependencies</h3>
|
|
<pre><code>npm install</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 3: Create Environment File</h3>
|
|
<pre><code>cp .env.example .env</code></pre>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 4: Configure Environment Variables</h3>
|
|
<p>Edit the <code>.env</code> file:</p>
|
|
<pre><code>VITE_API_BASE_URL=http://localhost:3001/api
|
|
VITE_SOCKET_URL=http://localhost:3001</code></pre>
|
|
</div>
|
|
|
|
<h2 id="running-the-application">6. Running the Application</h2>
|
|
<div class="step">
|
|
<h3>Step 1: Start MongoDB</h3>
|
|
<ul>
|
|
<li>Local: Start MongoDB service</li>
|
|
<li>Atlas: Ensure cluster is running</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 2: Start Server</h3>
|
|
<pre><code>cd Server
|
|
npm run dev</code></pre>
|
|
<p>Server will start on port 3001</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 3: Start Client</h3>
|
|
<pre><code>cd ../Website
|
|
npm run dev</code></pre>
|
|
<p>Client will start on port 3000</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>Step 4: Access Application</h3>
|
|
<p>Open browser and navigate to: http://localhost:3000</p>
|
|
</div>
|
|
|
|
<h2 id="troubleshooting">8. Troubleshooting</h2>
|
|
<div class="error">
|
|
<h3>Common Issues:</h3>
|
|
|
|
<h4>1. MongoDB Connection Error</h4>
|
|
<ul>
|
|
<li>Ensure MongoDB is running</li>
|
|
<li>Check connection string in .env file</li>
|
|
<li>Verify network connectivity</li>
|
|
</ul>
|
|
|
|
<h4>2. Port Already in Use</h4>
|
|
<ul>
|
|
<li>Check if ports 3000 or 3001 are occupied</li>
|
|
<li>Use <code>netstat -ano | findstr :3000</code></li>
|
|
<li>Kill conflicting processes</li>
|
|
</ul>
|
|
|
|
<h4>3. Module Installation Errors</h4>
|
|
<ul>
|
|
<li>Clear npm cache: <code>npm cache clean --force</code></li>
|
|
<li>Delete node_modules and package-lock.json</li>
|
|
<li>Run <code>npm install</code> again</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="success">
|
|
<h3>Success Indicators:</h3>
|
|
<ul>
|
|
<li>Server starts without errors on port 3001</li>
|
|
<li>Client starts without errors on port 3000</li>
|
|
<li>Can register and login successfully</li>
|
|
<li>Socket.IO connection established</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |