0

I'm trying something here that can really ease my pain. I just took back a project where the front end used is reactjs and the backend is .NET ASPNet 4.6.

I'm just trying to get hot reload work with webpack (as it's much more better than building every time i want to see something working)

The problem is i have a really hard time to configure to make it work, and i don't really understand how webpack hot reload work.

I figure out that in the building process, the js file and css file are copied to special folder where .NET take it and re render it. How can i make it to listen to some file ? I really need to launch it from .NET because i have some controller there to acces the back-end that are built in. (I did not choose the architecture, it's imposed unfortunately).

What i already tried :

  • some plugin from github, but infortunately they use ASPNet 5 and the method

    public void Configuration(IApplicationBuilder app)
  {
     ConfigureAuth(app);
  }

    and in my project : 

    public void Configuration(IAppBuilder app)
    {
        ConfigureAuth(app);
    }

I know, it's old .. so not compatible (it's in the Startup.cs file in .NET)

  • I tried to connect using http request but they choose to be built IN so i can't acces it via http ://

  • My react file css and js are loaded up by .NET in a .cshtml file that is loaded at the root of the path (so the user acces .NET, all .NET controller loaded, then react is loaded and landing react page is render).

I have no idea what to look next if you have any idea i can try

Don't hesitate to ask me for more information, i don't know what to provide.

Thanks in advance from the community

foufrix
  • 1,324
  • 4
  • 21
  • 45

2 Answers2

1

After different setup and tries, i found a partial solution, it's not hot reload as we know it, but it avoid to build every time.

In 2 lines of code, in webpack.config.js add one line at output : 

output: {
        path: __dirname + "/src/output/",
        filename: "client.min.js",
        publicPath: 'http://localhost:3000/static/'

The important line is publicPath

And then in index.cshtml : 

<script src="@Url.Content("http://localhost:3000/static/client.min.js?" + ViewBag.version)"></script>

This make a public js file with a node serv on react side when you run npm run dev and the .NET server listen to it.

Though you still have to reload your navigator page to see the changes, i'm gonna take a look on how to make it automatic and comment it here. If anyone have some clue about that feel free to help !

foufrix
  • 1,324
  • 4
  • 21
  • 45
0

You can use browser-sync webpack plugin: I found a neat example here: Setting up a React Environment for ASP.NET MVC

pmosconi
  • 565
  • 5
  • 9