CODEWITHSUNDEEP
cssnode.jsexpressejs
ImSo3K
ImSo3K

Reputation: 872

Node js Express app - css breaks when routing with more than one child path/parameter path

So if I try to load a page for example /patient_profile the css loads correctly, it's when I continue the path to /patient_profile/settings_patient_profile the css just breaks, both pages that I mentioned above are the same file, I just tried to test the routing to see if it works.

the route is managed like this:

route('/patient_profile/:id')

route('/patient_profile/settings_patient_profile/:id')

And I do land in the desired page, only the design elements don't work.

I read in another topic here that setting a static route with express to assets in my situation should fix the issue, but it didn't, I probably didn't understand how correctly use static path.

this directory tree:

.
├── docs
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── src
│   │   ├── bootstrap
│   │   │   ├── css
│   │   │   │   └── bootstrap.min.css
│   │   │   └── js
│   │   │       └── bootstrap.min.js
│   │   ├── css
│   │   │   ├── FontAwesome.css
│   │   │   ├── font-awesome.min.css
│   │   │   ├── Footer-Basic-1.css
│   │   │   ├── Footer-Basic.css
│   │   │   ├── Login-Form-Clean.css
│   │   │   ├── Navigation-with-Button.css
│   │   │   ├── Registration-Form-with-Photo.css
│   │   │   └── style.css
│   │   ├── fonts
│   │   ├── img
│   │   │   ├── avatars
│   │   │   ├── dogs
│   │   └── js
│   │       ├── bs-init.js
│   │       ├── chart.min.js
│   │       ├── custom.js
│   │       ├── jquery.min.js
│   │       ├── smoothscroll.js
│   │       └── theme.js
│   ├── controllers
│   │   └── user_controller.js
│   ├── fonts
│   ├── img
│   ├── index.js
│   ├── js
│   ├── routes
│   │   ├── profile_route.js
│   │   └── route.js
│   └── views
│       ├── index.ejs
│       ├── partials
│       ├── patient_profile.ejs
│       ├── previous_appointments.ejs
├── test
│   └── array.spec.js
└── tree.txt

I ignored some files like fonts and pictures to make the tree more readable

index.js

const express = require('express')
const routes = require('./routes/route')
const appPort = process.env.PORT
const app = express()

//.env
require('dotenv').config({
  path: path.join(__dirname, './.env')
})


//Setting up Handlebars
app.set('view engine', 'ejs')
app.set('views', __dirname + '/views')
app.use('/src', express.static(__dirname + '/src'))
app.use('/views', express.static(__dirname + '/views'))
app.use('/fonts', express.static(__dirname + '/fonts'))
app.use('/js', express.static(__dirname + '/js'))
app.use('/img', express.static(__dirname + '/img'))
app.use('/assets', express.static(__dirname + '/assets'))
app.use('/', routes)



//Creating a connection
app.listen(appPort, () => {
  console.log(`App is running. serve at port: ${appPort}`)
  console.log(`http://127.0.0.1:${appPort}`)
})

Again, sanitized programming related to DB etc.

my css referral in settings_patient_profile.ejs:

<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=BenchNine:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="../assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="../assets/fonts/fontawesome5-overrides.min.css">

Upvotes: 0

Views: 395

Answers (1)

jfriend00
jfriend00

Reputation: 707876

For your CSS files to work reliably, no matter what the path of the parent page is, you need to use absolute URLs for the CSS links, not relative links. So, start the link with /, not with ../.

You don't show exactly where the target CSS files are in your server file system, but I would guess that you need to change this:

<link rel="stylesheet" href="../assets/fonts/fontawesome-all.min.css">

to something like this:

<link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">

And, then use one express.static() middleware that serves everything in the assets hierarchy:

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

This particular recommendation is based on the view of your file system that shows all the assets are in /assets/src on your server disk.

Also, as long as you're willing to prefix all your static URLs with /assets, you should not be needing all of these as they can all be handled by the one previous express.static() middleware:

app.use('/src', express.static(__dirname + '/src'))
app.use('/views', express.static(__dirname + '/views'))
app.use('/fonts', express.static(__dirname + '/fonts'))
app.use('/js', express.static(__dirname + '/js'))
app.use('/img', express.static(__dirname + '/img'))

Upvotes: 2

Related Questions