Re: [Architecture] Webapp server for React based webapps

[SajithAR Ariyarathna]

Hi Jo,

On Tue, Sep 12, 2017 at 10:59 AM, Joseph Fonseka  wrote:

> Hi Sajith
>
> +1 For the server, would like to propose adding gzip support as well.
>
> Does the web-server enforce the web-app structure ? If so IMHO it would be
> best not to do that.
>
>  Initial thought was to enforce the directory structure for any web app.
But I understand that for web apps like the Composer, the whole directory
structure won't be necessary. So we can make configuration.yaml,
extensions, i18n, and themes directories optional.

Thanks.

> Thanks & Regards
> Jo
>
>
>
>
>
>
> On Tue, Sep 12, 2017 at 10:13 AM, Chanaka Jayasena 
> wrote:
>
>> Hi Sajith,
>>
>> +1 for the web server. We will be able to replace the MS4J service inside
>> carbon-apimgt with this one when it's available.
>>
>> Following are some of my suggestions and thoughts.
>>
>> Can we put the public/images/logo.png and public/css/styles.css in the
>> default theme ?
>>
>> I believe the extensions are stand alone js files. In APIM case it will
>> be useful to add a new page to the store app. But we will have to write the
>> react app client side routing to pick the extension as a new route.
>>
>>
>> thanks,
>> Chanaka
>>
>> On Mon, Sep 11, 2017 at 3:35 PM, SajithAR Ariyarathna 
>> wrote:
>>
>>> Hi All,
>>>
>>> We are in the process of developing $subject. Tentatively this webapp
>>> server is named as "Carbon UI Server".
>>>
>>> # Major goals of this webapp server are following:
>>>
>>>- Enforcing security measures.
>>>   - Setting proper cache headers
>>>   - Setting recommended security related HTTP headers
>>>   - Protection against file system navigation through URLs
>>>- Defining a structure for webapps.
>>>   - Requirement is to properly define places to put page(s),
>>>   themes, UI extensions, and internalization language files in the 
>>> webapp.
>>>- Proper routeing for SPA apps.
>>>   - For SPA apps, index.html should be served for any request for a
>>>   page.
>>>
>>> # Proposing directory structure:
>>>
>>> - Webapps will be placed in /wso2//d
>>> eployments/reactapps/
>>>
>>> - Structure of a webapp:
>>>
>>> 
>>> ├── configuration.yaml
>>> │
>>> ├── extensions
>>> │   ├── widgets
>>> │   │   ├── line-chart/
>>> │   │   ├── bar-chart/
>>> │   │   └── calendar/
>>> │   │   ├── bundle.js
>>> │   │   ├── styles.css
>>> │   │   └── widget.json
>>> │   │
>>> │   └── device-types
>>> │   ├── andoid/
>>> │   ├── ios/
>>> │   └── ardino/
>>> │   └── ports.json
>>> ├── i18n
>>> │   ├── fr.properties
>>> │   └── en.properties
>>> │
>>> ├── pages
>>> │   └── index.html
>>> │
>>> ├── public
>>> │   ├── images
>>> │   │   └── logo.png
>>> │   ├── css
>>> │   │   └── styles.css
>>> │   └── js
>>> │   └── bundle.js
>>> │
>>> └── themes
>>> ├── dark/
>>> └── light
>>> ├── js
>>> │   └── some.js
>>> └── css
>>> └── styles.css
>>>
>>>
>>> - configuration.yaml will contain configurations of the web app (e.g.
>>> app context path, custom security headers). These configurations should be
>>> able to add/override through the deployment.yaml file.
>>>
>>> - extensions directory contains UI extensions. There can be multiple
>>> types of extensions and they are categorized accordingly into
>>> sub-directories inside the extensions directory. Each extension should
>>> be wrapped with a directory (the name of the directory will be the name of
>>> the extension), and placed inside the relevant type. Thus, the fully
>>> qualified name of an extension will be : (e.g.
>>> widgets:line-chart)
>>>
>>> - i18n directory will bear the internalization language files.
>>>
>>> - public directory contains any client-side resources of the app.
>>>
>>> - themes directory contains the themes of the app. Each theme should be
>>> put inside a sub-directory.
>>>
>>>
>>> # URL patterns:
>>>
>>>- Pages
>>>   - /path/to/page (e.g.
>>>   https://localhost:9292/pets-store/home
>>>   )
>>>- Resources of the app
>>>   - /public/app/
>>>   (e.g. https://localhost:9292/pets-store/public/app/images/logo.png
>>>   )
>>>   - Resources of an extension
>>>   - 
>>> /public/extensions///
>>>   (e.g. https://localhost:9292/pets-store/public/extensions/widgets/
>>>   calendar/styles.css)
>>>   - Resources of a theme
>>>   - 
>>> /public/themes//
>>>   (e.g. https://localhost:9292/pets-store/public/themes/light/css/st
>>>   yles.css)
>>>
>>>
>>> WDYT?
>>>
>>> Thanks.
>>> --
>>> Sajith Janaprasad Ariyarathna
>>> Senior Software Engineer; WSO2, Inc.;  http://wso2.com/
>>> 
>>>
>>
>>
>>
>> --
>> Chanaka Jayasena
>> Associate Tech Lead,
>> email: 

