Integrate Asp.net MVC (.net framework 4.7) with ReactJS - reactjs

The existing project is MVC with ExtJS. We want to migrate ExtJs to ReactJs alone instead of entire project.
I want to create react-app with existing Asp.net MVC.
I have tried to create using create-react-app or Vite.
But the idea to run Asp.net mvc with ReactJs is,
Build react app (will watch build folder)
The build output should target _layout.cshtml instead of index.html.
So that the built files will be included in _layout.cshtml and when we run the mvc application, the app will run without any issues.
Is there any idea to build without index.html and target _layout.cshtml?
Or
Is there any alter idea other than this?

Related

Creating a (.NET 6 based) website project with ASP.NET Core and React (TypeScript) in Visual Studio 2022?

I have been trying to set up an ASP.NET Core + React (TypeScript) web app project in Visual Studio 2022, but couldn't succeed in doing so. There are no proper stacks/suites(?) in the Visual Studio 2022 create project dialog (File > New > Project...) that suit my needs.
I then tried what these docs say - and it works - but when I do the same for React TypeScript (i.e., using Standalone TypeScript React Template instead of Standalone JavaScript React Template) it doesn't work because this template doesn't have an Add integration for Empty ASP.NET Web API project. option in its setup (but the JavaScript template does).
How do I create an ASP.NET Core + React (TypeScript) project then?
I did see some modified and new files when the ASP.NET Core Web API integration option was enabled during the React.js (not TypeScript) setup. Can I copy those ASP.NET Core Web API integration files and their content, re-write the JavaScript files in TypeScript, and add those files (*.ts instead of *.js, etc.) in the TypeScript template? Or is there any other (official) method to properly set up an ASP.NET Core + React (TypeScript) project in Visual Studio 2022?
This is the guide do you need, just a consideration I changed this piece of code in aspnetcore-react.ts
fs.writeFileSync(
'.env.development.local',
`BROWSER=none
HTTPS=true
SSL_CRT_FILE=${certFilePath}
SSL_KEY_FILE=${keyFilePath}`,
);
BROWSER=none Start without opening url in the browser because should be opened by .NET proxy
HTTPS=true Dev server to serve pages over HTTPS. Uses the .NET self-signed certificate

React Webpack runtime scripts in MVC Core Application

I have a React SPA and ASP.NET Core MVC Application.
What I want is to run both in parallel at the same time,
I want to access the react debug script files bundle.js, 0.chunk.js, main.chunk.js in my MVC .cshtml page.
How can I make it possible.

How to deploy react and laravel combined app on shared hosting server?

Folder structure on vs code
I have the above file structure. I have used react js inside the laravel framework combined.
It's a brand new project just with react --auth scaffolding inside the laravel project.
I can deploy just the laravel project but don't know how to deploy the react-laravel combined web app. please help
You must build project on your local machine and then upload whole project structure on server. When you build it, it will generate css and especially js files which are key files for your react part. Upload all content and it will work fine.

How to integrate a new ionic theme to an existing ionic app?

i'm working on an ionic v1 (and angular 1) project which is completed using basic ionic UI. I came across various themes on ionic marketplace. How do i integrate a new ionic theme to my existing app.
I'm assuming you have Ionic setup in your local machine.
Once you've purchased and downloaded the files of the theme you want to use, create an ionic1 project. Note this will work only with Ionic1, and not Ionic2. Use the following command to create an ionic1 project:
ionic start myApp blank --type ionic1
When your project has been created, go to the /www folder in your project directory, delete all files in here, and copy the theme's files you've downloaded here.
Run ionic serve and your project should have integrated with the theme.
PS. you might have to replace the project scss folder with that of the theme's if available.

Angular js with spring mvc

Currently trying to implement angular js with spring mvc
Tried to implement the sample project springmvc-angularjs-master from the site-https://github.com/xvitcoder/spring-mvc-angularjs , not sure how to use the folder structure of this sample project into a spring project.
i read the thread - Spring MVC and Angularjs
but still could not find the solution. Do i need to create new folder webapp under the src folder in the web application?
can someone help me how to convert this sample project into spring web application?
i am not using maven and using simple web application with spring capabilites in myeclipse ide.
Current project folder structure:
SampleApp
-src
--controller,bean folders
-webroot
--webinf
---web.xml,springmvc.xml
---html folder(index.html,etc.,)
--resources
---js
----app.js,services.js,controller.js and lib folder
You should be able to import the project as Maven project (Import > Maven > Existing MavenProject) and run it as is. All of the necessary mappings can be found in /src/main/webapp/WEB-INF/spring/webapp-config.xml
Once you have your head wrapped around that, you should be able to extract what you need.
I also noticed some of the #override annotations were throwing some errors. I just removed them.

Resources