How to render server side images?

Question

How can I render server side images and css files using React?

Here is my server code:

const express = require('express') const router = express.Router() const ReactDOM = require('react-dom/server'); import Master from '../../../client/Master' router.get('/', (req, res) => { res.render('test.html', {reactOutput: ReactDOM.renderToString(<Master/>)}); }); 

Main component:

 import React from "react"; import Intro from "./pages/Intro"; import Footer from "./components/Footer"; import Header from "./components/Header"; export default class Master extends React.Component { constructor() { super(); this.state = {appStatus: 'INTRO'} } render() { let layout; switch (this.state.appStatus) { case "INTRO": layout = <Intro/>; } return ( <div> <Header/> {layout} <Footer/> </div> ) } } 

But when I start the server with babel, I got this error:

/assets/img/logo.png: Unexpected character '?' (ten)

And this is the header component that is trying to request a logo.

 import React from "react"; **import logo from '../../assets/img/logo.png';** export default class Header extends React.Component { constructor() { super(); } render() { return ( <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">**<img width="250" src={logo} alt=""/></a>** </div> </div> </nav> ); } } 

But it works great with webpack for the client side.

Answer 1

Your server requires a separate webpack configuration

• Install this module to exclude node_modules:

   npm install --save webpack-node-externals 

• Create a separate webpack configuration for your server:

   module.exports = { const path = require('path') const nodeExternals = require('webpack-node-externals') context: path.resolve(__dirname, 'directory of your server file'), entry: ['./filename of your server file'], output: { path: path.join(__dirname, 'directory of your bundled file'), filename: 'filename of your bundled file' }, target: 'node', externals: [nodeExternals()], module: { rules: [ { test: /\.(jpe?g|png|gif|svg|ico)$/i, use: 'url-loader?limit=8192' } ] } } 

• Here is an example webpack.config.js server:

   module.exports = { const path = require('path') const nodeExternals = require('webpack-node-externals') context: path.resolve(__dirname, 'src'), entry: ['./index.js'], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, target: 'node', externals: [nodeExternals()], module: { rules: [ { test: /\.(jpe?g|png|gif|svg|ico)$/i, use: 'url-loader?limit=8192' } ] } } 

• If you are using the webpack.config.js example above, run webpack, then the compiled server file:

   webpack node dist/bundle.js