Skip to content

ATXP-260: Switch demo to single server and use npm run #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
robdimarco-atxp merged 3 commits into from
Sep 10, 2025
Merged

ATXP-260: Switch demo to single server and use npm run #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55ffd1c
Fix git divergent branches error in demo update
robdimarco-atxp Sep 10, 2025
07d5bb5
Refactor demo to use single port instead of frontend/backend ports
robdimarco-atxp Sep 10, 2025
a6c46ac
Remove .env file creation logic from demo
robdimarco-atxp Sep 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 5 additions & 15 deletions packages/atxp/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { showHelp } from './help.js';
import { checkAllDependencies, showDependencyError } from './check-dependencies.js';

interface DemoOptions {
frontendPort: number;
backendPort: number;
port: number;
dir: string;
verbose: boolean;
refresh: boolean;
Expand All @@ -25,22 +24,13 @@ function parseArgs(): { command: string; demoOptions: DemoOptions } {
return index !== -1 ? process.argv[index + 1] : undefined;
};

const frontendPort = (() => {
const portValue = getArgValue('--frontend-port', '--fp');
const port = (() => {
const portValue = getArgValue('--port', '-p');
if (portValue) {
const parsed = parseInt(portValue, 10);
if (parsed > 0 && parsed < 65536) return parsed;
}
return 8016; // default frontend port
})();

const backendPort = (() => {
const portValue = getArgValue('--backend-port', '--bp');
if (portValue) {
const parsed = parseInt(portValue, 10);
if (parsed > 0 && parsed < 65536) return parsed;
}
return 8017; // default backend port
return 8017; // default port (previously backend port)
})();

const dir = (() => {
Expand All @@ -53,7 +43,7 @@ function parseArgs(): { command: string; demoOptions: DemoOptions } {

return {
command,
demoOptions: { frontendPort, backendPort, dir, verbose, refresh }
demoOptions: { port, dir, verbose, refresh }
};
}

Expand Down
98 changes: 43 additions & 55 deletions packages/atxp/src/run-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@
import { spawn } from 'child_process';
import fs from 'fs-extra';
import open from 'open';
import path from 'path';

Check warning on line 5 in packages/atxp/src/run-demo.ts

View workflow job for this annotation

GitHub Actions / test 

'path' is defined but never used

interface DemoOptions {
frontendPort: number;
backendPort: number;
port: number;
dir: string;
verbose: boolean;
refresh: boolean;
Expand Down Expand Up @@ -34,11 +33,8 @@
// Install dependencies if needed
await installDependencies(options.dir, options.verbose);

// Create .env files for configuration
await createEnvFiles(options.dir, options.frontendPort, options.backendPort, options.verbose);

// Start the demo and open browser
await startDemo(options.frontendPort, options.backendPort, options.dir, options.verbose);
await startDemo(options.port, options.dir, options.verbose);

} catch (error) {
console.error(chalk.red('Error starting demo:'), (error as Error).message);
Expand Down Expand Up @@ -76,26 +72,50 @@

async function updateDemoRepo(demoDir: string, isVerbose: boolean): Promise<void> {
return new Promise((resolve, _reject) => {
const git = spawn('git', [
'pull',
'--depth', '1', // Keep shallow history during pull
'origin', 'main' // Explicitly pull from main branch
// First fetch the latest changes
const fetch = spawn('git', [
'fetch',
'--depth', '1', // Keep shallow history during fetch
'origin', 'main' // Explicitly fetch from main branch
], {
cwd: demoDir,
stdio: isVerbose ? 'inherit' : 'pipe'
});

git.on('close', (code) => {
if (code === 0) {
console.log(chalk.green('Demo updated successfully'));
fetch.on('close', (fetchCode) => {
if (fetchCode !== 0) {
console.log(chalk.yellow('Could not fetch updates, using existing version'));
resolve();
} else {
return;
}

// Reset local branch to match remote exactly (discarding any local changes)
const reset = spawn('git', [
'reset',
'--hard', // Discard local changes
'origin/main' // Reset to remote main branch
], {
cwd: demoDir,
stdio: isVerbose ? 'inherit' : 'pipe'
});

reset.on('close', (resetCode) => {
if (resetCode === 0) {
console.log(chalk.green('Demo updated successfully'));
resolve();
} else {
console.log(chalk.yellow('Could not update demo, using existing version'));
resolve(); // Don't fail if update fails
}
});

reset.on('error', (_error) => {
console.log(chalk.yellow('Could not update demo, using existing version'));
resolve(); // Don't fail if update fails
}
});
});

git.on('error', (_error) => {
fetch.on('error', (_error) => {
console.log(chalk.yellow('Could not update demo, using existing version'));
resolve(); // Don't fail if update fails
});
Expand All @@ -107,7 +127,7 @@

return new Promise((resolve, reject) => {
// Use --silent flag to reduce npm output
const npmArgs = isVerbose ? ['run', 'install-all'] : ['run', 'install-all', '--silent'];
const npmArgs = isVerbose ? ['run', 'setup'] : ['run', 'setup', '--silent'];

const npm = spawn('npm', npmArgs, {
cwd: demoDir,
Expand All @@ -129,9 +149,9 @@
});
}

async function startDemo(frontendPort: number, backendPort: number, demoDir: string, isVerbose: boolean): Promise<void> {
async function startDemo(port: number, demoDir: string, isVerbose: boolean): Promise<void> {
console.log(chalk.blue('Starting demo application...'));
console.log(chalk.green(`Demo will be available at: http://localhost:${frontendPort}`));
console.log(chalk.green(`Demo will be available at: http://localhost:${port}`));
console.log(chalk.gray(`Demo directory: ${demoDir}`));
console.log(chalk.yellow('Press Ctrl+C to stop the demo'));
if (!isVerbose) {
Expand All @@ -142,11 +162,8 @@
// Set the port environment variable for the demo
const env = {
...process.env,
// Backend will use PORT from its .env file, frontend will use PORT from its .env file
// We don't set PORT globally to avoid conflicts - let each service read its own .env
FRONTEND_PORT: frontendPort.toString(),
BACKEND_PORT: backendPort.toString(),
REACT_APP_BACKEND_PORT: backendPort.toString(),
// Server will use PORT from its .env file
PORT: port.toString(),
NODE_ENV: 'production',
// Suppress deprecation warnings
NODE_NO_WARNINGS: '1',
Expand Down Expand Up @@ -200,10 +217,10 @@
if (!demoOpenedBrowser) {
try {
console.log(chalk.blue('Opening browser...'));
await open(`http://localhost:${frontendPort}`);
await open(`http://localhost:${port}`);
} catch {
console.log(chalk.yellow('Could not open browser automatically'));
console.log(chalk.white(`Please open http://localhost:${frontendPort} in your browser`));
console.log(chalk.white(`Please open http://localhost:${port} in your browser`));
}
}
}, 2000);
Expand Down Expand Up @@ -234,35 +251,6 @@
});
}

async function createEnvFiles(demoDir: string, frontendPort: number, backendPort: number, isVerbose: boolean): Promise<void> {
if (isVerbose) {
console.log(chalk.blue('Creating .env files...'));
}

try {
// Create backend .env file
const backendEnvPath = path.join(demoDir, 'backend', '.env');
const backendEnvContent = `PORT=${backendPort}\nFRONTEND_PORT=${frontendPort}\n`;
await fs.writeFile(backendEnvPath, backendEnvContent);

if (isVerbose) {
console.log(chalk.gray(`Created backend .env: ${backendEnvPath}`));
}

// Create frontend .env file
const frontendEnvPath = path.join(demoDir, 'frontend', '.env');
const frontendEnvContent = `PORT=${frontendPort}\nREACT_APP_BACKEND_PORT=${backendPort}\n`;
await fs.writeFile(frontendEnvPath, frontendEnvContent);

if (isVerbose) {
console.log(chalk.gray(`Created frontend .env: ${frontendEnvPath}`));
}

} catch (error) {
console.log(chalk.yellow(`Warning: Could not create .env files: ${(error as Error).message}`));
console.log(chalk.gray('Demo will use environment variables passed directly'));
}
}

async function cleanup(): Promise<void> {
try {
Expand Down