Skip to content

Commit 1a758fd

Browse files
committed
Fix browser console error by making logger compatible with both server and client environments
1 parent 2b56b3a commit 1a758fd

File tree

5 files changed

+41
-179
lines changed

5 files changed

+41
-179
lines changed

README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,9 @@ git clone <your-repo-url>
9898
cd overland-stack
9999
cp env.example .env
100100

101-
# Edit .env with your configuration
102-
# Set PAYLOAD_SECRET to a secure random string
101+
# Generate a secure PAYLOAD_SECRET
102+
node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
103+
# Copy the output and update PAYLOAD_SECRET in .env
103104

104105
# Install and start
105106
pnpm install

apps/web/app/lib/logger.ts

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
11
import pino from 'pino';
22

3+
// Check if we're in a browser environment
4+
const isBrowser = typeof window !== 'undefined';
5+
36
// Create logger instance
4-
const logger = pino({
5-
level: process.env.LOG_LEVEL || 'info',
6-
transport:
7-
process.env.NODE_ENV === 'development'
8-
? {
9-
target: 'pino-pretty',
10-
options: {
11-
colorize: true,
12-
translateTime: 'SYS:standard',
13-
ignore: 'pid,hostname',
14-
},
15-
}
16-
: undefined,
17-
});
7+
const logger = isBrowser
8+
? // Browser logger - simple console wrapper
9+
{
10+
error: (...args: any[]) => console.error(...args),
11+
warn: (...args: any[]) => console.warn(...args),
12+
info: (...args: any[]) => console.info(...args),
13+
debug: (...args: any[]) => console.debug(...args),
14+
}
15+
: // Node.js logger with pino
16+
pino({
17+
level: process.env.LOG_LEVEL || 'info',
18+
transport:
19+
process.env.NODE_ENV === 'development'
20+
? {
21+
target: 'pino-pretty',
22+
options: {
23+
colorize: true,
24+
translateTime: 'SYS:standard',
25+
ignore: 'pid,hostname',
26+
},
27+
}
28+
: undefined,
29+
});
1830

1931
// Export logger with consistent interface
2032
export default logger;

apps/web/app/welcome/welcome.tsx

