SSR for One Page?

[threehappypenguins]

TL;DR I am looking for help on how to make my Connect.jsx page SSR. When I refresh the page, the button "flickers" to show Connect to YouTube and quickly changes to Disconnect YouTube (when my account is connected). I figured SSR would solve this problem.

I built a MERN stack. I am trying to implement SSR for just one page using Vike. I am very new to development in general, so my brain feels like scrambled eggs right now. I apologize if the answers to my questions are very obvious. Here is the current structure of my project:

MyApp/
├── .gitignore
├── LICENSE
├── backend/
│   ├── .env
│   ├── controllers/
│   │   ├── authController.js
│   │   ├── authgoogleController.js
│   │   ├── metadataController.js
│   ├── models/
│   │   ├── metadataModel.js
│   │   ├── userModel.js
│   │   ├── usergoogleModel.js
│   ├── oauth/
│   │   ├── passportConfig.js
│   ├── package-lock.json
│   ├── package.json
│   ├── routes/
│   │   ├── auth.js
│   │   ├── authgoogle.js
│   │   ├── metadata.js
│   ├── server.js
├── frontend/
│   ├── .eslintrc.cjs
│   ├── .gitignore
│   ├── README.md
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── public/
│   │   ├── vite.svg
│   ├── src/
│   │   ├── App.css
│   │   ├── App.jsx
│   │   ├── assets/
│   │   │   ├── react.svg
│   │   ├── components/
│   │   │   ├── MetadataDetails.jsx
│   │   │   ├── MetadataForm.jsx
│   │   │   ├── Modal.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── PrivateRoute.jsx
│   │   ├── context/
│   │   │   ├── MetadataContext.jsx
│   │   ├── hooks/
│   │   │   ├── useMetadataContext.jsx
│   │   ├── index.css
│   │   ├── main.jsx
│   │   ├── pages/
│   │   │   ├── Connect.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Signup.jsx
│   │   ├── utils/
│   │   │   ├── setAuthToken.jsx
│   ├── vite.config.mjs

Here is my vite.config.mjs:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
//import vike from 'vike/plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {'/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        secure: false,
      },
      '/auth': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        secure: false,
      },
      '/auth/google': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        secure: false,
      },
    },
  },
  build: {
    outDir: 'build',
    manifest: true,
    rollupOptions: {
      input: './src/main.jsx',
    },
  },
})

Note that I don't have plugins: [react(), vike()], and import vike from 'vike/plugin' is commented out. The reason that I have done that for now is because as soon as I add the vike() plugin, then all my pages become Cannot GET. That is expected, since I would have to set up Filesystem Routing for each page. I'm a little lost on how to just get one page (Connect.jsx) set up for SSR, but not the rest of the pages.

For example, say I change the structure to:

├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   │   ├── connect/
│   │   │    │    ├── +Page.jsx

And for clarification, here is my Connect.jsx page (or connect/+Page.jsx):

import React, { useEffect, useState } from 'react';

