How to render index from Angular project in Node Project

Question

I have two folders into a principal folder, one folder is called frontend, and had the angular project, and the other is called backend, this folder has a backend and all API. I would switch this project like SSR project, can integrate the angular project into a node project, then when I execute

npm run dev

And node project starts on the respective port, automatically the frontend side starts within.

I tried multiples ways to create a path from one folder to another, but not have success.

If I do this

const indexTest = (path.join(__dirname, `../frontend/src/index.html`))

server.get('/', (req, res) => {
    res.render(indexTest)
})

Appear this error

But, if I do that

const indexTest = (path.join(__dirname, `../frontend/src/index.html`))

server.get('/', (req, res) => {
    res.sendFile(indexTest)
})

Don't show me any error, but the principal page is blank

Server firmware code

Server app index.js principal

Answer 1

You are trying to render the frontend based on the source, and that will not work. On Angular projects you need to build the code first, so later you can render it.

If you want to do SSR, then you will need to use something like Angular Universal

Another option would be to point the backend to the dist folder, and then run the angular cli in watch mode (scroll till bottom). Like this: ng build --watch --output-path dist

You will need to add this code to your backend.

Probably something like this:

server.use(express.static('../frontend/dist'))