React Template : Make one simple change, rebuild react but doesn't show up in UserInterface

[raddevus]

Create a basic Photinoreact project template.

Make one change to the app.js like the following (add simple H1 element) in the return ():
app.js snippet...

return (
      <div className="App">
            <h1>Yes, I'm working</h1>
           <img src={photinoLogo} alt="Photino" className="logo center" />
          ...

Do the $ npm run build
Start the project & notice that the HTML does not contain the new H1 element.

I've also tried the suggested command to build React & start dotnet app, but it doesn't work either.
$ cd UserInterface && npm run build && cd .. && dotnet run

The project structure looks something like the following:

YourProjectFolder
       wwwroot
       UserInterface
            build -- seems to be the target dir for npm build

It seems newly built code is supposed to be run from YourProjectFolder\wwwroot
However, manually copying UserInterface\build output to YourProjectFolder\wwwroot doesn't seem to work either.

Of course, there is also the
YourProjectName\Bin\Debug\net5.0\wwwroot path
copying to that path manually doesn't seem to help either.

Not sure how to get changes in React UserInterface to be shown in Photino.NET app.

[raddevus]

It looks like the problem is that the files which are created in the UserInterface\build\ directory are never copied to the ProjectRoot\wwwroot\ directory. That means any changes you make in the UserInterface are never seen.

I created a complete script (using xcopy -- win10) which solves the problem.

$ cd UserInterface && npm run build && xcopy /E/Y build*.* ..\wwwroot\ && cd .. && dotnet run

That command

1. runs the React build
2. xcopy all the files from UserInterface\build over to the wwwroot folder
3. Then when dotnet runs, it builds & copies the files found in the projectroot\wwwroot to the bin\Debug\net5.0\wwwroot
4. when the app starts (running in debug mode) it uses those files in that last directory (bin\Debug...) and it all works.

I wasn't sure, but it looks like the xcopy command will work properly on Linux also so this should solve on at least those two platforms.

UPDATE
After some work, here is the command that will build the project & copy the files appropriately:
$ cd UserInter* && npm run build && xcopy /E/Y build*.* ..\wwwroot\ && cd .. && dotnet run

that command should be run from your Project root.
You can get more information & the newer React (18.1.0) template changes at the following project:
https://github.com/raddevus/PhotinoReactTemplateUpgrade

For this to work properly the npm build command in the package.json should just be the simple:
"build": "react-scripts build",

[ottodobretsberger]

This is definitely something we would need to address in all 3 OS. If, as you suggest, it works also for Linux, we'd still have to make sure we have a solution for macOS also before we publish the update to a newer version.

[mykeels]

I am experiencing same.

I would like to be able to hot-reload as I work, and this can be achieved by running npm start in the background.

See rudimentary code:

mykeels/MeeKaraoke@6d55e10#diff-0b69b473fe937040615d69f606751f61ddbc2e3a1849360ff2456c22afe88c0b

[ottodobretsberger]

If you wouldn't mind creating a PR for this, we would be happy to include this in our repo.
You would have to make the npm run build command in the csproj file dependent on the current environment (debug/release) and do the same for the
public static bool IsDebugMode = true;
in Program.cs (or address it directly in line 77 where it's being used)

[mykeels]

See PR.