Nodejs Ionic-Angular deployed to Heroku displays only the backend, instead of launching the whole app

Question

My package.json :

"scripts": {
    "ng": "ng",
    "start": "node src/app.js && ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "main": "src/app-routing.module.ts"
  },

1. I moved the devdependencies to dependencies .

2. Apps run locally with Heroku local web but display the only backend in the server.

3. Added a procfile containing web: npm start

4. Heroku assigns a port and the database is successfully connected. Backend works fine

My project structure: A src/ folder that has both my back end and frontend files.

I guess I am losing out on the project structure. Please help to make me display the frontend of the app instead of backend.

Answer 1

okay, 1)add the following to your app.js (or your server.js), and

app_path ='../www';

app.use('/api', songRoute)

app.use('/',express.static(path.join(__dirname,app_path)))

app.get('*',(req,res)=>res.sendFile(path.join(__dirname,app_path + '/index.html')))

2)To package.json add this,

"heroku-postbuild":"ng build --configuration=production",