Re: [Architecture] Webapp server for React based webapps

[Dilan Udara Ariyaratne]

Hi Sajith,

With respect to the Structure of the web-app, My concern is actually on the
public folder because I do not think that only the stuff that lie under
public folder would be public, please correct
me If I am wrong. IMO, I believe that everything else here is also public
since this doesn't carry any server-side rendering code.

So, may be we need to reconsider restructuring stuff that currently lie
within the public folder. For example, moving everything with in the public
folder into pages, WDYT?

And, also would you explain the purpose of those extensions/device-types
content ?

Thanks,
Dilan.

*Dilan U. Ariyaratne*
Senior Software Engineer
WSO2 Inc. 
Mobile: +94766405580 <%2B94766405580>
lean . enterprise . middleware


On Tue, Sep 12, 2017 at 10:59 AM, Joseph Fonseka  wrote:

> Hi Sajith
>
> +1 For the server, would like to propose adding gzip support as well.
>
> Does the web-server enforce the web-app structure ? If so IMHO it would be
> best not to do that.
>
> Thanks & Regards
> Jo
>
>
>
>
>
>
> On Tue, Sep 12, 2017 at 10:13 AM, Chanaka Jayasena 
> wrote:
>
>> Hi Sajith,
>>
>> +1 for the web server. We will be able to replace the MS4J service inside
>> carbon-apimgt with this one when it's available.
>>
>> Following are some of my suggestions and thoughts.
>>
>> Can we put the public/images/logo.png and public/css/styles.css in the
>> default theme ?
>>
>> I believe the extensions are stand alone js files. In APIM case it will
>> be useful to add a new page to the store app. But we will have to write the
>> react app client side routing to pick the extension as a new route.
>>
>>
>> thanks,
>> Chanaka
>>
>> On Mon, Sep 11, 2017 at 3:35 PM, SajithAR Ariyarathna 
>> wrote:
>>
>>> Hi All,
>>>
>>> We are in the process of developing $subject. Tentatively this webapp
>>> server is named as "Carbon UI Server".
>>>
>>> # Major goals of this webapp server are following:
>>>
>>>- Enforcing security measures.
>>>   - Setting proper cache headers
>>>   - Setting recommended security related HTTP headers
>>>   - Protection against file system navigation through URLs
>>>- Defining a structure for webapps.
>>>   - Requirement is to properly define places to put page(s),
>>>   themes, UI extensions, and internalization language files in the 
>>> webapp.
>>>- Proper routeing for SPA apps.
>>>   - For SPA apps, index.html should be served for any request for a
>>>   page.
>>>
>>> # Proposing directory structure:
>>>
>>> - Webapps will be placed in /wso2//d
>>> eployments/reactapps/
>>>
>>> - Structure of a webapp:
>>>
>>> 
>>> ├── configuration.yaml
>>> │
>>> ├── extensions
>>> │   ├── widgets
>>> │   │   ├── line-chart/
>>> │   │   ├── bar-chart/
>>> │   │   └── calendar/
>>> │   │   ├── bundle.js
>>> │   │   ├── styles.css
>>> │   │   └── widget.json
>>> │   │
>>> │   └── device-types
>>> │   ├── andoid/
>>> │   ├── ios/
>>> │   └── ardino/
>>> │   └── ports.json
>>> ├── i18n
>>> │   ├── fr.properties
>>> │   └── en.properties
>>> │
>>> ├── pages
>>> │   └── index.html
>>> │
>>> ├── public
>>> │   ├── images
>>> │   │   └── logo.png
>>> │   ├── css
>>> │   │   └── styles.css
>>> │   └── js
>>> │   └── bundle.js
>>> │
>>> └── themes
>>> ├── dark/
>>> └── light
>>> ├── js
>>> │   └── some.js
>>> └── css
>>> └── styles.css
>>>
>>>
>>> - configuration.yaml will contain configurations of the web app (e.g.
>>> app context path, custom security headers). These configurations should be
>>> able to add/override through the deployment.yaml file.
>>>
>>> - extensions directory contains UI extensions. There can be multiple
>>> types of extensions and they are categorized accordingly into
>>> sub-directories inside the extensions directory. Each extension should
>>> be wrapped with a directory (the name of the directory will be the name of
>>> the extension), and placed inside the relevant type. Thus, the fully
>>> qualified name of an extension will be : (e.g.
>>> widgets:line-chart)
>>>
>>> - i18n directory will bear the internalization language files.
>>>
>>> - public directory contains any client-side resources of the app.
>>>
>>> - themes directory contains the themes of the app. Each theme should be
>>> put inside a sub-directory.
>>>
>>>
>>> # URL patterns:
>>>
>>>- Pages
>>>   - /path/to/page (e.g.
>>>   https://localhost:9292/pets-store/home
>>>   )
>>>- Resources of the app
>>>   - /public/app/
>>>   (e.g. https://localhost:9292/pets-store/public/app/images/logo.png
>>>   )
>>>   - Resources of an extension
>>>   - 
>>> /public/extensions///
>>>   (e.g. 

Re: [Architecture] Webapp server for React based webapps

[Joseph Fonseka]

Hi Sajith

+1 For the server, would like to propose adding gzip support as well.

Does the web-server enforce the web-app structure ? If so IMHO it would be
best not to do that.

Thanks & Regards
Jo






On Tue, Sep 12, 2017 at 10:13 AM, Chanaka Jayasena  wrote:

> Hi Sajith,
>
> +1 for the web server. We will be able to replace the MS4J service inside
> carbon-apimgt with this one when it's available.
>
> Following are some of my suggestions and thoughts.
>
> Can we put the public/images/logo.png and public/css/styles.css in the
> default theme ?
>
> I believe the extensions are stand alone js files. In APIM case it will be
> useful to add a new page to the store app. But we will have to write the
> react app client side routing to pick the extension as a new route.
>
>
> thanks,
> Chanaka
>
> On Mon, Sep 11, 2017 at 3:35 PM, SajithAR Ariyarathna 
> wrote:
>
>> Hi All,
>>
>> We are in the process of developing $subject. Tentatively this webapp
>> server is named as "Carbon UI Server".
>>
>> # Major goals of this webapp server are following:
>>
>>- Enforcing security measures.
>>   - Setting proper cache headers
>>   - Setting recommended security related HTTP headers
>>   - Protection against file system navigation through URLs
>>- Defining a structure for webapps.
>>   - Requirement is to properly define places to put page(s), themes,
>>   UI extensions, and internalization language files in the webapp.
>>- Proper routeing for SPA apps.
>>   - For SPA apps, index.html should be served for any request for a
>>   page.
>>
>> # Proposing directory structure:
>>
>> - Webapps will be placed in /wso2//d
>> eployments/reactapps/
>>
>> - Structure of a webapp:
>>
>> 
>> ├── configuration.yaml
>> │
>> ├── extensions
>> │   ├── widgets
>> │   │   ├── line-chart/
>> │   │   ├── bar-chart/
>> │   │   └── calendar/
>> │   │   ├── bundle.js
>> │   │   ├── styles.css
>> │   │   └── widget.json
>> │   │
>> │   └── device-types
>> │   ├── andoid/
>> │   ├── ios/
>> │   └── ardino/
>> │   └── ports.json
>> ├── i18n
>> │   ├── fr.properties
>> │   └── en.properties
>> │
>> ├── pages
>> │   └── index.html
>> │
>> ├── public
>> │   ├── images
>> │   │   └── logo.png
>> │   ├── css
>> │   │   └── styles.css
>> │   └── js
>> │   └── bundle.js
>> │
>> └── themes
>> ├── dark/
>> └── light
>> ├── js
>> │   └── some.js
>> └── css
>> └── styles.css
>>
>>
>> - configuration.yaml will contain configurations of the web app (e.g.
>> app context path, custom security headers). These configurations should be
>> able to add/override through the deployment.yaml file.
>>
>> - extensions directory contains UI extensions. There can be multiple
>> types of extensions and they are categorized accordingly into
>> sub-directories inside the extensions directory. Each extension should
>> be wrapped with a directory (the name of the directory will be the name of
>> the extension), and placed inside the relevant type. Thus, the fully
>> qualified name of an extension will be : (e.g.
>> widgets:line-chart)
>>
>> - i18n directory will bear the internalization language files.
>>
>> - public directory contains any client-side resources of the app.
>>
>> - themes directory contains the themes of the app. Each theme should be
>> put inside a sub-directory.
>>
>>
>> # URL patterns:
>>
>>- Pages
>>   - /path/to/page (e.g.
>>   https://localhost:9292/pets-store/home
>>   )
>>- Resources of the app
>>   - /public/app/
>>   (e.g. https://localhost:9292/pets-store/public/app/images/logo.png)
>>   - Resources of an extension
>>   - 
>> /public/extensions///
>>   (e.g. https://localhost:9292/pets-store/public/extensions/widgets/
>>   calendar/styles.css)
>>   - Resources of a theme
>>   - 
>> /public/themes//
>>   (e.g. https://localhost:9292/pets-store/public/themes/light/css/st
>>   yles.css)
>>
>>
>> WDYT?
>>
>> Thanks.
>> --
>> Sajith Janaprasad Ariyarathna
>> Senior Software Engineer; WSO2, Inc.;  http://wso2.com/
>> 
>>
>
>
>
> --
> Chanaka Jayasena
> Associate Tech Lead,
> email: chan...@wso2.com; cell: +94 77 4464006 <+94%2077%20446%204006>
> blog: http://chanaka3d.blogspot.com
>



-- 

-- 
*Joseph Fonseka*
WSO2 Inc.; http://wso2.com
lean.enterprise.middleware

mobile: +94 772 512 430
skype: jpfonseka

* *
___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Webapp server for React based webapps

[SajithAR Ariyarathna]

Hi Chanaka,

On Tue, Sep 12, 2017 at 10:13 AM, Chanaka Jayasena  wrote:

> Hi Sajith,
>
> +1 for the web server. We will be able to replace the MS4J service inside
> carbon-apimgt with this one when it's available.
>
> Following are some of my suggestions and thoughts.
>
> Can we put the public/images/logo.png and public/css/styles.css in the
> default theme ?
>
Yes. Here, I put them as examples.

>
> I believe the extensions are stand alone js files. In APIM case it will be
> useful to add a new page to the store app. But we will have to write the
> react app client side routing to pick the extension as a new route.
>
Extensions are React components.

Thanks.

>
>
> thanks,
> Chanaka
>
> On Mon, Sep 11, 2017 at 3:35 PM, SajithAR Ariyarathna 
> wrote:
>
>> Hi All,
>>
>> We are in the process of developing $subject. Tentatively this webapp
>> server is named as "Carbon UI Server".
>>
>> # Major goals of this webapp server are following:
>>
>>- Enforcing security measures.
>>   - Setting proper cache headers
>>   - Setting recommended security related HTTP headers
>>   - Protection against file system navigation through URLs
>>- Defining a structure for webapps.
>>   - Requirement is to properly define places to put page(s), themes,
>>   UI extensions, and internalization language files in the webapp.
>>- Proper routeing for SPA apps.
>>   - For SPA apps, index.html should be served for any request for a
>>   page.
>>
>> # Proposing directory structure:
>>
>> - Webapps will be placed in /wso2//d
>> eployments/reactapps/
>>
>> - Structure of a webapp:
>>
>> 
>> ├── configuration.yaml
>> │
>> ├── extensions
>> │   ├── widgets
>> │   │   ├── line-chart/
>> │   │   ├── bar-chart/
>> │   │   └── calendar/
>> │   │   ├── bundle.js
>> │   │   ├── styles.css
>> │   │   └── widget.json
>> │   │
>> │   └── device-types
>> │   ├── andoid/
>> │   ├── ios/
>> │   └── ardino/
>> │   └── ports.json
>> ├── i18n
>> │   ├── fr.properties
>> │   └── en.properties
>> │
>> ├── pages
>> │   └── index.html
>> │
>> ├── public
>> │   ├── images
>> │   │   └── logo.png
>> │   ├── css
>> │   │   └── styles.css
>> │   └── js
>> │   └── bundle.js
>> │
>> └── themes
>> ├── dark/
>> └── light
>> ├── js
>> │   └── some.js
>> └── css
>> └── styles.css
>>
>>
>> - configuration.yaml will contain configurations of the web app (e.g.
>> app context path, custom security headers). These configurations should be
>> able to add/override through the deployment.yaml file.
>>
>> - extensions directory contains UI extensions. There can be multiple
>> types of extensions and they are categorized accordingly into
>> sub-directories inside the extensions directory. Each extension should
>> be wrapped with a directory (the name of the directory will be the name of
>> the extension), and placed inside the relevant type. Thus, the fully
>> qualified name of an extension will be : (e.g.
>> widgets:line-chart)
>>
>> - i18n directory will bear the internalization language files.
>>
>> - public directory contains any client-side resources of the app.
>>
>> - themes directory contains the themes of the app. Each theme should be
>> put inside a sub-directory.
>>
>>
>> # URL patterns:
>>
>>- Pages
>>   - /path/to/page (e.g.
>>   https://localhost:9292/pets-store/home
>>   )
>>- Resources of the app
>>   - /public/app/
>>   (e.g. https://localhost:9292/pets-store/public/app/images/logo.png)
>>   - Resources of an extension
>>   - 
>> /public/extensions///
>>   (e.g. https://localhost:9292/pets-store/public/extensions/widgets/
>>   calendar/styles.css)
>>   - Resources of a theme
>>   - 
>> /public/themes//
>>   (e.g. https://localhost:9292/pets-store/public/themes/light/css/st
>>   yles.css)
>>
>>
>> WDYT?
>>
>> Thanks.
>> --
>> Sajith Janaprasad Ariyarathna
>> Senior Software Engineer; WSO2, Inc.;  http://wso2.com/
>> 
>>
>
>
>
> --
> Chanaka Jayasena
> Associate Tech Lead,
> email: chan...@wso2.com; cell: +94 77 4464006 <+94%2077%20446%204006>
> blog: http://chanaka3d.blogspot.com
>



-- 
Sajith Janaprasad Ariyarathna
Senior Software Engineer; WSO2, Inc.;  http://wso2.com/

___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Re: [Architecture] Webapp server for React based webapps

[Chanaka Jayasena]

Hi Sajith,

+1 for the web server. We will be able to replace the MS4J service inside
carbon-apimgt with this one when it's available.

Following are some of my suggestions and thoughts.

Can we put the public/images/logo.png and public/css/styles.css in the
default theme ?

I believe the extensions are stand alone js files. In APIM case it will be
useful to add a new page to the store app. But we will have to write the
react app client side routing to pick the extension as a new route.


thanks,
Chanaka

On Mon, Sep 11, 2017 at 3:35 PM, SajithAR Ariyarathna 
wrote:

> Hi All,
>
> We are in the process of developing $subject. Tentatively this webapp
> server is named as "Carbon UI Server".
>
> # Major goals of this webapp server are following:
>
>- Enforcing security measures.
>   - Setting proper cache headers
>   - Setting recommended security related HTTP headers
>   - Protection against file system navigation through URLs
>- Defining a structure for webapps.
>   - Requirement is to properly define places to put page(s), themes,
>   UI extensions, and internalization language files in the webapp.
>- Proper routeing for SPA apps.
>   - For SPA apps, index.html should be served for any request for a
>   page.
>
> # Proposing directory structure:
>
> - Webapps will be placed in /wso2//d
> eployments/reactapps/
>
> - Structure of a webapp:
>
> 
> ├── configuration.yaml
> │
> ├── extensions
> │   ├── widgets
> │   │   ├── line-chart/
> │   │   ├── bar-chart/
> │   │   └── calendar/
> │   │   ├── bundle.js
> │   │   ├── styles.css
> │   │   └── widget.json
> │   │
> │   └── device-types
> │   ├── andoid/
> │   ├── ios/
> │   └── ardino/
> │   └── ports.json
> ├── i18n
> │   ├── fr.properties
> │   └── en.properties
> │
> ├── pages
> │   └── index.html
> │
> ├── public
> │   ├── images
> │   │   └── logo.png
> │   ├── css
> │   │   └── styles.css
> │   └── js
> │   └── bundle.js
> │
> └── themes
> ├── dark/
> └── light
> ├── js
> │   └── some.js
> └── css
> └── styles.css
>
>
> - configuration.yaml will contain configurations of the web app (e.g. app
> context path, custom security headers). These configurations should be able
> to add/override through the deployment.yaml file.
>
> - extensions directory contains UI extensions. There can be multiple
> types of extensions and they are categorized accordingly into
> sub-directories inside the extensions directory. Each extension should be
> wrapped with a directory (the name of the directory will be the name of the
> extension), and placed inside the relevant type. Thus, the fully qualified
> name of an extension will be : (e.g. widgets:line-chart)
>
> - i18n directory will bear the internalization language files.
>
> - public directory contains any client-side resources of the app.
>
> - themes directory contains the themes of the app. Each theme should be
> put inside a sub-directory.
>
>
> # URL patterns:
>
>- Pages
>   - /path/to/page (e.g.
>   https://localhost:9292/pets-store/home
>   )
>- Resources of the app
>   - /public/app/
>   (e.g. https://localhost:9292/pets-store/public/app/images/logo.png)
>   - Resources of an extension
>   - /public/extensions///   relative-to-extension-directory> (e.g.
>   https://localhost:9292/pets-store/public/extensions/widgets/
>   calendar/styles.css
>   
> 
>   )
>   - Resources of a theme
>   - 
> /public/themes//
>   (e.g. https://localhost:9292/pets-store/public/themes/light/css/st
>   yles.css)
>
>
> WDYT?
>
> Thanks.
> --
> Sajith Janaprasad Ariyarathna
> Senior Software Engineer; WSO2, Inc.;  http://wso2.com/
> 
>



-- 
Chanaka Jayasena
Associate Tech Lead,
email: chan...@wso2.com; cell: +94 77 4464006
blog: http://chanaka3d.blogspot.com
___
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture