1

I am creating my first app node express app with angular 7 on the frontend to be deployed in production. I have below question?

  1. 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.

  2. Should I use babel and create the node server code with es2015 or continue with old approach?

Sohan
  • 6,252
  • 5
  • 35
  • 56
Ayush Somani
  • 146
  • 11

5 Answers5

0

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 .

Ashutosh Jha
  • 15,451
  • 11
  • 52
  • 85
0

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.

Keith Dawson
  • 1,475
  • 16
  • 27
0

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.

Sohan
  • 6,252
  • 5
  • 35
  • 56
  • so does that mean two package.json and two nodee_modules folders, one in client and other in server? – Ayush Somani Apr 08 '19 at 20:29
  • ok thanks, also i want to deploy this project. So as java as ear war. What will be the package for this node project? Zip file? Please excuse me for asking this silly questions. – Ayush Somani Apr 09 '19 at 06:42
  • 1
    Like java you need to execute using `java` command. Here once you build your project with respective node modules into it, you can execute your main app file just as `node app.js` (filename can be any) Have a look at latest express node modules for server API and angular for bootstrapping UI. – Sohan Apr 09 '19 at 06:50
  • yes, that i know. But my questions are 1).i have build angular package and deployed it in the server folder by specifying path in angular.json and ng build command. What is the command to build node server? 2). So after i build node module,i ship all the js in zip file or tar file? 3). For example i have a windows server machine, how would i host this application, what is best to host this application? – Ayush Somani Apr 09 '19 at 06:57
  • You can host server application on IIS node, that is the best practice when you are on windows https://hostek.com/blog/node-js-applications-on-windows-iis/ – Sohan Apr 09 '19 at 09:17
0

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.

Vinay Pandya
  • 3,020
  • 2
  • 26
  • 42
  • i am using v10.15.3 but it doesn't allow me to execute es6 imports. – Ayush Somani Apr 05 '19 at 08:16
  • may be this can help you out https://stackoverflow.com/a/45854500/2036977. you can use Experimental ecma script feature inside node.js. but you can use babel if you want. – Vinay Pandya Apr 05 '19 at 12:12
0

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:

  1. Create a new Angular project with the CLI.
  2. 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.

Nikhil Baby
  • 863
  • 3
  • 10
  • 22