You could use a setup like this:
-client/ // for your angular application (frontend)
-node_modules/ // node modules
-routes/ // route files for your express
-app.js // your main app
-package.json // your package.json with all the dependencies and so on
Create a project-folder and run npm init which automatically creates a package.json for you. Then you could create the client app via ng new client.
Then you just run git init in the rootfolder of your project.
In case you don't want to have the certain parts of the project committed make use of the .gitignore file.
In your app.js of your node backend simply require express and other relevant packages like:
var express = require('express');
var path = require( "path" );
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var cors = require('cors');
var app = express();
var port = 65500;
var router = express.Router();
....
..
and define your express-routes
var authRouter = require('./routes/auth')(router);
var servicesRouter = require('./routes/services')(router);
....
..
app.use('/auth', authRouter); // Route to authenticate login attempt
app.use('/services', servicesRouter); // Route to perform other services
....
..
// wildcard:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/public/index.html'));
});
// INFO: Start the node server */
app.listen(port, () => console.log(`Node's Express ice-dashboard-new is listening on
Port ${port}..`));
In /client/src/app/components for example you can generate any component with CLI via ng generate component someComponentName and the Angular CLI will do all the magic for you. (generating .html .css/.scss, .ts & .spec.ts and adding it to app.modules.ts).
Same works for services connecting the font to backend. Just use the CLI like ng generate service someServiceName - but keep in mind that you have to add those to the 'providers' of the @NgModule-declaration in the app.module.ts.
If you have additional backend-assets just create a folder in the root folder of your app and require them additionally in your app.js to make of use them (like /config or /helperz etc..)
For front-end assets (like images, i18n translation files or whatever) use the /client/src/assets folder.
Basically your app consists of two parts - the node backend serving the app and providing the routes for backend ops and the angular frontend application (html,css/scss & js), here's a little graphic to illustrate that setup for better understanding.
A quite handy tool is Nodemon, a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
Just use nodemon instead of node to run your code, and now your process will automatically restart when your code changes. To install, get node.js, then from your terminal install it globally with the -g option via:
npm install -g nodemon
To get a better understanding, have a look at these examples on how others have set up their project:
