# react-server-webpack-plugin

> A webpack plugin that generates entrypoints for @shopify/react-server based applications

Latest version **2.1.15-beta.1** (published 2019-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-server-webpack-plugin
pnpm add react-server-webpack-plugin
yarn add react-server-webpack-plugin
bun add react-server-webpack-plugin
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.15-beta.1 |
| Published | 2019-09-26 |
| First published | 2019-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1681 |
| Author | Shopify Inc. |
| Maintainers | ismail.syed |

## Links

- npm: https://www.npmjs.com/package/react-server-webpack-plugin
- Repository: https://github.com/Shopify/quilt
- Homepage: https://github.com/Shopify/quilt/blob/master/packages/react-server-webpack-plugin/README.md
- Issues: https://github.com/shopify/quilt/issues
- npm.io page: https://npm.io/package/react-server-webpack-plugin

## Dependencies (2)

- [@shopify/ast-utilities](https://npm.io/package/@shopify/ast-utilities.md) ^0.0.3
- [webpack-virtual-modules](https://npm.io/package/webpack-virtual-modules.md) ^0.1.11

## Recent versions

- 2.1.15-beta.1 (latest) — 2019-09-26

## README

# `@shopify/react-server-webpack-plugin`

[![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin.svg)](https://badge.fury.io/js/%40shopify%2Freact-server-webpack-plugin.svg)

A webpack plugin which generates "virtual" in-memory entrypoints for `@shopify/react-server` based applications. This plugin allows you to run a universal React application without needing any client/server-specific code.

## Installation

```bash
$ yarn add @shopify/react-server-webpack-plugin
```

## Usage

### With sewing-kit

As of version [0.102.0](https://github.com/Shopify/sewing-kit/blob/big-docs-update/CHANGELOG.md#L35) `sewing-kit` consumes this plugin by default if you have `@shopify/react-server` in your `package.json`. 

For detailed instructions on usage with Rails and sewing-kit see the documentation for [quilt_rails](/gems/quilt_rails/README.md).

### Without sewing-kit

First you will need to install all of the dependencies you'll need for your application

```sh
yarn add react react-dom
yarn add webpack @shopify/react-server @shopify/react-server-webpack-plugin @shopify/webpack-asset-metadata-plugin --dev
```

Since `@shopify/react-server` relies on `@shopify/webpack-asset-metadata-plugin`, you will need to setup both plugins in your webpack configuration. A simple starter (not production optimized) webpack setup is as follows:

```tsx
// webpack.config.js

const {ReactServerPlugin} = require('@shopify/react-server-webpack-plugin');
const {AssetMetadataPlugin} = require('@shopify/webpack-asset-metadata-plugin');

const universal = {
  mode: 'development',
  optimization: {
    minimize: false,
  },
  plugins: [new AssetMetadataPlugin(), new ReactServerPlugin()],
};

const server = {
  ...universal,
  name: 'server',
  target: 'node',
  entry: './server',
  externals: [
    (context, request, callback) => {
      if (/node_modules/.test(context)) {
        return callback(null, `commonjs ${request}`);
      }
      callback();
    },
  ],
};

const client = {
  ...universal,
  name: 'client',
  target: 'web',
  entry: './client',
};

module.exports = [server, client];
```

By default, this plugin expects the entrypoint to your application to be in the root directory.

```jsx
// index.jsx
import React from 'react';

export default function App() {
  return <div>I am an app</div>;
}
```

Next you can run `webpack && node dist/server.js`. When the server starts up you should see:

```sh
started react-server on localhost:PORT
```

If you point your browser at `localhost:PORT` you should see "I am an app". :)

### API

The plugin is exported as a named export.

```tsx
import {ReactServerPlugin} from '@shopify/react-server-webpack-plugin';
```

It accepts a configuration object with the following interface:

```tsx
interface Options {
  /*
   The base-path to use for the `client.js` and `server.js` virtual entry files,
   this should also be where your index.tsx/jsx is.

   default: '.'
  */

  basePath: string;

  /*
   The host to use when calling `createServer` from `@shopify/react-server`,
   this should also be where your index.tsx/jsx is.

   default: process.env.REACT_SERVER_IP || "localhost"
  */
  host: string;

  /*
    The port to use when calling `createServer` from `@shopify/react-server`

    default: process.env.REACT_SERVER_PORT || 8081
  */
  port: number;

  /*
   The assetPrefix to use when calling `createServer` from `@shopify/react-server`.

   default: process.env.CDN_URL || "localhost:8080/assets/webpack"
  */
  assetPrefix: string;
}
```

An example configuration for a `sewing-kit` app named `cool-app` might look like this:

```tsx
new ReactServerPlugin({
  assetPrefix: process.env.CDN_URL || 'https://localhost:8080/webpack/assets/';
});
```

---
_Source: https://npm.io/package/react-server-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._