Lines changed: 1 addition & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export function Welcome({ message }: { message: string }) {
55
return (
66
<main className='flex h-screen items-center justify-center'>
77
<div className='flex flex-col items-center gap-16'>
8-
<header className='flex flex-col items-center gap-9'>
8+
<header className='flex flex-col items-center gap-2'>
99
{/* React Router SVG Logos */}
1010
<div className='w-[500px] max-w-[100vw] p-4'>
1111
<img
@@ -21,126 +21,13 @@ export function Welcome({ message }: { message: string }) {
2121
</div>
2222
</header>
2323

24-
{/* Instructions */}
2524
<div className='text-center max-w-2xl'>
2625
<p className='text-lg text-gray-600 mb-4'>
2726
A modern, full-stack web application starter built with React Router
2827
SSR and Payload CMS. Ready to build something amazing? Start by
2928
exploring the codebase and customizing to your needs.
3029
</p>
3130
</div>
32-
33-
{/* Action Buttons */}
34-
<div className='flex gap-4'>
35-
<a
36-
href='#'
37-
className='inline-flex items-center px-6 py-3 bg-gray-900 text-white rounded-lg border border-gray-900 hover:bg-gray-800 transition-colors'
38-
>
39-
<svg
40-
className='w-4 h-4 mr-2'
41-
fill='none'
42-
stroke='currentColor'
43-
viewBox='0 0 24 24'
44-
>
45-
<path
46-
strokeLinecap='round'
47-
strokeLinejoin='round'
48-
strokeWidth={2}
49-
d='M13 7l5 5m0 0l-5 5m5-5H6'
50-
/>
51-
</svg>
52-
Get Started
53-
</a>
54-
<a
55-
href='#'
56-
className='inline-flex items-center px-6 py-3 bg-white text-gray-900 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors'
57-
>
58-
Read our docs
59-
</a>
60-
</div>
61-
62-
{/* Navigation Links */}
63-
<div className='flex gap-8 text-sm'>
64-
<a
65-
href='#'
66-
className='flex items-center text-gray-600 hover:text-gray-900 transition-colors'
67-
>
68-
<svg
69-
className='w-4 h-4 mr-2'
70-
fill='none'
71-
stroke='currentColor'
72-
viewBox='0 0 24 24'
73-
>
74-
<path
75-
strokeLinecap='round'
76-
strokeLinejoin='round'
77-
strokeWidth={2}
78-
d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
79-
/>
80-
</svg>
81-
Learn
82-
</a>
83-
<a
84-
href='#'
85-
className='flex items-center text-gray-600 hover:text-gray-900 transition-colors'
86-
>
87-
<svg
88-
className='w-4 h-4 mr-2'
89-
fill='none'
90-
stroke='currentColor'
91-
viewBox='0 0 24 24'
92-
>
93-
<path
94-
strokeLinecap='round'
95-
strokeLinejoin='round'
96-
strokeWidth={2}
97-
d='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'
98-
/>
99-
</svg>
100-
Examples
101-
</a>
102-
<a
103-
href='https://discord.gg/8NeX7C7V'
104-
className='flex items-center text-gray-600 hover:text-gray-900 transition-colors'
105-
target='_blank'
106-
rel='noreferrer'
107-
>
108-
<svg
109-
className='w-4 h-4 mr-2'
110-
fill='none'
111-
stroke='currentColor'
112-
viewBox='0 0 24 24'
113-
>
114-
<path
115-
strokeLinecap='round'
116-
strokeLinejoin='round'
117-
strokeWidth={2}
118-
d='M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z'
119-
/>
120-
</svg>
121-
Discord
122-
</a>
123-
<a
124-
href='https://alloylab.net'
125-
target='_blank'
126-
className='flex items-center text-gray-600 hover:text-gray-900 transition-colors'
127-
>
128-
<svg
129-
className='w-4 h-4 mr-2'
130-
fill='none'
131-
stroke='currentColor'
132-
viewBox='0 0 24 24'
133-
>
134-
<path
135-
strokeLinecap='round'
136-
strokeLinejoin='round'
137-
strokeWidth={2}
138-
d='M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9'
139-
/>
140-
</svg>
141-
Go to alloylab.net →
142-
</a>
143-
</div>
14431
</div>
14532
</main>
14633
);

apps/web/server.js

Lines changed: 8 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -21,50 +21,17 @@ if (!DEVELOPMENT) {
2121
}
2222

2323
if (DEVELOPMENT) {
24-
// Import development dependencies
25-
const { env } = await import('./app/lib/envValidation.js');
26-
const { expressErrorHandler } = await import('./app/lib/errorHandler.js');
27-
const logger = (await import('./app/lib/logger.js')).default;
28-
const {
29-
apiSecurity,
30-
authSecurity,
31-
formSecurity,
32-
requestSizeLimit,
33-
staticSecurity,
34-
} = await import('./app/lib/security.js');
24+
// In development, use Vite dev server
25+
console.log('Starting development server with Vite...');
26+
const { createServer } = await import('vite');
3527

36-
// Trust proxy for accurate IP addresses
37-
app.set('trust proxy', 1);
38-
39-
// Security middleware
40-
app.disable('x-powered-by');
41-
app.use(compression());
42-
app.use(requestSizeLimit('10MB'));
43-
44-
// Apply security middleware based on environment
45-
if (env.ENABLE_CORS) {
46-
app.use(apiSecurity);
47-
}
48-
49-
// Static file security
50-
app.use(staticSecurity);
51-
52-
// Request logging
53-
app.use(
54-
morgan('combined', {
55-
stream: {
56-
write: message => logger.info(message.trim()),
57-
},
58-
})
59-
);
28+
const viteDevServer = await createServer({
29+
server: { middlewareMode: true },
30+
});
6031

61-
logger.info('Starting development server');
62-
const viteDevServer = await import('vite').then(vite =>
63-
vite.createServer({
64-
server: { middlewareMode: true },
65-
})
66-
);
6732
app.use(viteDevServer.middlewares);
33+
34+
// Handle SSR
6835
app.use(async (req, res, next) => {
6936
try {
7037
const source = await viteDevServer.ssrLoadModule('./server/app.ts');
@@ -76,14 +43,6 @@ if (DEVELOPMENT) {
7643
next(error);
7744
}
7845
});
79-
80-
// API routes with security middleware
81-
app.use('/api', apiSecurity);
82-
app.use('/api/auth', authSecurity);
83-
app.use('/api/forms', formSecurity);
84-
85-
// Global error handler (must be last)
86-
app.use(expressErrorHandler);
8746
} else {
8847
// In production, use the built server directly
8948
const builtServer = await import(BUILD_PATH);

apps/web/vite.config.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { defineConfig } from 'vite';
44
import tsconfigPaths from 'vite-tsconfig-paths';
55

66
export default defineConfig(({ isSsrBuild }) => ({
7+
server: {
8+
port: 3000,
9+
},
710
build: {
811
rollupOptions: isSsrBuild
912
? {

0 commit comments

Comments
 (0)