Where do I put backend (with cPanel) files for Angular app?

I have built an angular app that is successfully running locally with command:

ng serve --open --port 4000
​

My local folder structure looks like this:

package-lock.json
angular.json
server.ts
package.json
tsconfig.app.json
/dist
/myFirstProject
/browser <-- ** where this goes on the server **
/server <-- ** where this goes on the server **
/node_modules
/src
index.html
main.server.js
main.ts
/app
app.routes.ts
app.component.scss
app.component.ts
app.component.html
app.config.server.ts
/components
/registerUser
- register.component.ts
- register.component.html
/interceptors
- auth.interceptor.ts
- error.interceptor.ts
/_services
- account.service.ts


server.ts file looks like this and it was created along with default angular project structure with angular-cli. I have not changed it.

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'nodeath';
import bootstrap from './src/main.server';

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

const commonEngine = new CommonEngine();

server.set('view engine', 'html');
server.set('views', browserDistFolder);

// Example Express Rest API endpoints
// server.get('/api/**', (req, res) => { });
// Serve static files from /browser
server.get('**', express.static(browserDistFolder, {
maxAge: '1y',
index: 'index.html',
}));

// All regular routes use the Angular engine
server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;

commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});

return server;
}

function run(): void {
const port = process.env['PORT'] || 4000;

// Start up the Node server
const server = app();
server.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
run();


I have shared hosting with cPanel that looks like this: (app folder was created by me and it's empty)



Now let's say I want to register new User. They would use register component where registration form with inputs is.

User puts details in and clicks Send button then function in account.service.ts is triggered.

register(user: RegisterUser) {
return this.http.post(`${environment.apiUrl}/api/register`, user);
}


Basically I do not know how to connect frontend with the backend so my question or rather questions are:

1. 
   Where /api/register suppose to be locally?
   
   
2. 
   Should I even create it locally if I don't use any FakeBackend?
   
   
3. 
   What file is getting that post request?
   
   
4. 
   Where should I place app files in the server folder structure?
   

Continue reading...