const Connect = () => {
  const [isConnected, setIsConnected] = useState(false);
  const [accessToken, setAccessToken] = useState('');
  const [refreshToken, setRefreshToken] = useState('');

  useEffect(() => {
    const checkStatus = async () => {
      try {
        const response = await fetch("http://localhost:4000/auth/google/status", {
          credentials: 'include',
        });
        const data = await response.json();
        setIsConnected(data.connected);
      } catch (error) {
        console.error('Error fetching status:', error);
      }
    };

    checkStatus();
  }, []);

  // Function to handle storing tokens securely (using localStorage)
  const storeTokens = (accessToken, refreshToken) => {
    localStorage.setItem('accessToken', accessToken);
    localStorage.setItem('refreshToken', refreshToken);
  };

  // Function to handle connection click
  const handleConnectClick = () => {
    window.location.href = "http://localhost:4000/auth/google";
  };

  // Function to handle disconnection click
  const handleDisconnectClick = async () => {
    try {
      const response = await fetch("http://localhost:4000/auth/google/logout", {
        method: 'GET',
        credentials: 'include',
      });
      const data = await response.text();
      console.log(data); // Optional: You can display a message to the user
      setIsConnected(false);

      // Clear tokens from localStorage on disconnect
      localStorage.removeItem('accessToken');
      localStorage.removeItem('refreshToken');
    } catch (error) {
      console.error('Error during logout:', error);
    }
  };

  // On component mount, check for tokens in localStorage and set state accordingly
  useEffect(() => {
    const storedAccessToken = localStorage.getItem('accessToken');
    const storedRefreshToken = localStorage.getItem('refreshToken');

    if (storedAccessToken && storedRefreshToken) {
      setAccessToken(storedAccessToken);
      setRefreshToken(storedRefreshToken);
    }
  }, []);

  // When tokens are received from server (not shown in this snippet), invoke storeTokens
  // For example, after successful authentication callback
  useEffect(() => {
    if (accessToken && refreshToken) {
      storeTokens(accessToken, refreshToken); // Ensure storeTokens is called
    }
  }, [accessToken, refreshToken]);

  return (
    <div>
      <h1>{isConnected ? "Connected to YouTube" : "Connect to YouTube"}</h1>
      {isConnected ? (
        <button onClick={handleDisconnectClick}>Disconnect YouTube</button>
      ) : (
        <button onClick={handleConnectClick}>Connect to YouTube</button>
      )}
      {accessToken && refreshToken && (
        <div>
          <p>Access Token: {accessToken}</p>
          <p>Refresh Token: {refreshToken}</p>
        </div>
      )}
    </div>
  );
};

export default Connect;

I can access the page from localhost:3000/connect but I can't access any of my other pages, can't access the navbar, nothing. I tried reading through the documentation for adding SSR to an existing app, but I'm lost. For example, I tried adjusting server.js in my backend to server.mjs, and implementing some way to add a test route while leaving the rest of my routes alone and implementing renderPage(). Here is my original server.js (in the backend):

require("dotenv").config();

const express = require("express");
const session = require("express-session");
const cors = require("cors");
const MongoStore = require("connect-mongo");
const mongoose = require("mongoose");
const cookieParser = require("cookie-parser");
const passport = require("./oauth/passportConfig");
const authRoutes = require("./routes/auth");
const authgoogleRoutes = require("./routes/authgoogle");
const metadataRoutes = require("./routes/metadata");

// Express app
const app = express();

app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
);

// Use cookie-parser middleware
app.use(cookieParser());

// Middleware for handling forms
app.use(express.urlencoded({ extended: true }));

// Middleware for handling metadata
app.use(express.json());

app.use((req, res, next) => {
  console.log(req.path, req.method);
  next();
});

// Session middleware for basic auth
app.use(
  session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    store: MongoStore.create({
      mongoUrl: process.env.MONGO_URI,
      collectionName: "sessions",
      autoRemove: 'native',
      ttl: 365 * 24 * 60 * 60 // 1 year in seconds
      //ttl: 60 // 1 minute
    }),
    saveUninitialized: false,
    cookie: {
      sameSite: process.env.SESSION_SAMESITE || "lax",
      secure: process.env.NODE_ENV === "production",
      httpOnly: true,
      maxAge: 365 * 24 * 60 * 60 * 1000 // 1 year in milliseconds
      //maxAge: 60 * 1000 // 1 minute
    },
  })
);

app.use(passport.initialize());
app.use(passport.session());

//  Routes
app.use("/auth", authRoutes);
app.use("/auth/google", authgoogleRoutes);
app.use("/api/metadata", metadataRoutes);

// Connect to db
mongoose
  .connect(process.env.MONGO_URI)
  .then(() => {
    // Listen for requests
    app.listen(process.env.PORT, () => {
      console.log("Connected to the db & listening on port", process.env.PORT);
    });
  })
  .catch((error) => {
    console.log(error);
  });

And here is server.mjs with my test route:

require("dotenv").config();

