Statically Serving React Files To Express - node.js

I'm currently working on a React / Express web-application right now. I am proxying my React API requests to my Express server. Also, just to mention, I used npx create-react-app to setup my React project.
I know proxying won't work when in production (when using a real host). To my knowledge, you are supposed to serve the static files within Express. That means I would need to do npm run build then configure it properly server sided.
Are there any downfalls to this or is this how it's usually done in production? Does statically serving the files take away from any functionality whatsoever?
Thanks.

Related

Is it possible to turn express server serving react frontend into desktop app using electron?

I have made a web app using express and react, and I want to bundle it into a desktop application, is this possible using electron?
I recommend the tutorial at: https://www.electronforge.io/guides/framework-integration/react
This isn't too hard actually, you can find all instructions you need in https://www.electronforge.io/
To accomplish this, either your app keeps hosting it with express locally and electrons connects to localhost, or even better, do it by not hosting any servers and just keeping your JSX and html files in your project.
If you're using TypeScript and ES6, also consider taking a look here for some examples: https://www.electronforge.io/templates/typescript-+-webpack-template

Does the default Reactjs application use node.js?

This may be a dumb question, but is the default react app (created using npm create-react-app my-app) using node.js? I am confused because in my web development class at university, I had to download node.js to create react applications. However, I didn't have to do anything like creating a server or initiating a node.js file, which is described in w3school's node.js tutorial. Because of this, I found out that I don't even really know what node is used for, besides downloading packages like redux and whatnot.
create-react-app uses node.js for all of its dev tooling. Likewise, a lot of the tools you'll use in the React ecosystem (like webpack, prettier, npm), all run on top of node.js as well).
You'll most probably build your react app to a static file, in which case the production output will not require node.js, it will be html and javascript assets that can be served directly to a client.
Hope that helps! Let me know if you have other specific questions
Node.js is used for server-side while React.js is for the front-end part. So, no, you don't need Node.js.
Under development mode, yes. Create react app runs NodeJs with Webpack Dev Server to allow you get feedback when modifing files, start or stop the server.

Should I build server-side of application inside nuxt.js server directory?

I want to build full-stack application with Nuxt.js. I am wondering where I should create my server-side inside Nuxt.js or maybe I should create separated project only for server stuff.
I am trying to set up my project but I do not know how I should do it. The application which I am building will have own front-end, back-end and also database (I will use MongoDB) but actually I do not know how I should start. I was reading a lot about SSR and Nuxt.js seems really good if am planing to use Vue.js on fronted. While creating nuxt app I can choose to use Express and then I can see server directory inside my directory structure does it mean that i should build all back-end inside this directory or maybe it is only for small stuff?
I have also another question what if I want to use Nest.js on back-end can i just use npm i -g #nestjs/cli and then nest new project-name inside my server directory ? I was looking also for this answer but almost all results in google for this type are about (comparison between Nuxt.js, Next.js and Nest.js).
It will be my first bigger full-stack project and I want to do it right but I am a really beginner in this so I am looking for answer from more experienced programmers.
You can run express or any node.js server you want inside Nuxt.js. When installing Nuxt.js with scaffolding tool create-nuxt-app, you can choose integrated server-side frameworks : Express, Koa, Hapi, Feathers, Micro, Fastify, Adonis (WIP). There isn't offical Nest.js integration, but you can easily find a starter kit on github.
With create-nuxt-app, if you choose to use any node.js server inside your nuxt app, you will see a server directory inside your directory structure, with the corresponding server-side pre-configured index.js file.
Here is my own feeling about it:
I think the inside solution make sense for a small SPA or Headless project (Ex: parse and serve files, a simple JWT Authentification, a small websocket server...), or for a front-end logic application that cannot fit in client browser and who are nothing to do with the database (like image or file computation).
But generally, this server run the database layer for your Nuxt application: a REST or GraphQL API. It can also run your business logic of your app, serve authentification, and more and more when project growth...
If you think about separation of concerns and microservices
architecture, do not use server inside Nuxt.js. Splitting both frontend and server will result more flexibility. You can host frontend and API in different servers.
So now, do nuxt.js really need a node.js server ?
Yes if you plan to use it in SSR mode, No if you plan to use it like a SPA or Static generated way. Docs here... .
In SSR mode, nuxt.js ask data to your API at the first rendering, and provide a complete SEO compatible page to the client browser or bots. It also provide all javascript that the browser need to navigate and fetch your API. For that, nuxt.js in SSR mode should run with node.js.
I assume you said "back-end" for your API and your business logic application, in this case, you should separate nuxt.js and your server. Two node.js instances to run both.

Angular CLI Node Express.js

I come from the LAMP world. Greetings. 🖖
I'm trying to get started with the new Angular and Node.js. I already have Node and an Express server installed on my machine. Now I want to use Angular as I start building my app.
One thing I don't understand is why the Angular CLI is spinning up a server to "run the application" and why it seems we have to setup proxies and do other things to get it to work with Express.
When I think of Angular, I'm most familiar with AngularJS as part of my LAMP stack workflow. All I do here is serve it as a .js file and serve it from the same webserver that is serving everything else. Why is a client-side script getting its own server? How is it different from Express and how does it fit in with Angular Universal, which I would like to use to take advantage of SSR.
I'm not looking at how to get it all to work, I can copy and paste and read docs just fine, I'm trying to understand the fundamental concept here. The Angular docs don't explain why they are asking you to "serve the application". Is it just to test it? Why would I have two servers in development and one in production, shouldn't the dev site mirror the production site as best as possible?

Is nodejs mandatory for angular2, can I run with apache server?

I am using angular2 with nodejs, how about using apache/xampp. will it support or nodejs npm server is mandatory for angular2
Considering for development ,NodeJS is Mandatory for angular2 !
let me tell you why?
Angular2 comes with typescript support which is transpiled into javascript.
NodeJS offers typings & other dependency packages like SystemJS,RxJS which helps angular2 do thye magic you call Angular.
Though you could run angular2 apps in Xampp but recommended approach will be with NodeJS as it offers a lot more flexibility & framework support for development.
for eg. Angular-Cli is node module which helps you setup your project really fast.
On top of that node gives you flexibilty to add third party libraries easily into your project.
You can use Xampp but then you will need your server to load transpiler manually which will transpile ts files into javascript files as currently there is no support in Xampp as far as I know and that will be quite a task to do.
So I will go with NodeJS on this.
For production:
once you build bundle from your application , it can be deployed to any server which runs javascript. So in that case NodeJS is not required.
It depends on what we are talking about.
For Development you must have NodeJS on your dev machine to load all libs, transpile TS, prepare build files and so on.
For Production server you can use whatever you want, if you have already prepared js bundles with all deps and your app, just static files with index.html, css, js, jpg files and so on..
I will also recommend you to go with Oleg Barinov.More over Angular2 applications only consist of static files so they can be serve by any static Web servers or server applications that can define static folders (Express, ...)

Resources