Combining VUE project with .net framework project - javascript

I have a project that use VUE at client side and .net framework for server side, but now they are in two spretate projects. When I am developing, I have to open a port for each of them.
I know I can build VUE project into dist folder and put it into the server side but that is not what I really want since it is not very friendly for developing.
I'm wondering if there is a solution to merge two project into one in visual studio? So I can open one port and develop both client side and server side. Thank you!

You can use AspNetCore SPA services for starting development server for spa applications. This way you can use React, Vue etc. library/frameworks in .Net Core projects without seperation. AspNetCore currently supporting React Applications. You can check here for boilerplate.
For Vue implemetation you can review this tutorial here
Put your Vue directory to ClientApp folder (in VisualStudio):
And customize your code in Startup like this.
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseVueDevelopmentServer(npmScript: "serve");
}
});
For AspNetCore.UseSpa() more info you can find here
Hope it helpful

Related

How to disable the server side of Nuxt?

I've made a new project in NuxtJs.
When I run npm run dev, however, it shows the following in my terminal:
√ Client
Compiled successfully in 7.88s
√ Server
Compiled successfully in 5.14s
Does this mean that NuxtJs automatically boots a Front-end and a back-end? If so, how can I disable/delete this back-end. A back-end will be made apart from my front-end, actually.
Nuxt is not a backend in a sense that it will replace Express, Laravel, Ruby on Rails or alike. It's a meta framework with various capabilities like SSR (Server Side Rendering), SSG (Static Site Generation), SPA (Single Page App) and some other in between if you're using Nuxt3.
You could disable the "server" part of Nuxt by setting ssr: false but you will lose quite some performance overall. It will mainly be an improved version of Vue (understand from a Developer eXperience part) but will not be as fast as it's supposed to be for your end users.
Consider keeping Nuxt as an SSG (ssr: true + target: 'static') alongside your actual "API backend".
PS: pretty much all JS meta frameworks work in this kind of way. Mainly because doing things on the server is faster/safer than doing that on your user's crappy laptop from 2000 (SPA's only basically) via pure client side.

How to include JavaScript sources in startup.cs of AspNetCore?

Is there an easy way to reference JS sources from a JS project that has "JSProj/src/main.js" , "JSProj/package.json" to run at "AspNetCoreProj/startup.cs"?
So that when the asp is run, my controller from "AspNetCoreProj/Controllers/MyController.cs" binds to (launchSettings.json) "applicationUrl": "http://localhost:44709", "sslPort": 46367 AND the front-end JS App is run at, let's say, http://localhost:8080 at the same time?
So that I only need to run the asp app, not the two applications, including AspNetCoreProj and JSProj, separately.
I already installed node.js and run the JS app server using npm run build / npm run serve / yarn serve from command line, but I do not understand the concept of deploying the JavaScript sources (especially when it uses some framework like Angular) along with my ASP project, it just doesn't compile and/or run (that is to say: I'm very new to JS and its frameworks concept).
Do I really need to run a separate JS server for front-end or I can easily reference a JS project in a let's say, index.html / index.cshtml page?
edit: I need to know how to bind an asp.net core project with an angular (react.js / vue.js) project.
When a JS framework runs using serve, it will run on its own in-memory server like in angular a node.js server with its own port ,one option like you mentioned is to run manually both server and js framework, another option in ASP.NET Core is to "tell" the server to run the JS framework.
In any of this options (while developing) the JS framework will run from its own local server (in Angular a node.js) it is just that in second option the ASP.NET Core will do the serve for you, for this to happened you need to "tell" the asp core application what to do on startup, in order to do that in you need to configure startup.cs.
I think the best way is to open a new Angular project from template project in Visual Studio you can see all the settings that are needed, I will just mention that there are settings in 3 places: in startup.cs in ConfigureServices() and in Configure() as well as right click on the ASP.NET Core project => edit project there are some commands how to handle the Angular app when compiling as well some publish commands
In fact the problem was that an MVC (Web Controller app) project cannot be used to run JavaScript, It needs to be an "Angular" asp.net core web app or an asp.net core web app that's configured to use a single-page application (SPA) in startup.cs.

Why does React need to connect to a server?

I just started working with React and I came to 2 big questions that I never realized before:
Why does React need to connect to a server (localhost, deployment, etc)? Isn't it usually the backend that needs the server url, not the frontend? From my frontend experience, I would just have a .js file with jQuery doing the DOM scripting for the associated html file and that was it.
If I am making a React full stack application with let's say a .NET backend, then React will have its localhost:3000 server url and the .NET backend (ASP.NET Core) would have something like a localhost:54204. Does that mean I need 2 deployments to run that application? Is that normal, or is there some process to mesh the two?
Thank you so much for answering this, hopefully these 2 questions answered will make me fully grasp the concept of React
For the first question does react have server and why? Yes it has and its in the bundler which is called webpack. In fact it runs server script under hood and it is for development. What about the deployment when you use create-react-app and finish your app you can run npm run buld it creates a folder for bundled files. So you can use it in your backend a static files or can create different server script and deploy as an independent application.

ReactJS Production Deployment

I currently have production web app (PHP+AngularJS) & Java/Spring backend. Basically it is a web app making lots and lots of REST Api calls to Java backend and rendering that data on web forms. I use Apache Web 2.0 to host the frontend and Tomcat for the backend
Planning to migrate to ReactJS, Java/Spring will still be the backend. I need some guidance on following
Best Web Server to use to deploy React (Build/Deploy controlled through CD/CI, Jenkins)
Any specific frameworks and/or components that needs to be added and installed to support this web app.
Best Testing framework to use for React which will work with the CI/CD pipeline.
Can all this be containerized (docker/kubernetes) ?
Thanks in advance
Any server that servers static files (express, apacha, nginx, etc) can handle a react app.
You'll need webpack to build the project (transpile/minify/optimise)
You'll need a test runner (i suggest jest from facebook) and a library to test/render you application on each unit test. Use react-testing-library (simple, dynamic and easy to use).
Totally!

Create one heroku app from two git repositories

my issue: I have server written using Spring Boot, Spring Data, MongoDB and postgreSQL. My client is written with React/Redux. I keep them in two separated git repos. Now I’d like to deploy them to Heroku. I already deployed back end but now I’m not sure how to add frontend. I’d prefer to have it as one app because then I wouldn’t have to worty about csrf.
what solutions I was thinking about: As far as I’m concerned I see two solutions:
1) deploying front end as a separated app and make calls to backend (already deployed app)
2) somehow making it into one app. I read a couple of solutions and one suggested making a Procfile, but in that question there was one git repo. Deploy two separate heroku apps from same git repo
I’m using Maven and Yarn.
If your client project is also a maven project, you can make it a dependency of your server project.
You can then make the build copy your client artifact into the src/main/resources/static folder and have your server application serve the client as static content.
Update: This link is a good guide how to do it: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/
It describes a multi module maven project with a spring rest backend- and an angularjs frontend module. But I am certain that the principle will work also with a react/redux frontend in a separate project.
It will require some tweaking though:)

Categories

Resources