How to use Mongodb in Server Side Rendering

user_11391135 0
Viewed 551

I am trying to make a basic mongoose connection in Express using React, React Router and webpack

Are there any examples of ssr with Mongodb?

What should the server look like?



const app = express();
app.use(express.static("./build"));
app.get("*", (req, res) => {
      const url = req.originalUrl || req.url;
      const context = {};
      const indexFile = path.resolve("./build/main.html");
      if (context.url) {
            req.header("Location", context.url);
            return res.send(302);
      }
      const css = new Set();
      const insertCss = (...styles) =>
            styles.forEach((style) => css.add(style._getCss()));
      const appContent = ReactDOMServer.renderToString(
            <StyleContext.Provider value={{ insertCss }}>
                  <StaticRouter
                        location={req.url}
                        context={context}
                  ></StaticRouter>
            </StyleContext.Provider>
      );
      fs.readFile(indexFile, "utf8", (err, data) => {
            if (err) {
                  console.log(err);
                  return res.status(500).send("ne rabotaet");
            }
            data = data.replace("__STYLES__", [...css].join(""));
            data = data.replace(
                  "<div id=app></div>",
                  `<div id=app>${appContent}</div>`
            );

            return res.send(data);
      });
});
app.listen(3000, () => {
      console.log("Listenning on port: ", 3000);
});
reactjs node.js mongodb
1 Answers

Please refer to below server template which is used for Next Js project (SSR) with Mongoose connection. server.js

require('dotenv').config();
    
    const express = require('express');
    const server = express();
    const bodyParser = require('body-parser');
    const mongoose = require('mongoose');
    const next = require('next');
    
    const dev = process.env.NODE_ENV !== 'production';
    const app = next({dev});
    
    const routes = require('./routes');
    const routerHandler = routes.getRequestHandler(app);
    
    const {config} = require('../config');
    
    const transactionRouter = require('./api/transaction');
    
    app.prepare().then(() => {
        // Parse application/x-www-form-urlencoded
        server.use(bodyParser.urlencoded({extended: false}));
        // Parse application/json
        server.use(bodyParser.json());
    
        // Allows for cross origin domain request:
        server.use(function (req, res, next) {
            res.header('Access-Control-Allow-Origin', '*');
            res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
            next()
        });
        console.log("mongodb ", config.databaseUrl);
        // MongoDB
        mongoose.Promise = Promise;
        mongoose.connect(config.databaseUrl, {useNewUrlParser: true});
        const db = mongoose.connection;
        db.on('error', console.error.bind(console, 'connection error:'));
    
        // REST API routes
        server.use('/api/transactions', transactionRouter);
    
        // Next.js page routes
        server.get('*', routerHandler);
    
        // Start server
        server.listen(config.serverPort, () => console.log(`${config.appName} running on http://localhost:${config.serverPort}/`))
    });
user_77214970
Related