3

I am trying to build my first web app using MEAN on Heroku. I followed their guide to getting a sample app running. Then I downloaded the sample app code and altered it to load the login page. Unfortunately, I can't get the my app.js file to load. This is the angular script. In the main directory I have index.js that is running express. Anyways, I am able to get the .ejs .css and img files to load but this script wont. I am stuck. I need to be able to get past this to tinker enough to start learning the stack.

Script is in the public directory with the other files that get loaded. Code looks okay? Don't know why I get 404 on the script.

Any help is much appreciated!

var express = require('express');
var app = express();

app.set('port', (process.env.PORT || 5000));

app.use(express.static(__dirname + '/public'));

// views is directory for all template files
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/', function(request, response) {
  response.render('pages/index');
});

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});



<script src="/js/app.js"></script>

Turns out changes weren't being pushed to the server. That's all folks!

1 Answer 1

3

You just need to move app.js to the public folder. This line app.use(express.static(__dirname + '/public')); in your index.js tells express to serve static assets out of the /public folder. Everything else in your project will be "hidden" on the server unless you expose it.

You could create a js folder in public and move app.js there. Then change the reference in index.ejs from src="/app.js" to src="/js/app.js".

Sign up to request clarification or add additional context in comments.

5 Comments

Thanks Ryan. The confusing thing is that it is in the public folder with the other files that are loading. I will update the post to make it more clear.
Are you sure your changes are deploying to heroku? When your repo was in the question I only saw app.js in the root folder. Try changing some text in index.ejs and deploy to make sure it's picking up your changes.
Even now I if you goto your repository on github I don't see app.js. Make sure you added it to git with git add public/js/app.js and then commit and deploy. See devcenter.heroku.com/articles/git
Yeah I changed to it login.js to make sure the changes were getting pushed to heroku/github. Turns out they weren't! So now it is all good as far as that problem goes :) Now I just have to figure out how to push these changes to the server better. I've been having it update via github but it takes too long for the changes to go live. Have to figure out how to do it better with command line I guess. All a bit tricky for a web designer :)
Ah looks like I got the windows terminal figured out and pushing to heroku direct. Happy days :D All the best in your endeavors Ryan

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.