Start by installing direflow-CLI
Now, use this command to create a new Direflow Setup
A folder will be created at your current location.
Now, cd into your new project and use the following commands
Your Direflow Setup will start running on
localhost:3000 and your browser opens a new window
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)
The setup will look close to the one you get when using create-react-app.
However, there are a couple of differences.
The public folder contains an
This is where you consume your Web Component during development.
There will exist two types of essential
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
ℹ️ You can change the path to the folder
See how to do that here.
index.js file, the React App is mounted as a Web Component using the
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
The configuration object can also contain plugins.
See more under plugins.
There is also a main
index.js file that is placed in
This is the entry file of the setup, and is required to exist.
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 once it is mounted on the DOM.
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
We export all components we need in our React component library here:
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".
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:
Sometimes we want to access our Web Component whenever it is mounted on the DOM.
create() method returns a promise with a reference to the DOM element, when resolved.
ℹ️ Note that DireflowComponent.create actually returns a
DireflowPromiseAlikewhich wraps a Promise.
This allows the
thenmethod to be called multiple times.
It also means that there is no
catchmethod, and that 'async/await' cannot be used.
During development of your Direflow Components, you can start the component on development server by running
Build your Direflow Components by running the command
This will create a
/build folder containing a
In order to use your Web Component, simply import this file in a project, and use your Web Component as:
Build your React component library by running the command
This will create a
/lib folder containing the React component library.
Add a field to package.json:
Now you can publish the React component library using:
You may experience a well-known issue with React hooks and multiple instances of React.
If you are using hooks in your React components, you want to move