All Projects → Lanfei → webpack-isomorphic

Lanfei / webpack-isomorphic

Licence: MIT license
A lightweight solution for the server-side rendering of Webpack-built applications.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to webpack-isomorphic

Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+6100%)
Mutual labels:  isomorphic, server-side-rendering
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (+571.43%)
Mutual labels:  isomorphic, server-side-rendering
Marko
A declarative, HTML-based language that makes building web apps fun
Stars: ✭ 10,796 (+51309.52%)
Mutual labels:  isomorphic, server-side-rendering
Typescript Hapi React Hot Loader Example
Simple TypeScript React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (+109.52%)
Mutual labels:  isomorphic, server-side-rendering
boldr
React based CMF / blogging engine using Redux, Postgres, Node, and more...
Stars: ✭ 78 (+271.43%)
Mutual labels:  isomorphic, server-side-rendering
Hapi React Hot Loader Example
Simple React Hot Loading example with Hapi Server-side rendering
Stars: ✭ 44 (+109.52%)
Mutual labels:  isomorphic, server-side-rendering
universal-react-relay-starter-kit
A starter kit for React in combination with Relay including a GraphQL server, server side rendering, code splitting, i18n, SEO.
Stars: ✭ 14 (-33.33%)
Mutual labels:  isomorphic, server-side-rendering
React App
Create React App with server-side code support
Stars: ✭ 614 (+2823.81%)
Mutual labels:  isomorphic, server-side-rendering
Use Ssr
☯️ React hook to determine if you are on the server, browser, or react native
Stars: ✭ 230 (+995.24%)
Mutual labels:  isomorphic, server-side-rendering
Universal React Router4
Demo app showing how to use react-router v4 for server- and client-side rendering
Stars: ✭ 216 (+928.57%)
Mutual labels:  isomorphic, server-side-rendering
Universal
Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
Stars: ✭ 669 (+3085.71%)
Mutual labels:  isomorphic, server-side-rendering
Beidou
🌌 Isomorphic framework for server-rendered React apps
Stars: ✭ 2,726 (+12880.95%)
Mutual labels:  isomorphic, server-side-rendering
React Isomorphic Boilerplate
🌟 An universal React isomorphic boilerplate for building server-side render web app.
Stars: ✭ 653 (+3009.52%)
Mutual labels:  isomorphic, server-side-rendering
Universal React Demo
ES6 demo of a simple but scalable React app with react-router, code splitting, server side rendering, and tree shaking.
Stars: ✭ 50 (+138.1%)
Mutual labels:  isomorphic, server-side-rendering
Awesome Nextjs
📔 📚 A curated list of awesome resources : books, videos, articles about using Next.js (A minimalistic framework for universal server-rendered React applications)
Stars: ✭ 6,812 (+32338.1%)
Mutual labels:  isomorphic, server-side-rendering
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (+457.14%)
Mutual labels:  isomorphic, server-side-rendering
Angular Ssr
Angular 4+ server-side rendering solution compatible with @angular/material, jQuery, and other libraries that touch the DOM (as well as providing a rich feature set!)
Stars: ✭ 283 (+1247.62%)
Mutual labels:  isomorphic, server-side-rendering
Redux Connect
Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React
Stars: ✭ 551 (+2523.81%)
Mutual labels:  isomorphic, server-side-rendering
React Imvc
An Isomorphic MVC Framework
Stars: ✭ 211 (+904.76%)
Mutual labels:  isomorphic, server-side-rendering
Universal React
A universal react starter, with routing, meta, title, and data features
Stars: ✭ 247 (+1076.19%)
Mutual labels:  isomorphic, server-side-rendering

webpack-isomorphic

Build Status Coverage Status Version License Dependencies DevDependencies

A lightweight solution for the server-side rendering of webpack-built applications.

Why do we need it?

With webpack, we can require any files by using loaders:

// CSS Modules
// @see https://www.npmjs.com/package/css-loader#modules
import style from './css/style.css';

// Require a image file
<img src={require('./img/avatar.jpg')} />

But you'll get an error in server-side rendering, because it is not supported by Node.js.

webpack-isomorphic is a lightweight, easy-to-use solution to solve this issue, and make your client-side codes work on server too.

Usage

Installation

# for webpack 4
npm install --save webpack-isomorphic@4
# for webpack 3
npm install --save webpack-isomorphic@3

webpack.config.js

const IsomorphicPlugin = require('webpack-isomorphic/plugin');

const isomorphicPlugin = new IsomorphicPlugin({
	extensions: ['jpg', 'png', 'gif', 'css'],
	// assetsFilePath: 'webpack.assets.json'
});

module.exports = {
	// The base directory of your source files
	context: __dirname + '/src',
	// ...
	plugins: [
		//...
		isomorphicPlugin
	]
};

Server-side codes

const webpackIsomorphic = require('webpack-isomorphic');

// The base directory of your built files
webpackIsomorphic.install(__dirname + '/dist', {
	cache: process.env['NODE_ENV'] !== 'development',
	// assetsFilePath: __dirname + '/dist/webpack.assets.json'
});

//...

Enjoy!

Example

See the example project for more details.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].