How to disable the server side of Nuxt? - javascript

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.

Related

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!

Deploy same Javascript webapp build to different environments

I have an ExtJS application and some different environments (local machine, development, production-like test environment, and production).
The ExtJS application is backed by a Java backend which is also running on either a local machine, in a development environment, a production-like test environment or a production environment (not the same servers as where the front end application lives though).
For the last two environments, I want to build ONE build of the ExtJS app and first deploy it to the test server, then when ready for release deploy the exact same build to the production server.
Question: Is it possible to somehow use the environment where the frontend is deployed, to decide which backend the ExtJS should connect to? Since the ExtJS front-end is executed on the client's machine, it doesn't know if it should connect to the production backend or the test backend.
What is the best way to solve a problem like this? How (in a clean way) is usually a javascript web application built and deployed to several different environments and communicates with their corresponding backend application?
How (in a clean way) is usually a javascript web application built and
deployed to several different environments and communicates with their
corresponding backend application?
Well, the case is not very usual. Usually the backend app would be (at least seemingly) on the same server that the frontend app is loaded from. Therefore, probably the most hassle free way to accomplish your task is to make the frontend server proxy requests from frontend app to corresponding backend server. This way frontend app will still talk to its origin server which allows you to have just one build for all environments.
The "official" way would be to use the per-environment sections in the app.json file like this:
"production": {
"backend": "backend.domain.tld",
// other stuff
},
"testing": {
"backend": "backend.testing.domain.tld",
// other stuff
},
"development": {
"backend": "backend.dev.domain.tld",
// other stuff
}
The backend value will end up in the build's classic.json (and/or modern.json) file. Frontend app will see the value as Ext.manifest.backend. But this way is effectively creating different builds which you wanted to avoid. Therefore, you could just manually create several versions of classic.json/modern.json files for ONE production build like this:
classic.json.testing
classic.json.staging
classic.json.production
and then use rewriting on the frontend server to respond to "/classic.json" requests with whatever json file matches the server purpose.
Yet another way is to the keep the frontend-backend mapping for ALL environments within the frontend app like this:
var ENV_CONF = {
'frontend.testing.domain.tld': 'backend.testing.domain.tld',
'frontend.staging.domain.tld': 'backend.staging.domain.tld',
'domain.tld': 'backend.domain.tld' // production
};
The app would use location.host as the key and talk to the corresponding backend.

How to use New Relic with ember-cli?

right now I'm running an ember-cli application on heroku by serving it with the ember server command (not sure if this is the best method) and I'd like to integrate it with New Relic, but I have no idea how to do it.
Careful, ember server starts a live-reload server for development purposes — you edit a file, save it, and the application gets rebuild in an instant — you should not use it to serve an Ember app in production, it's a potential security risk. Normally you run ember server only on your local computer where you develop the code.
For production, build your app with ember build --environment=production, that will create a set of static files in your project's dist/ directory. You can upload these as you would upload any HTML/CSS/Javascript.
Keep in mind that Ember (and other frameworks of this kind like Angular and Backbone) is a single page application (SPA) framework; there is no server-side code at all, it all runs in the browser. Usually you would provide some sort of API (like a REST-API) on the server to provide and process data from a database or to provide other server-side services. That way you can develop the front and back-end separately.
I'm not too familiar with New Relic, but as far as I can tell it is analytics software that runs on the back-end, so it has nothing to do with your browser-side framework.
At the server folder, just find the index.js file and add require('newrelic'); at the beginning of the file. Of course you should also follow the instructions when you setup New Relic at you Heroku App, setting your application as a node.js app, which means you'll have to run npm install --save newrelic, go to your node_modules folder, find newrelic, copy newrelic.js file to the root of your application and edit the file with your app_name and license_key.
I recently removed my code from <meta ... in app/index.html and started to use this addon Ember-new-relic.
Get the JavaScript snippet.
And add it below <meta http-equiv="X-UA-Compatible"... in app/index.html.

Categories

Resources