Create-response-app for server side rendering

I use the tool create-react-appto create my first responsive application with react-routes, and now I would like to use server-side rendering so as not to load all pages at once.

I followed the manuals and installed express.js, separated the client and server sides with .js files and ran them using

NODE_ENV=production babel-node --presets 'react,es2015' src/server.js

But I get an error when the application tries to compile @import sass instructions. I think I need to service the assets first, but I don't know how to embed webpack functions in server.js logic

create-react-app also has a command npm run buildto build the assembly and create js and css files, so maybe there is a way to skip parts of the assets when compiling server.js?

Server.js Server Content

import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import NoMatch from './pages/NoMatch';

// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// define the folder that will be used for static assets
app.use(Express.static(path.join(__dirname, 'static')));

// universal routing and rendering
app.get('*', (req, res) => {
  match(
    { routes, location: req.url },
    (err, redirectLocation, renderProps) => {

      // in case of error display the error message
      if (err) {
        return res.status(500).send(err.message);
      }

      // in case of redirect propagate the redirect to the browser
      if (redirectLocation) {
        return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
      }

      // generate the React markup for the current route
      let markup;
      if (renderProps) {
        // if the current route matched we have renderProps
        markup = renderToString(<RouterContext {...renderProps}/>);
      } else {
        // otherwise we can render a 404 page
        markup = renderToString(<NoMatch/>);
        res.status(404);
      }

      // render the index template with the embedded React markup
      return res.render('index', { markup });
    }
  );
});

// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';
server.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  console.info(`Server running on http://localhost:${port} [${env}]`);
});
+4
source share

Source: https://habr.com/ru/post/1662950/


All Articles