Guide
API
Blog
Guide
API
Blog

Custom Page

Sometimes, you may need to customize some 404 or 500 pages.

Custom 404 Page

  1. create a new route in app folder, for example, app/notFound/index.tsx:
import './style.scss'

const NotFound: React.FC = () => {
  return (
    <div className="not-found-container">
      <div className="error-code">404</div>
      <div className="error-message">Oops! Page not found.</div>
      <div className="back-link">
        <a href="/home">Back to Home</a>
      </div>
    </div>
  );
};

export default NotFound;
  1. create a new style file in app/notFound/style.scss:
.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  font-family: Arial, sans-serif;
}

.error-code {
  font-size: 8rem;
  font-weight: bold;
  color: #333;
}

.error-message {
  margin-top: 20px;
  font-size: 1.5rem;
  color: #666;
}

.back-link {
  margin-top: 30px;
}

.back-link a {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  transition: color 0.3s ease;
}

.back-link a:hover {
  color: #0056b3;
}
  1. modify server-entry.tsx in root.
import { pageRoutes, paretoRequestHandler } from '@paretojs/core/node'

app.get('*', async (req, res) => {
  const route = req.path.slice(1)
  if(!pageRoutes.includes(route)) {
    res.redirect('/notFound');
    return
  }
  const handler = paretoRequestHandler({
    delay: ABORT_DELAY,
  })

  await handler(req, res)
})
ON THIS PAGE