Sharing React components between SPA and server rendered views

Why using SPA and server rendering together for a web app?

General steps

Detailed steps

Preparing the React component

client/header.jsimport React from 'react'
import { render } from 'react-dom'
import HeaderContainer from './container/HeaderContainer'
render(
<HeaderContainer />,
document.getElementById('header')
)
client/container/HeaderContainer.jsimport React, { Component } from 'react'
import Header from '../pages/Application/Header'
import { userStore } from '../stores'
export default class HeaderContainer extends Component {
componentWillMount () {
// Ping server to check and update user's login status
userStore.ping().catch(() => {})
}
render () {
return (
<Header />
)
}
}
client/pages/Application/Header.jsimport React, { Component } from 'react'
import { observer } from 'mobx-react'
import { userStore } from '../stores'
require('./Header.scss')@observer
export default class Header extends Component {
render () {
// the HTML for header, based on userStore
}
}

Webpack configuration

const path = require('path')
const webpack = require('webpack')
const WebpackPugManifestPlugin = require('../../bin/webpack-pug')
module.exports = {
...
entry: {
vendor: ['react', 'react-dom', 'mobx', 'mobx-react'],
header: path.join(__dirname, '../header.js')
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../../public/shared')
},
plugins: [
new WebpackPugManifestPlugin(),
...
],
...
}
script(type="text/javascript",src="/public/shared/manifest.8a0bd365aad45e8144d2.js")
script(type="text/javascript",src="/public/shared/vendor.3d88e7b92df60c725678.js")
script(type="text/javascript",src="/public/shared/header.15f217e43fcd19fc8bf0.js")

Importing shared JS and CSS into layout pug

build-shared:
@echo "Building shared files..."
@rm -rf ./public/shared
@mkdir -p ./public/shared
@NODE_ENV=production $(NODE_BIN)/webpack --config client/webpack/shared.js
@mv public/shared/sharedScript.pug server/views/sharedScript.pug
server/views/_layout.pugdoctype html
html
head
...
link(href='/public/shared/header.css', rel='stylesheet', type='text/css')
body
div(id='header')
include sharedScript

That is all

--

--

--

Build your audience before building your product. We help people to make coming soon page 🔜

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cominsoon

Cominsoon

Build your audience before building your product. We help people to make coming soon page 🔜

More from Medium

How to change vanilla JavaScript app to TypeScript.

My channel for javascript developers

An Introduction to performance.now()

a clock in a pink and green background

How JavaScript Frameworks Fair Against the Core Web Vitals and SEO?

How JavaScript Frameworks Fair Against the Core Web Vitals and SEO?