Get startedInstall CLICreate new Direflow SetupThe SetupAccess the DOM elementDevelopingBuildBuild React component libraryPropertiesEventsStylingPluginsConfigurationAdditionalGuides & tipsContributingChangelog

Install CLI

Start by installing direflow-CLI

npm i -g direflow-cli

Create new Direflow Setup

Now, use this command to create a new Direflow Setup

direflow create

Now you can choose a name for your setup and a prefered language. Currently both JavaScript and TypeScript is supported.
A folder will be created at your current location.

Now, cd into your new project and use the following commands

cd <project-folder>
npm install
npm start

Your Direflow Setup will start running on localhost:3000 and your browser opens a new window




The Setup

When you create a new Direflow Setup from direflow-cli, you will get a basic setup that looks like this:
(TypeScript will have a couple of additional files)

.
├── public
│ ├── index.css
│ └── index.html
├── src
│ ├── direflow-components
│ │ └── my-component
│ │ ├── test
│ │ │ └── App.test.js
│ │ ├── App.css
│ │ ├── App.js
│ │ └── index.js
│ ├── component-exports.js
│ └── index.js
├── direflow-webpack.js
├── package.json
└── README.md

The setup will look close to the one you get when using create-react-app.
However, there are a couple of differences.

index.html

The public folder contains an index.html file.
This is where you consume your Web Component during development.

index.js

There will exists two types of essential index.js files.

Direflow Component index.js file

There is an index.js file that belongs to each Direflow Component.
All Direflow Components must each be placed in a folder directly inside the folder direflow-components.

ℹ️ You can change the path to the folder direflow-components in the direflow-config.json file.
See how to do that here.

In this index.js file, the React App is mounted as a Web Component using the DireflowComponent instance.

// src/direflow-components/cool-component/index.js
import { DireflowComponent } from 'direflow-component';
import App from './App';
export default DireflowComponent.create({
component: App,
configuration: {
tagname: 'cool-component',
},
});

In this file you can configure your Web Component.
As a default, the Web Component will be given the same name as your Direflow Setup, but you can easily rename it with the tagname property.

The configuration object can also contain plugins.
See more under plugins.

Main index.js file

There is also a main index.js file that is places in src/index.js.
This is the entry file of the setup, and is required to exist.
In this index.js file, it is practical to add any additional functionality or meta-logic for the setup, if needed.
For instance, this is a good place to hook into your Web Component one it's mounted on the DOM.

// src/index.js
import CoolComponent from "./cool-component";
CoolComponent.then((element) => {
// Access DOM node when it's mounted
console.log('cool-component is mounted on the DOM', element);
});

component-exports.js

This file is meant to build a regular React component library out of our setup.
If we need to export our Direflow Components as regular React components rather than building them as Web Components, we can use component-exports.js.

We export all components we need in our React component library here:

import CoolComponent from './direflow-components/cool-component/App';
import AwesomeComponent from './direflow-components/awesome-component/App';
export {
CoolComponent,
AwesomeComponent,
}

In this way, we can maintain both a React component library to consume in another React application, and a Web Component library to consume anywhere else.
All based on the same "source of truth".

direflow-webpack.js

This file gives you complete control over the Webpack setup.
A Direflow Setup is using the same configuration as in create-react-app, but is partially overriden using react-app-rewired.

However, this file offers the ability to further override any of the Webpack config that ships with Direflow.
Simply add an override after the first line:

module.exports = (config, env) => ({
...webpackConfig(config, env),
// Add your own webpack config here (optional)
});

Access the DOM element

Sometimes we want to access our Web Component whenever it is mounted on the DOM.
The create() method returns a promise with a reference to the DOM element, when resolved.

DireflowComponent.create({
component: App,
configuration: {
tagname: 'cool-component',
},
}).then((compnent) => {
// Do something with the component once it's mounted on the DOM.
});

ℹ️ Note that DireflowComponent.create actually returns a DireflowPromiseAlike which wraps a Promise.
This allows the then method to be called multiple times.
It also means that there's no catch method, and that 'async/await' cannot be used.

Developing

During development of your Direflow Components, you can start the component on development server by running

npm start

Build

Build your Direflow Components by running the command

npm run build

This will create a /build folder containing a direflowBundle.js file.

In order to use your Web Component, simply import this file in a project, and use your Web Component as:

<script src="./direflowBundle.js"></script>
<awesome-component></awesome-component>

Build React component library

Build your React component library by running the command

npm run build:lib

This will create a /lib folder containing the React component library.

Add a field to package.json:

"main": "lib/component-exports.js"

Now you can publish the React component library using:

npm publish

You may experience a well-known issue with React hooks and multiple instances of React.
If you're using hooks in your React components, you want to move react and react-dom dependencies to "peerDependencies" in package.json:

"peerDependencies": {
"react": "16.13.1",
"react-dom": "16.13.1"
}


→ Properties