CODEWITHSUNDEEP
javascriptangularjsnode.jsheroku
MojoJojo86
MojoJojo86

Reputation: 11

Restful API works locally but angular frontend won't work when deployed to heroku

So as mentioned in the title, I had this project working on my localhost but since I've deployed to heroku it doesnt. I can still access the DB via the api and display the json but the front end file doesn't work.

At the homepage I just get cannot GET /

Server.js

'use strict'

const express = require('express');
const app = express();
const bodyParser = require('body-parser'); // req.body
const cors = require('cors'); // 8080
const mongoose = require('mongoose');
const uriUtil= require('mongodb-uri');
let patients = require('./data');

const mongodbUri = 'mongodb://*********:***********@ds056009.mlab.com:56009/pt-db';
const mongooseUri = uriUtil.formatMongoose(mongodbUri);
const dbOptions = {};

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));
app.use(cors());



//app.get('/', function(req, res) {
  //res.sendFile(__direname + '/index.html')
//});

app.use('/api/patients', require('./api/patients/routes/post_patient'));
app.use('/api/patients', require('./api/patients/routes/get_patients'));
app.use('/api/patients', require('./api/patients/routes/get_patient'));
app.use('/api/patients', require('./api/patients/routes/put_patient'));
app.use('/api/patients', require('./api/patients/routes/delete_patient'));


const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  mongoose.connect(mongooseUri, dbOptions, (err) => {
    if (err) {
      console.log(err);
    }
    console.log(`Our app is running on port ${ PORT }`);
  });
});

public/js/app.js

(function() {
    'use strict';

    var app = angular.module('patientsApp', []);

    app.controller('patientsController', function($scope, $http) {

      $http.get('api/patients')
        .then(function(response) {
          $scope.patients = response.data;
        });
    
      $scope.savePatient = function(patient) {
        $http.post('api/patients', patient)
          .then(function(response) {
            $scope.patients.push(response.data);
        });
      }
      
    });
})();

public/index.html

<!DOCTYPE html>
<html ng-app="patientsApp">
<head>
  <title>Patient DB</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
  <body ng-controller="patientsController">

    <div class="container">

      <div class="col-sm-6">
        <form ng-submit="savePatient(patient)">
          <div class="form-group">
            <input type="text" placeholder="First Name" ng-model="patient.first_name" class="form-control">
          </div>
          <div class="form-group">
            <input type="text" placeholder="Last Name" ng-model="patient.last_name" class="form-control">
          </div>
          <div class="form-group">
            <input type="text" placeholder="Hospital Number" ng-model="patient.hosp_num" class="form-control">
          </div>
          <div class="form-group">
            <input type="text" placeholder="Consultant" ng-model="patient.consultant" class="form-control"> 
          </div>
          <div class="form-group">
            <input type="text" placeholder="Treatment Site" ng-model="patient.treat_site" class="form-control"> 
          </div>
          <div class="form-group">
            <input type="text" placeholder="Treatment Group" ng-model="patient.treat_group" class="form-control"> 
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>

      <div class="col-sm-6">
        <ul class="list-group">
          <li class="list-group-item" ng-repeat="patient in patients">
            <h4>Patient Name: {{patient.first_name + ' ' + patient.last_name}}</h4>
            <p>Hospital Number: {{patient.hosp_num}}</p>
            <p>Consultant: {{patient.consultant}}</p>
            <p>Treatment Site: {{patient.treat_site}}</p>
            <p>Treatment Group: {{patient.treat_group}}</p>
          </li>
        </ul>
      </div>

    </div>

    <script src="node_modules/angular/angular.js"></script>
    <script src="/app.js"></script>
  </body>
</html>

api/patients/gets_patients.js

const express = require('express');
const mongoose = require('mongoose');
const Patient = require('../model/Patient');
const router = express.Router();

router.route('/')
  .get((req, res) => {

    Patient.find({}, (err, patients) => {
      if (err) {
        res.status(400).json(err);
      }
      res.json(patients);
    });
    
  });

module.exports = router;

Hope this makes sense, any help would be greatly appreciated.

Upvotes: 0

Views: 1335

Answers (1)

Bala Abhinav
Bala Abhinav

Reputation: 1348

  1. The main issue why you index.html was not loading was because you had commented out your middleware which serves your index.html.

  2. Now that your index.html is served, It is not able to get the angular.js file which is because, the node_modules folder needs to be set to static for the node backend to serve the files.

You can do it like this : 

var path = require('path');//Require the nodeJs's path module.
app.use('/', express.static(path.join(__dirname+'/node_modules')));//declare as static the node_modules folder so that node can serve the angular.js file inside it

EDIT : 

app.use('/', express.static(path.join(__dirname+"/public")));

Also serve the /public folder which has the rest of your files the same way as above.

serve the angular.js file through cdn or create a bundle.js using webpack or gulp..serving node_modules will be a pain..

Upvotes: 1

Related Questions