0

I am starting a new project which is using Angular 4 for frontend designing and the application will need some rest api's for which I have decided to use node. I am using angular cli for creating angular app and I know how to create angular app and node server but I want to know how will I connect these two things such that when I do ng serve both the server and angular app gets compiled and run. What basic changes in the project structure or some file is needed to be done?

Shubham Agarwal Bhewanewala
  • 1,119
  • 1
  • 8
  • 20

4 Answers4

0

I'm currently building a full-stack Angular app with a Node/Express backend and was wondering the exact same thing. However, despite what that scotch.io tutorial tells you, creating both the Express server and the Angular app in the same directory is NOT the best way to go about it.

What you want to do is set up your Express server in one project and serve it in one terminal window, then serve your Angular app in a separate terminal window but have it point to your locally-running Express server instead of the default dev server that's included with the Angular CLI (the ng-serve command).

Here's a Stack Overflow answer and also a Medium article that answered all of my questions for how to set this up (fortunately, it's not too hard).

johnnycopes
  • 366
  • 5
  • 14
0

Here's what I did Shubham. I went into the Angular-Cli and changed "outDir": to "../public"in other words it will look like "outDir": "../public". The ../public folder is my Express static folder set in my app.js file with app.use(express.static(path.join(__dirname, 'public')));

Keeping in mind I have nodemon installed globally, and in my package.json file, "start": "node app" I simply run nodemon from this dir to start my server and both Angular and Express run on the same server.

I have seen some people say it's not good to run static filed on the Node/Express server, but for development I'm not sure it matters. Although I'm a novice when it comes to js frameworks etc. Here's the project files on my github acct: https://github.com/chriskavanagh/angularauth.

Edit: You must run ng-build (in your Angular dir) whenever you change code.

Chris Kavanagh
  • 451
  • 1
  • 5
  • 15
0

First, in Angular project do ng build, it will create dist folder (static folder). Second step, paste the following code in backend servers entry point file.

app.use(express.static(path.join(__dirname, 'dist/')));
app.get('*', (req, res) =>{
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

And after the above thing is done run backend server: node filename

Note: in give proper path where your index.html file is located in dist folder.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Anup
  • 1
-2

The node server and the Angular app are two different things. In order to run the node server you should use the command:

node ServerName.js

In order to run the angular app you should use the command:

npm start OR ng serve

In your case, the connection between the two is made by http requests. For example you could use 'express' in order to implement rest services in your node server and then send an http request to the server in the current route.

KonRow
  • 63
  • 1
  • 8