I'm using pugjs for my project.I was unable to load a css file in the pug template. I'm using the following code
index.pug
link(rel="stylesheet", href="views/styles/products.css", type="text/css")
This is my project structure
Express is not going to serve anything that you don't give permission to. You have to give permission by using express.static middleware.
Put your Static files in a folder then use the express.static middleware like this-
app.use(express.static(path.join(__dirname, 'public')));
For more details refer to https://expressjs.com/en/starter/static-files.html
My directory setup looks something like this:
.
├── app.js
├── bin
│ └── www
├── package.json
├── package-lock.json
├── public
│ ├── images
│ ├── css
│ │ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
And in the index.pug, we have to use:
html
head
title=homepage
link(rel='stylesheet', href='/views/dashboard/dashboard.css')
body
And in app.js add this line of code:
app.use(express.static(path.join(__dirname, 'public')));
Related
Question
Is it possible to configure a global, custom entry point to be used by require for all subfolders in a Node.js project?
Rationale
When working in Node.js, I like having my index.js file as the topmost file in each subfolder in my IDE.
However, depending on the IDE and the way it sorts files, this is not always possible (for example, VSCode has several sorting options available, and none of them can achieve this).
To achieve that, I prefix it with _index.js, but then lose the built-in capability of require to recognize it as the default entry point.
Although this can be mitigated by adding a package.json into each subfolder, with a main property directing to the entry point file - I'd like to know if there's a way to define a "global" custom entry point, be it in the topmost package.json or using some npm package which I'm not aware of.
Example
Let's say I have the following folders structure, and assume that our IDE sorts files alphabetically:
MyApp
├── app.js
├── package.json
├─┬ featureA
│ ├── func1.featureA.js
│ ├── func2.featureA.js
│ └── index.js
└─┬ featureB
├── func1.featureB.js
├── func2.featureB.js
└── index.js
To keep index.js as the topmost file, we prefix it with an underscore, and use a package.json for each subfolder to define it as an entry point:
MyApp
├── app.js
├── package.json
├─┬ featureA
│ ├── _index.js
│ ├── func1.featureA.js
│ ├── func2.featureA.js
│ └── package.json
└─┬ featureB
├── _index.js
├── func1.featureB.js
├── func2.featureB.js
└── package.json
The package.json for both featureA and featureB is identical:
{
"main": "_index.js"
}
That package.json is necessary so that we can use require in the following way in app.js:
// app.js
const featureA = require('./featureA');
const featureB = require('./featureB');
But can these two package.json files be replaced with some "global" alternative?
Routes on a deployed Angular app do not work when served by Node with Express. I know this has been asked before but there is something I am probably missing that is driving me crazy.
File structure in the "express" folder where Node runs is roughly the following:
express
├── controller.js
├── index.js
├── ngForm
│ ...see below...
├── node_modules
│ ...
├── package.json
├── public
│ ├── file.json
│ └── rubric.html
├── router.js
├── ssl
├── cert.pem
└── key.pem
and the Angular project is in ngForm:
ngForm
├── angular.json
├── dist
│ └── rubric
│ ├── assets
│ ├── favicon.ico
│ ├── index.html
│ ├── main.js
│ ├── main.js.map
│ ├── polyfills.js
│ ├── polyfills.js.map
│ ├── runtime.js
│ ├── runtime.js.map
│ ├── styles.js
│ ├── styles.js.map
│ ├── vendor.js
│ └── vendor.js.map
├── e2e
├── node_modules
├── package.json
├── src
├── tsconfig.json
└── tslint.json
Some relevant Angular code:
app.module.ts:
const appRoutes: Routes = [
{path: '', redirectTo: '/rubric', pathMatch: 'full' },
{path: 'rubric', component: RubricComponent},
{path: 'rubricbuilder', component: RubricbuilderComponent},
{path: '**', component: PageNotFoundComponent}
]
app.component.ts:
#Component({
selector: 'app-root',
styleUrls: ['app.component.scss'],
template: `<router-outlet></router-outlet>`
})
The relevant Node.js code:
server.js:
app.use(express.static("ngForm/dist/rubric"));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});
I did run ng build from the Angular project in ngForm, and the output is in ngForm/dist.
When running ng serve in the AngularProject I can navigate to
https://localhost:4200/rubric and https://localhost:4200/rubricbuilder .
From Node I can only get to https://localhost:8000/ which redirects/changes the url to https://localhost:8000/rubric , but I cannot launch https://localhost:8000/rubric itself or https://localhost:8000/rubricbuilder. By poking around with the angular routes and re-running the build, I can make express show rubricbuilder on the / route, which changes the url to https://localhost:8000/rubricbuilder. What am I missing?
I'm not that familiar with angular but this question is related to VueRouter.
Because you did not define /rubric router in express middleware so you might get an error like 404 NOT FOUND.
When using SPA router in HTML5 history mode, you need extra configurations for your server,
for example, send your SPA at every route:
app.use(express.static("ngForm/dist/rubric"));
app.use((req, res) => {
res.sendFile(path.join(__dirname, 'ngForm/dist/rubric/index.html'));
});
This might not be the best practice for express, you can search for other solutions, for example like VueRouter suggest using connect-history-api-fallback with express.
In the ssr vue (server side rendering for vuejs) documentation there's a code structure example containing a webpack build step:
https://ssr.vuejs.org/en/structure.html
The structure looks like this:
src
├── components
│ ├── Foo.vue
│ ├── Bar.vue
│ └── Baz.vue
├── App.vue
├── app.js # universal entry
├── entry-client.js # runs in browser only
└── entry-server.js # runs on server only
I am missing a main template(in rails or expressjs lingo a layout) which is supposed to contain the
<!--vue-ssr-outlet-->
marker.
Or am I missing something?
In SSR there is not a layouts folder. Your template (default) is in your App.vue file.
I am new to Node.js application development with expressjs framework.
I created a skeleton with expressjs-generator.
This skeleton have following directories and files:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
After it: I use the following command to run this application.
set debug=myapp:* & start npm
Now this is successfully running at Port 3000
This shows the homepage with Express Welcome message.
I want to make change in Homepage of my application. How it can be possible?
You can do that by changing the index.jade as #brute_force mentioned. If you are not familiar with jade, you can also add a index.html in the public folder and update the index.html instead.
My CouchApp has the following folder structur, where files inside the app folder are compiled into the _attachments folder:
my_couchapp
├── _attachments/
│ ├── app.js
│ ├── app-tests.js
│ └── index.html
├── app/
│ └── app.js
├── Assetfile
└── views/
I want to exclude the file Assetfile, _attachments/app-tests.js and the folder app.
My current .couchappignore looks like this:
[
"app",
"Assetfile",
"_attachments/app-tests.js"
]
But this doesn't seem to work. All files beginning with app inside the _attachments folder are not pushed.
How do I define folders and specific files to be excluded when the CouchApp is pushed via couchapp push?
After a little more experimentation I found a way: the app folder can be excluded by specifying app$, so the final .couchappignore now looks like this:
[
"app$",
"Assetfile",
"app-tests.js"
]
In case you arrived here looking for a way to ignore subfolders, you are just like me. Here's my problem:
my-couchapp/
├── node_modules/
│ ├── react.js
│ ├── url/
│ ├── browserify/
│ └── coffee-script/
├── app/
│ └── app.js
└── views/
I wanted to include node_modules/react.js and node_modules/url/ (and all subfolders), but didn't want to include node_modules/browserify/ and node_modules/coffeescript.
I was trying
[
"node_modules/browserify$",
"node_modules/coffee-script$"
]
but it wasn't working.
[
"node_modules\/browserify",
"node_modules\/coffee-script"
]
also didn't work.
The only thing that worked was
[
"browserify",
"coffee-script"
]
I don't know why.