didi0613/archetype-component-demo-server.md

## archetype-component-demo-server.md

      
    Raw
  

              archetype-component-demo-server.md
            
          
    Electrode Archetype React Component

Demo-server Issues

basics

Component is in '/src' and demo files are in '/demo'.
Run gulp demo for development build and demo tasks.
gulp demo flow

My Component:
gulp demo => "demo": ["generate", "server-dev"]
"generate" => generate-metadata and generate-doc
"server-dev" => electrode-archetype-react-component => webpack/webpack.config.demo.dev.js

Webpack.config.demo.dev.js:
devServer: electrode-archetype-react-component/demo-server,
entry: electrode-archetype-react-component/demo-server/app.js 
    => jsx entry: /demo/demo.jsx
       => electrode-demo-index
          => components: examples/xxx.example => MyComponent
          => libraryScope: src/index
    => css entry: /demo/demo.css

                MyComponent     --------------------[1]------------------|
                demo                                                     |
  |---------------                                                       |
  |     |---->    |- examples: <MyComponent />                           |    
  |    [4]    |-- |- demo.css: ../src/styles/xxx.css    <----------------------|
  |     |-----|-- |- demo.jsx                           <----------------------|
  |           |     |- electrode-demo-index                              |     |
  |           |       |- libraryScope: src/index                         |     |
  |           |       |- components: examples/xxx.example                |     |
  |           |                                                          |     |
  |           |   node_modules/electrode-archetype-react-component       |    [3]
 [5]          |   |- config: webpack/webpack.config.demo.dev.js  <-------|     |
  |          [4]                                                               |
  |           |                                          ----------------|     |
  |           |   |- demo-server                         <------[2]------|     |
  |           |                                          ----------------------|
  |           |
  |           | src                                                       
  |           |   |- components: my-component.jsx  
  |           |   |- lang
  |           |-->|- styles                      
  |--------->     |- index.js           

demo-server context

Demo-server in electrode-archetype-react-component has two main tasks:

Start the electrode-server which createt a nodeJS happi web server with preset configurations
Create routes for rendering my component demo

Demo-server in electrode-archetype-react-component has its defects:

While we are testing component, in order to render demo files, component itself will initiate a call to itself's demo server for starting electrode-sever and redirect back to demo files.
This will cause a chicken-egg issue since component is trying to calling itself demo-server for starting the server & create routes for its demo.

proposed solution


Take demo-server out of electrode-archetype-react-component, point entry in webpack.config.demo.dev.js to MyComponent /demo/demo.jsx directly. And include demo.css from there.


Update the component generator, inside of MyComponent demo folder, create a index.js file which will start the electrode server with local config & demo server config.


Proposed flow:


My Component:
gulp demo => "demo": ["generate", "server-dev"]
"generate" => generate-metadata and generate-doc
"server-dev" => electrode-archetype-react-component => webpack/webpack.config.demo.dev.js

Webpack.config.demo.dev.js:
devServer: /demo,
entry: demo/demo.jsx
    => ./demo.css
    => electrode-demo-index
       => components: examples/xxx.example => MyComponent
       => libraryScope: src/index

demo/
    => index.js: start electrode-server with demo server config

                MyComponent     --------------------[1]------------------|
                demo                                                     |
  |---------------                                                       |
  |     |--->     |- examples: <MyComponent />                           |    
  |    [3]--->|-- |- demo.css: ../src/styles/xxx.css                     |
  |     |-----|-- |- demo.jsx                                   <--------|-----|
  |           |     |- electrode-demo-index                              |     |
  |           |       |- libraryScope: src/index                         |     |
  |           |       |- components: examples/xxx.example                |     |
  |           |   |- index.html                                 <--------|-----|
  |           |                                                          |     |
  |           |   node_modules/electrode-archetype-react-component       |    [2]
 [4]         [4]  |- config: webpack/webpack.config.demo.dev.js  <-------|     |
  |           |                                          ----------------------|
  |           |
  |           | src                                                       
  |           |   |- components: my-component.jsx  
  |           |   |- lang
  |           |-->|- styles                      
  |--------->     |- index.js