ReactJS Production Deployment - javascript

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!

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.

Combining VUE project with .net framework project

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

How to serve a Node.js and Vue.js app together?

I realize that there have been similar questions asked here, but I sort of need things to be spelled out for me.
I have a VPS (through Vultr), which currently hosts a frontend Vue.js app on port 8080, and a backend Node.js (with Express) app on port 5000. The main directory is divided like so:
./client
frontend Vue.js files
./server
backend Node.js files
The frontend app includes a contact form, which upon submit makes an axios POST request to the backend app. The backend app then uses Nodemailer and a Gmail account to send an email with the form's submitted information.
As it stands, I have to run my Vue.js app and my Node.app at the same time on different ports. This seems strange to me, considering that they're really just parts of one cohesive app, and my goal is to eventually host it as a website on port 80. With this in mind, I'd like to ask what the standard practice would be for hosting the frontend Vue.js app and the backend Node.js app together.
Thank in advance for any replies.
Try to think about it in this way that Vue.js is another js library. So if all the code for Vue templates can be bundled in a single file, then you can use that file in your index.html( I hope you know how to host a basic static page using express). The thing you require here is a "package bundler" like webpack or gulp.
A package bundler helps you to compress and bundle your code. So just bundle all your vue files into a single javascript file and use it. I apologize for not being able to spell out the things for you I hope it helps.

Building SPA frontend without node/npm

I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.

Categories

Resources