When attempting to load a page like /patient_profile, the CSS loads correctly. However, when continuing the path to
/patient_profile/settings_patient_profileThe route is managed as follows:
route('/patient_profile/:id')
route('/patient_profile/settings_patient_profile/:id')I do reach the desired page, but the design elements do not work.
Another post suggested setting a static route with express to assets could fix the issue, but it didn't work for me. Perhaps I misunderstood how to correctly use the static path.
This directory tree structure:
.
├── 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
... (omitting some files for brevity)
Omitted fonts and images to improve readability of the tree.
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}`)
})
Sanitized programming related to DB etc.
My css reference 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">