const express = require("express");
const session = require("express-session");
const cors = require("cors");
const MongoStore = require("connect-mongo");
const mongoose = require("mongoose");
const cookieParser = require("cookie-parser");
const passport = require("./oauth/passportConfig");
const authRoutes = require("./routes/auth");
const authgoogleRoutes = require("./routes/authgoogle");
const metadataRoutes = require("./routes/metadata");
import { renderPage } from 'vike/server'

const isProduction = process.env.NODE_ENV === "production";
const root = ".";

startServer()

async function startServer() {
  // Express app
  const app = express();

  app.use(
    cors({
      origin: "http://localhost:3000",
      credentials: true,
    })
  );

  // Use cookie-parser middleware
  app.use(cookieParser());

  // Middleware for handling forms
  app.use(express.urlencoded({ extended: true }));

  // Middleware for handling metadata
  app.use(express.json());

  app.use((req, res, next) => {
    console.log(req.path, req.method);
    next();
  });

  // Session middleware for basic auth
  app.use(
    session({
      secret: process.env.SESSION_SECRET,
      resave: false,
      store: MongoStore.create({
        mongoUrl: process.env.MONGO_URI,
        collectionName: "sessions",
        autoRemove: 'native',
        ttl: 365 * 24 * 60 * 60 // 1 year in seconds
        //ttl: 60 // 1 minute
      }),
      saveUninitialized: false,
      cookie: {
        sameSite: process.env.SESSION_SAMESITE || "lax",
        secure: process.env.NODE_ENV === "production",
        httpOnly: true,
        maxAge: 365 * 24 * 60 * 60 * 1000 // 1 year in milliseconds
        //maxAge: 60 * 1000 // 1 minute
      },
    })
  );

  app.use(passport.initialize());
  app.use(passport.session());

  if (!isProduction) {
    // We instantiate Vite's development server and integrate its middleware to our server.
    // ⚠️ We instantiate it only in development. (It isn't needed in production and it
    // would unnecessarily bloat our production server.)
    const vite = await import('vite');
    const viteDevMiddleware = (await vite.createServer({
      root,
      server: { middlewareMode: true }
    })).middlewares;
  
    // Apply Vite middleware only to SSR routes in development
    app.use((req, res, next) => {
      if (req.url.startsWith('/test')) {
        viteDevMiddleware(req, res, next)
      } else {
        next()
      }
    });
  } else {
    // In production, we need to serve our static assets ourselves.
    // (In dev, Vite's middleware serves our static assets.)
    app.use(express.static("../frontend/build"));
  }

  // SSR Route for testing SSR functionality
  app.get('/test', async (req, res, next) => {
    const pageContextInit = {
      urlOriginal: req.originalUrl,
      headersOriginal: req.headers,
      user: req.user
    };

    try {
      const pageContext = await renderPage(pageContextInit);
      if (pageContext.httpResponse === null) {
        // Handle cases where renderPage does not return a valid response
        return res.status(404).send('Page not found');
      }

      const { body, statusCode, headers } = pageContext.httpResponse;
      headers.forEach(([name, value]) => res.setHeader(name, value));
      res.status(statusCode).send(body);
    } catch (error) {
      console.error("Error rendering SSR:", error);
      res.status(500).send('Internal Server Error');
    }
  });

  //  Routes
  app.use("/auth", authRoutes);
  app.use("/auth/google", authgoogleRoutes);
  app.use("/api/metadata", metadataRoutes);

  // Connect to db
  mongoose
    .connect(process.env.MONGO_URI)
    .then(() => {
      // Listen for requests
      app.listen(process.env.PORT, () => {
        console.log("Connected to the db & listening on port", process.env.PORT);
      });
    })
    .catch((error) => {
      console.log(error);
    });

}

When I try a GET request in Postman with localhost:4000/test, I get 404 not found. I mean, I figured it wouldn't be found, but I don't really understand what to do. I know I'm not thinking about things correctly. I just don't know how to think about it (if that makes sense).

Can I have some guidance on how to go about this, or if what I'm trying to do is even possible?

[brillout]

It's a bit difficult to help: you write a lot of things that may or may not be related to your issue. A better approach would be to describe what you expect from Vike and what happens instead.

(FYI adding guides for newcomers to frontend development is on our radar.)