Document WebForms integration

[pmonty]

So wondering if this is possible. Since I have finally managed to get React.NET working with my ASP.NET Web Forms project (VB.NET). I was wondering if it is possible to have some kind of way to flag when to use it.

Idea I have in my head is to somehow based on the Solution Configuration setting I can do the following.

If it is set to Release then it will build with Webpack. If set to Debug then it will use the setup I have working in #963 to run.

I am thinking of something this where IsDebug is a directive check on DEBUG

Sub Configure()
    If IsDebug() Then
        ' Debug
        ' I have multiple entry points so I guess exposing them all via an index.tsx file will fix this
        ReactSiteConfiguration.Configuration
            .SetReuseJavaScriptEngines(True)
            .SetAllowJavaScriptPrecompilation(True)
            .SetBabelVersion(BabelVersions.Babel7)
            .AddScript("~/React/index.tsx")
    Else
       ' Release
       ' Here I am confused but I guess including each entrypoint bundle?
       ReactSiteConfiguration.Configuration
           .AddScriptWithoutTransform("bundle1")
           .AddScriptWithoutTransform("bundle2")
    End If
End Sub

My questions from that setup though are:

1. Is it possible to get HMR working in Debug mode especially?
2. Will I need to call IsDebug() in each aspx.vb page code now so it doesn't error?

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If IsDebug() Then
        Dim env = React.ReactEnvironment.Current
        env.GetInitJavaScript()
        Dim objectModel = New With {Key .user = "React ssUser"}
        Dim reactComponent = env.CreateComponent("TestPage", objectModel)
        PageContent.Text = reactComponent.RenderHtml()
    End If
End Sub

3. Having a <script src="../bundles/bundle1.js" /> in the respective pages will work for Release I guess and 404 in Debug? which I am fine with if its only debug mode.
4. Is it possible to have the package.json and webpack files inside the React app folder so I can still use vscode and run the app separately to the ASP.NET project which some devs will do from time to time.

[pmonty]

After reading the documentation on webpack section a bit further. Looks like I can just use webpack itself and that will mean I can definitely run the project by itself (question 4 answered) and then also run the bundles inside my ASP.NET application.

But in that case I could just add the React stuff into the Project and just have a task that on startup builds the webpack build and runs the app? Almost eliminating the need for React.NET entirely.

[dustinsoftware]

Correct, webpack is a suitable alternative. Some people don’t want to go through the trouble of that for small projects. You can still leverage server side rendering if using webpack, check out the samples if you want to see how that’s done. Cheers

…

On Tue, Nov 5, 2019 at 21:44, pmonty ***@***.***> wrote: After reading the documentation on webpack section a bit further. Looks like I can just use webpack itself and that will mean I can definitely run the project by itself (question 4 answered) and then also run the bundles inside my ASP.NET application. But in that case I could just add the React stuff into the Project and just have a task that on startup builds the webpack build and runs the app? Almost eliminating the need for React.NET entirely. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#967?email_source=notifications&email_token=AAHGCFTFOEGQIQNSICO3M63QSJKVPA5CNFSM4JJPQ752YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDFLBNI#issuecomment-550154421>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHGCFRXJLHJ43EOQNG2IJLQSJKVPANCNFSM4JJPQ75Q> .

[pmonty]

Yeh will give the webpack path a go. Only concern is... can I have the webpack config, package.json and tsconfig files in the ~/ClientApp/ so I can run it directly and only open that folder in vscode as I'll have a script for injecting it into a template.

EDIT:
This should be fine I will have some html templates and a separate script/webpack config for running it in vscode.

[pmonty]

Ok so after some following along with the sample I have the following VB.NET setup.
ReactConfig.vb:

        ReactSiteConfiguration.
                Configuration.
                SetReuseJavaScriptEngines(True).
                AddScriptWithoutTransform("~/Clientapp/dist/routes.bundle.js")

        JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName
        JsEngineSwitcher.Current.EngineFactories.AddV8()

test.aspx

   <asp:Literal ID="route1" runat="server"></asp:Literal>
    <script src="~/Clientapp/dist/routes.bundle.js"></script>

test.aspx.vb

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        Dim env = ReactEnvironment.Current
        env.GetInitJavaScript()
        Dim objectModel = New With {Key .route = "route1"}
        Dim reactComponent = env.CreateComponent("Routes.Route1", objectModel)
        route1.Text = reactComponent.RenderHtml()
    End Sub

index.js

import { Route1 } from './Route1'
import { Route2 } from './Route2'

global.Routes = { Route1, Route2 }

Route1/index.tsx

import * as React from 'react'
export class Route2 extends React.Component<any> {
    render = () => {
        return (
            <div>Hello world from {this.props.route}</div>
        );
    }
}

But when I run it I get https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=t
Error while rendering "Routes.Route1" to "react_0HLR35UQ05PM1": Error: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=t

UPDATE:
Issue was not returning properly in a render for a component I had in my source (not the example I posted here). Works now. But would like to confirm this is the correct approach for Webpack and SSR 😃
If it is correct I would definitely contribute to the docs if you guys think it would be helpful.

[dustinsoftware]

Interesting! I think for the sake of keeping the docs focused on using a single language, we should stick with C#. However adding a brief section on calling from WebForms would be very useful!

[pmonty]

So got back on to this project after a hiatus and one situation which is strange is occurring when I create a simple component and import it into the parent.

Component.tsx

export class ComponentTest extends React.Component {
    render: any = () => {
       return ( <p>test component</p>)
    }
}

index.tsx

import { ComponentTest } from './component';

class Component1 extends React.Component<any> {
    render = () => {
        return (
            <div>
                Hello world from route 1=  {this.props.test}
                <ComponentTest />
            </div>
        );
    }
}

I get Error while loading "~/ClientApp/Component1/index.tsx": SyntaxError: Unexpected token { at index.tsx:9:8 -> import { ComponentTest } from './component';' even when I go to a different .aspx page that renders Component2 which doesn't have any children component it complains with the same error.

Update:
https://github.com/pmonty/webforms-react
There is a repo, so I am trying to get both a release and debug path going as you can see in ./App_Start/ReactConfig.vb to no avail yet.

Update2:
Made some changes as I realised the order of the scripts in ReactConfig.vb actually mattered 🤕 but now in the component.tsx file it doesn't like the export token.

[dustinsoftware]

Hey @pmonty I think at this point this github issue will do a good enough job getting folks started with using WebForms :) given that MS is actively pushing people away from it (no new updates, no .NET 5 support) I hope folks will reach for an incremental MVC port before they reach for this library.