CODEWITHSUNDEEP
javascriptnode.js
redixhumayun
redixhumayun

Reputation: 1844

Resolving dependencies in express server

I am having some trouble resolving dependencies on my express server.

Here is my project structure

Calculator
--dist
----app
-------calculator.js
-------server.js
--node_modules
--src
----app
--------calculator.js
--------server.js
----public
--------calculator.css
--------calculator.html
----.babelrc
----.gitignore
----package.json

Here is my server.js code

const express = require('express');
const app = express();
const path = require('path');

app.get('/', (req, res) => {
    res.sendFile(path.resolve('./src/public/calculator.html'));
});

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

app.listen(3000, () => {
    console.log(__dirname);
    console.log("Listening on port 3000");
});

The reason I have a dist folder and a src folder is because I am compiling my JS from ES6 from the src folder to ES5 within the app folder using Babel.

However, when I launch my node server, my html is not able to load the css file and JS file. I am using these paths to load each respectively from the calculator.html file

<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>

I am sure I am missing something about the way files are served on a localhost. Would appreciate the error being pointed out.

Upvotes: 0

Views: 90

Answers (3)

Rama Schneider
Rama Schneider

Reputation: 64

Try one of these ...

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

app.use('/', express.static(__dirname} + '/./src/app/public')); // __dirname doesn't include the ending back slash, I think?

The first will always look in your static directory, and the second will look in your static directory for '/' and below. See https://expressjs.com/en/4x/api.html#app.use for more.

And then ...

Change your HTML so the src attributes will be '/calculator.css', etc

Upvotes: 0

redixhumayun
redixhumayun

Reputation: 1844

Alright, this worked for me although I'm not a 100% sure why exactly.

I set my express static file delivery to the following

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

My __dirname was shown to be Calculator/dist/app so changing the src attributes for the CSS and JS in the HTML file to this worked

<link rel="stylesheet" type="text/css" href="./calculator.css">
<script type="text/javascript" src="./calculator.js"></script>

I am assuming this works because I set my express static folder to look inside the /src/public folder and since my current directory was the /dist/app folder, I could serve the JS file directly from there?

Upvotes: 0

Arnav Aggarwal
Arnav Aggarwal

Reputation: 789

It looks like on line 9 in server.js:

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

you're going from the app folder up to src, up to the root, back down into src, back into app, and then trying to go down into public. However by your project structure diagram, public isn't inside app but rather beside it. You'd want something more like app.use(express.static(__dirname + '../public')); In addition, I'd recommend using the path module that's built into Node. It'll make sure you don't have mistakes in path creation.

EDIT: Sorry, that was incorrect. I didn't see that you were transpiling your server code as well. You'll want to use these lines, which should fix both:

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

This is assuming you run the server.js file present in dist/app and not the one in src/app.

Upvotes: 1

Related Questions