error.md

Notes:

1. Page title is the index route
2. Content is the index route
3. Should match partytime route
4. Both the server and client builds define the partytime route in the exports

index.ts

// FILE PATH: routes/index.ts
// DESCRIPTION: The root express app router with our custom middleware

import { generatePath, KnownPath } from '@lib/generatePath'
import * as keycloak from '@lib/keycloak'
import { getLocal } from '@lib/locals'
import * as middleware from '@lib/middleware'
import { getAssets } from '@lib/middleware'
import * as segment from '@lib/segment'
import { createRequestHandler } from '@remix-run/express'
import csrf from 'csurf'
import express from 'express'
import path from 'path'
import accountRouter from './account'
import apiRouter from './api'
import billingRouter from './billing'
import changelogRouter from './changelog'
import clusterRouter from './clusters'
import dashboardRouter from './dashboard'
import landingRouter from './landing'
import legalRouter from './legal'
import registerRouter from './register'
import supportRouter from './support'
import teamsRouter from './teams'

const BUILD_DIR = path.join(process.cwd(), 'build')

const pagesRouter = express.Router()

pagesRouter.use(
	// Include an Axios config that uses the bearer token from Keycloak.
	// The Axios config can be accessed in request handlers via
	// `req.locals.axiosConfig`.
	middleware.axiosConfig,
	// Include the list of teams.
	middleware.fetchTeams,
	// Get profile of current user
	middleware.getProfile,
)

pagesRouter.use('/dashboard', dashboardRouter)
pagesRouter.use('/account', accountRouter)
pagesRouter.use('/billing', billingRouter)
pagesRouter.use('/clusters', clusterRouter)
pagesRouter.use('/support', supportRouter)
pagesRouter.use('/teams', teamsRouter)
pagesRouter.use('/changelog', changelogRouter)

const protectedRouter = express.Router()

protectedRouter.use(
	// Require the user to be logged in.
	keycloak.protect(),
)

// Override method if receiving a post with a _method input
protectedRouter.post('*', middleware.overrideFormMethod)
protectedRouter.use(pagesRouter)
protectedRouter.use('/api', apiRouter)

protectedRouter.all(
	'*',
	createRequestHandler({
		build: require(BUILD_DIR),
		mode: process.env.NODE_ENV,
		/**
		 * Can forward any middleware data from res.locals or other request data
		 */
		getLoadContext(req, res) {
			const reqWithKeycloak = req as typeof req & { kauth?: any }

			return {
				axiosConfig: getLocal(res, middleware.axiosConfig.id),
				kauth: reqWithKeycloak.kauth,
				profile: getLocal(res, middleware.getProfile.id),
				teams: getLocal(res, middleware.fetchTeams.id),
				session: req.session,
				locals: res.locals,
			}
		},
	}),
)

const appRouter = express.Router()

appRouter.use(getAssets)


const csrfProtection = csrf()
appRouter.use(csrfProtection)

appRouter.use(landingRouter)

appRouter.use(legalRouter)


appRouter.use(protectedRouter)

export default appRouter

index.tsx

// FILE PATH: app/routes/index.tsx
// DESCRIPTION: A default route for the remix app. Although the express routes
//              would already handle `/` so not sure this would ever be hit directly.

import { MetaFunction } from '@remix-run/node'

export const meta: MetaFunction = () => {
	return {
		title: 'Remix Test',
	}
}

export default function App() {
	return (
		<div>
			<h1>Test</h1>
		</div>
	)
}

partytime.tsx

// FILE PATH: app/routes/partytime.tsx
// DESCRIPTION: A test route to confirm remix was integrated correctly
//              should be hit on /partytime

export default function RemixTestPage() {
	return <div>Remix Test Success</div>
}

remix.config.js

// @ts-check

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
	ignoredRouteFiles: ['**/.*'],
	// serverDependenciesToBundle: [],
	appDirectory: 'app',
	assetsBuildDirectory: 'public/build',
	serverBuildPath: 'build/index.js',
	publicPath: '/build/',
	// devServerPort: 8002
}

root.tsx

// FILE PATH: app/root.tsx
// DESCRIPTION: Stock root.tsx from their express example

import type { MetaFunction } from '@remix-run/node'
import {
	Links,
	LiveReload,
	Meta,
	Outlet,
	Scripts,
	ScrollRestoration,
} from '@remix-run/react'

export const meta: MetaFunction = () => ({
	charset: 'utf-8',
	title: 'New Remix App',
	viewport: 'width=device-width,initial-scale=1',
})

export default function App() {
	return (
		<html lang="en">
			<head>
				<Meta />
				<Links />
			</head>
			<body>
				<Outlet />
				<ScrollRestoration />
				<Scripts />
				<LiveReload />
			</body>
		</html>
	)
}