When I run the CLI to standup a React and Angular MFE in a single-spa ecosystem, the React app runs smoothly but I am not given an option to add routing for Angular nor does it create the necessary main.single-spa.ts. Is the CLI Broken and should I follow an alternative approach to implement the Angular MFE?
Related
I've created a simple react app using create-react-app, and deployed it on a laravel server. Now, I need to create another React app for my admin dashboard. The problem is, if I had to create more react apps in future for different parts, the node modules will take much more storage. Is there such a way to use same node modules for all react apps, and build node modules separately to cache it and react apps can use them in production without every app coming up with their set of node modules folder?
I'm working on a project and using nodejs as backend. I want to use react for the frontend. And currently, the way I know to use react is by creating a client folder inside it and using create-react-app and then running both the server separately and using the proxy to connect with the node backend. The other way I came to know is via this link which basically involves installing react, reactdom, webpack etc, and using it directly inside the node app without having a separate server for react as in the case of create-react-app. So which way is better and what are their pros and cons.
The usual way is to run both react and node in separate servers.
Create the react app using npx-create-react-app
Create the node app using npm init
If both the folders are in the same directory you can use a npm package called concurrently and run both the servers with a single command. Also don't forget to install the npm package cors in your node app. If you don't , you'll get CORS errors from your API calls.
Imo using create react app is better than manually trying to configure webpack. Saves a lot of time and it's more easy to deploy.
I am a Beginner to Angular technology and came across this question.
why is Node js needed in Angular as Node js is a backend technology?
You need NodeJs for angular if you intend to create a front end server, use typescript or make anything other than a purely in browser application(unless you use another server framework: Apache, nginx, lighttp, ruby/rails etc.). For example Vanilla javascript does not support require or import functionality so you need node to load file dependencies, and angularjs does not allow for server creation on its own. You can also choose to build angular applications in TypeScript which utilises NodeJs.
It is worth noting that technically speaking nodejs and angularjs are separate frameworks, angular can be run without node but would only support limited functionality(no db access, no server etc).
The CLI is needed in order to run angular commands through the command line, to generate services / components etc.
You can read more about angular here
Angular does not need Node. However to make the dependencies management easier especially in package.json , npm which is a package manager is required. And in order to get npm, you need to install Node first.
As for angular cli, it provides a terminal that makes it easy to execute operations like creation of an angular app, angular components, building...
I'm developing a CLI that needs to generate angular components as well as
creating other files in a separate module. So, the project that the CLI will assist in would ideally call ng generate to handle the angular side of things, and then use fs-extra to go into the other module and add files. It's for a CMS SPA editor where the angular code and CMS code live in the same project.
So, am I able to run a different CLI's commands inside of my node CLI that I'm developing, or do I need to manually create all the files that ng generate is going to create along with the other files I'm creating at the same time?
The Angular Schematics are the smarts behind the Angular CLI. You can use the schematics to build your own CLI leveraging the features of Angular Schematics. That way you will still get all of the ng generate functionality.
See these articles for more information on the CLI schematics:
https://brianflove.com/2018/12/11/angular-schematics-tutorial/
https://github.com/angular/angular-cli
I suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.
Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...
But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views?
And where should I place Angular Universal here?
Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.
When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.
In production you may have multiple such processes behind a load-balancer.
Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.
The Angular Universal setup steps are detailed here in the official documentation.
However, I had a few wasted hours to find out the following point
Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install ts-config#3.5.0
Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.
If you refer to my Dockerfile in the above Github link, its entrypoint reads:
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]
So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.