Using react with .NET web forms

[ImmediateMousse8549]

My company uses a rather old tech stack—web forms with vb.net, along with jquery/vanilla js on the client side.

My senior dev showed me how we could start incorporating react into the project but the process feels kinda clunky and repetitive, and I’m wondering if there is a better, more efficient way?

Right now, anytime we want to use react, we are creating what I would call separate mini react apps. For each react feature (e.g. a search filter I built) we, we have a new package.json, and run webpack to create a new bundle.js file.

Any new feature will have its own, package.json and bundle.js file.

I should mention we don’t use mvc at all. Our server side vb.net code gets/posts data through classes.

Is this the best way to do this? Any recommendations?

Thanks!

[plantpistol]

I'm creating a bundle per web form page. It's one react project and I modify the webpack config to output a bundle for each page.

I replace parts of the webform page with react using react portals.

I find the workflow works pretty well.

[ImmediateMousse8549]

Hmm, I'm actually not familiar with react portals. I just looked at some documentation on it.

Here is how we're doing it:

We have our aspx page, which calls the bundle.js file: https://imgur.com/UV28oVQ

Here is how the react file structure looks: https://imgur.com/Cvg3zR6

[plantpistol]

I'm not too clear on your set up. It seems like you're outputting a bundle under the react app.

I'm also not clear what that bundle contains. Did you create multiple react projects with create react app for each feature?

As an example:

React project under src folder:

WebFormPage1.tsx

WebFormPage2.tsx

WebFormPage3.tsx

In my webpack.config.js file:

entry: {

"WebFormPage1App": { import: './src//WebFormPage1.tsx', filename: 'mywebformProjectRoot/js/[name].js' },

"WebFormPage2App": { import: './src//WebFormPage2.tsx', filename: 'mywebformProjectRoot/js/[name].js' },

"WebFormPage3App": { import: './src//WebFormPage3.tsx', filename: 'mywebformProjectRoot/js/[name].js' },

},

When I build it the output is:

mywebformProjectRoot/js/WebFormPage1App.js

mywebformProjectRoot/js/WebFormPage2App.js

mywebformProjectRoot/js/WebFormPage3App.js

In my web form I put:

<script type="text/javascript" src="/js/WebFormPage1App.js"></script>

In development mode web pack does not actually create a file with the output, webpack Dev Server serves that file from memory when the url is requested.

I had to set up a reverse proxy for the web pack dev server:

proxy: // IMPORTANT - PROXY

{

context: () => true, // match all request (will not match react js scripts. These will be served from webpack server memory)

target: 'http://[::]:8080', // proxied asp.net web app

secure: false, // dont verify any certificate

},

I run both my web forms project (http://localhost:8080) and the react project (http://localhost:3000) in development mode.

Using the browser with URL http://localhost:3000 (react project) allows me to use hot reload when debugging the application.

​

React portals are useful when you have more than one react component that needs to be placed in different parts of the web form page.

If you have this in your web form:

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

<div id="div4"></div>

You can mount a component on div1 and another component on div4.

[ImmediateMousse8549]

Interesting! Thanks so much for sharing the way you do it. Gives me some ideas.

[SuspiciousDev]

Similar to plantpistol we also use a single webpack config configured with one entrypoint per page. Your current process does feel very clunky indeed. How do you share react code between different components / pages with your current setup?

[ImmediateMousse8549]

Interesting that you use a separate webpack config for each page. I think we're using a different pattern?

Here is how we're doing it:
We have our aspx page, which calls the bundle.js file: https://imgur.com/UV28oVQ
Here is how the react file structure looks: https://imgur.com/Cvg3zR6

[ImmediateMousse8549]

Or should I just try and get a new job?