React-web-component-react-scripts NPM

react-web-component-react-scripts

This package includes scripts and configuration you can use with Create React App to create a web component with React.

It is a fork of the orignal react-scripts with a modified template and dependencies.

Installation / Setup

To use react-web-component-react-scripts install create-react-app globally:

npm install -g create-react-app

Then create a new project with the create-react-app CLI pointing to react-web-component-react-scripts:

create-react-app my-app --scripts-version react-web-component-react-scripts
cd my-app/
yarn start

Differences to the original create-react-app react-scripts

This project utilizes react-web-component and react-web-component-style-loader. Webpack is already configured to use react-web-component-style-loader and your index.js template will look like this:

import React from 'react';
import ReactWebComponent from 'react-web-component';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactWebComponent.create(<App />, 'react-web-component');
registerServiceWorker();

Instead of rendering your app into an element, a web component (here named react-web-component) will be created. Because we use react-web-component-style-loader all CSS you import in your project will be injected into the web component. Please refer to the documentation on react-web-component and react-web-component-style-loader for their usage:

Another difference is that next to the index.html a file htmlImport.html will be generated. Use index.html for development to preview your web component. Use htmlImport.html after building to use a with HTML Imports.

Development

After having created your project and switched to your project folder run

yarn start

A development server should start and http://localhost:3000 should open displaying your web component. You can develop your React components without any restrictions in complexity and features. Bare in mind though that you should not modify the host pages URL, for instance through react-router. You can still use react-router with the MemoryRouter and have no negative side effects.

Read more about this and other development strategies on WeltN24/react-web-component.

Building

When you want to create a production build of your web component run

yarn build

The build directory now holds 2 HTML files: index.html and htmlImport.html. index.html is the HTML file you saw when you were developing your component, a website containing your web component. htmlImport.html holds the web component without HTML around it. You can use it to load it via HTML Imports.

Ejecting

You can eject your project the same way you eject an app created with create-react-app.

yarn eject

Further documentation

All other details on setting up and working with react-web-component-react-scripts work exactly the same as in the original create-react-app. Please refer to its documentation for further details: