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.
Related
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?
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.
I'm working on Project using React for the frontend and Laravel for the backend using RESTfull API.
I developed each one in separate directories but now I'm trying to deploy them in the same folder I don't really know what to do.
or can I deploy then each one in their own folder? if yes how can I run them on the same server (apache)?
The directory really shouldn't matter. Since React is a frontend javascript development framework, it runs on the client while the laravel backend will run on the server itself. All you need to do is serve the entry point html and the javascript file created from your react project to the client.
I assume you're thinking about the "development server" that you run while developing the react app. You need to, depending on your build environment, do a production build and serve the files in some way to the client.
When using create react app you can use the deployment build instructions: https://facebook.github.io/create-react-app/docs/deployment
So to summarise:
Host your laravel backend on the apache server
Upload entry point html (you can serve this via laravel, create a template with the correct html)
Serve the deployment javascript file for your react app (just include it on the same html page)
I have started to learn React and now I am a bit confused about different parts of development and deployment.
Does all webpages are bild with frameworks like React or Anguler? Or they are used only for one page web applications? Can I serve React with nodejs server?
Does the method when you build static webpage with js, html, css and serving them with Apache web server is still used in modern world?
I would highly suggest using the React-Create-App utility. And yes, you can use Node.js. In fact, React doesn't force you to use any backend framework. I could pick ASP.NET MVC, Node, Spring MVC, Rails, etc.
https://github.com/facebook/create-react-app
But this tutorial will guide you through creating react apps in development and creating production builds.
When you build in production, you'll end up with a public folder with html files. But in React, you don't create html files, you create .jsx, which is a combination of html-like React tags with JavaScript. They will get transpiled to html, etc during the production build phase. You can then take the build folder and deploy it on an HTTP server, such as Apache.
We will develop application in Angular (separated from server), and most likely we will need to use PhoneGap to create same application for mobile devices.
PhoneGap requires that the application has index.html file as entry file in order to be compiled. I made minor project in Angular that has index file, and it did compile ok in PhoneGap.
There is something that I cant get my mind on. Server side will be in C#/MVC, and as I said already Client will be in Angular. Question is how to keep the project in Angular in "index.html" format ready for PhoneGap and at the same time have it available for normal web application.
We do plan to use AMD (require.js) for Angular application, but if we do that then we cant have Index.html file which is required for Phonegap.
What would be best approach. Goal is to if possible have one code base.
Well you don't have to specifically have an index.html page, you can use any HTML page as the landing page (See the content tag in the Config.xml page.) You should be able to just build your Angular app like you normally would - you can even test on the browser. When you go to actually create the Cordova/Phonegap apps, you'll just have to add the cordova.js to the file and then run the commands to build and package the app binaries.
I'm also building a PhoneGap 3 app using AngularJS connected to back-end APIs.
The PhoneGap / Cordova part is only added later in the /platforms folder, so in the root /www folder you should build just a regular mobile web app.
This app I'm working on uses a hash for the AngularJS routing. In iOS / Android runs from index.html (eg: ./index.html#/start) while on desktop browsers runs from the root folder (eg: /#/start).