Have Node.js project with two Angular2 application, I want to combine all (site, admin and server) node_modules into one. and I need to control all app from root directory.
Please suggest the solution or suggest the standardized method to do this.
With angular cli multiple apps feature you definitely can combine your two angular apps, which is make sence. But I definitely recommend to keep your server app separate.
Like have a folder src with two folders client(angular apps) and server in it.
Related
For an example, I have one angular ui project that fetches values and perform operations.
I have one backend API project in .Net Core and now I want to reuse angular ui project with node js.
Is it possible?
How to configure it and which are the main points to take care that angular project support both.
How can I deploy it?
Angular is a client side application that run's in clients browser, as long as the REST API or service you connect has Same API endpoints and same object models and authentication etc everything will work as intended.
REST is platform independent like the web services and also language independent. It doesn't matter if you use .Net Core or some nodejs framework.
Once the angular application is build ( ng build --prod) you get a bundled application files in dist folder you can host these files in any web sever just like you host normal html file.
The only change you have to make in the the Angular application will be to change the host URL (if there is any change) normally configured in environments folder
Take help of environment file and change the api as per your requirement.
I am creating my first app node express app with angular 7 on the frontend to be deployed in production. I have below question?
What folder structure is preferred, should I create separate
projects for node and angular or same project(server.js in the root
of angular project and server folder to create express server
files)? What is the preferred one and I have to checkin the project
in one folder of svn.
Should I use babel and create the node server code with es2015 or
continue with old approach?
Its all up to you, what I am doing is I have sepreate directory for Angular and Node projet
project
|
client - Your anguar project
server - Your Apis and server side coding (Only this folder require at productino level)
Then we can create a gulp file and task to gulp that Build my client
project and put that build folder inside the
server -> public
Now only server can be use to production where Build will be render as static.
And next to authentication and autherization process you can follow JWT based permission .
Generally I would say that separating your client and server code into separate projects is preferred so that you do not have to release both your client and server at the same time when you make a change to one or the other. The rest of my answer is based on the assumption that you would separate the two sides into different projects.
As far as structuring your server side Express-based application, check out this link for some guidance on how to handle your situation. See the answer to the first question about different approaches to how to structure your Express application for different deployment scenarios. Also, if you use the latest LTS version of node, you will not need to use a transpiler to convert your files to Javascript because the Node environment will handle that for you.
As far as structuring your client side Angular-based application, check out this link for a very detailed discussion about best practices for structuring your Angular application.
I would prefer following, in case in future you need to separate the API layer with client you can do it with ease,
project
|----client
| ---client-template //All UI code like .css/htmls and node process initiates from here
| ---client-angular // All the directives and controllers goes here
| ---client-service //Service layer, All the API call to server goes here
|----server
| ---server API's // separated by its own module if any
|--- you API modules and so on..
This will help you to have flexibility over client and server integration without any tight coupling. Also easy to maintain and debug.
Answer 1: you should make two separate folder/repository structure for frontend and backend.
let's suppose your application grows fast at that time you want to scale your backend and you want to host your Angular app as static web app using Amazon-S3 so at that time it will be very easy to manage this.
May you want to use CICD, in that case also it will be good if your separate folder so you can create separate CICD jobs for backend and frontend.
May be your company hired some developer which is either expert in frontend or in backend only. in that case your company don't want give them unnecessary code access. so separate repo will be an easy option for this case. (this may be Depends on your team and company's approach for development)
Answer 2: I recommend go for es6 or es6+ features.
latest node.js version is supporting some of the features of es6. for example
- spread operator
- destructing
- classes (you can use OOPs)
- arrow functions
- let, const
- async await and etc
you can use babel if any other feature which is not supported by node.js. there could be may reason for using babel, but i want to know which specific feature do you want to use with babel? so i can explain according to that.
I have used the following approach that bind the Angular Application and the Node server as a single unit.
Steps for creating the project structure is:
Create a new Angular project with the CLI.
Create a server.js file in the root directory of the project and configure it to render the contents of the dist/ folder on the / route.
You can refer the link for the server code: https://github.com/nikhilbaby/node-server
Running the server
I usually run the project with ng build && node server. This will make sure that the angular application is build first and after that node server is started.
So I just started learning ReactJS and React Native.
I have some knowledge of MEN (Mongo, Express, Node). Up to this point, I learned how to res.render() files and pass objects in there.
Now what I need to do, is make MERN app. This app also needs to have Android and iOS version of it.
So far I learned that R stands for ReactJS, not react-native. Is there a way so it includes both? And where do I put react files when I have folder structure like from express-generator? Or is there a way they can be in completely different directories, and one calls the other via import?
It comes down to architecture I believe. The way I like to create the stack goes as follows.
You can create an API using Mongo/Express/Node that serves endpoints for your client app (created using reactjs, react-native and whatever other tech you want to include) to call using HTML requests. This would work for both mobile apps (using react-native) and desktop apps (using reactjs).
There's a couple different ways to deploy this. You can create 2 separate apps, a server app and a client app, which are both hosted individually by 2 separate hosts. This is useful because you decouple your front end code from your back end code. Also, you can have 2 separate directories for your code.
Another method of deployment would be to have your server serve your client files. This ones a little bit tricker, but you will be able to deploy your entire app inside 1 host so this option is also cheaper. I would suggest reading this article to figure out how to implement this and the file structure https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
I am struggling with the project structure for a Node.js and Angular 2 website.
I use:
Nodejs + Express for the server side.
Angular 2 for the client side.
In most guides I found, people put both technologies in the same project. They have a client and server folder but the package.json is in the root. This seems strange to me because your package.json will get confusing because it's mixed with server and client side dependencies.
I was thinking of creating 2 Projects: One for Node.js server-side and one for Angular 2 client-side. But I am not sure if this will work and if this is the correct structure.
Is there a reason that people put everything in one project? Or is it better to create 2 projects?
I always try to separate as possible. So in my projects i have 2 folders backend and client (But i keep them in same repository).
Using angular cli will help you to build structure of angular project
Proxy will help you to prevent CORS.
But again it depends, because in some cases when you need server side rendering then maybe it would be better to have all together.
PS But this is my personal thoughts and this works for me pretty well.
The Reactjs is very good using with Redux. However, if we were to build a large web app, only one Single Page App is often not the best choice.
What I think, is to combine traditional MVC framework( like the Expressjs MVC framework ) and Reactjs in one website (often multiple Redux-React apps).
In this website, I may have multiple WebPack bundle files, that is ,this site may contain multipe SPAs(single page apps). I do not know how to organize this in my Nodejs server (Express).
Do I need to have multiple WebPack Configurations files and have multiple WebPack instances running to produce mutilple bundle files (and how can I run multiple WebPack instances in my ExpressJS server?)? Or can I write a single WebPack Configuration file and have multiple bundle files output?
Thanks!