how to access static file from same directory in express? - javascript

i am trying to access the static file from the same directory but it is not working problem is it isn't loading the image in the live server
app.use('/static',express.static('/public'))
Here public is the main directory where I creat 'css'& 'img' folder and put my 'js' and 'html'file.
Before I used to access the file out side of the same directory from where I creat a css and img folder & inside those folder I creat a 'css' file and put a image . on that time it was working properly but when I put my 'js' and 'html' in the same directory where I creat my 'css' and 'img' folder it is not working means server is creating but in the 'HTML' file the 'image' is not loading in the live server.
hear is the code:
const express= require('express')
const app= express()
app.use('/static',express.static('/public'))
app.set('view','./public/view')
app.get('/',(req,res)=>{
res.send('user accessed')
})
app.listen(5000,()=>{
console.log("server is running at 5000")
})

Firstly, if you want to hear right answer you need to provide as more as possible information about your problem. For example, you need to provide at least folder structure of your app, files which you want to include to your app and paths which you use. And another point for you, why not to use best-practice solution which suggested by node js express creators? Here is express app generator https://expressjs.com/en/starter/generator.html . If you keep to use the best practice solution then you will not have such questions.

Related

Converting html with css and js code pages into a node js application

I have multiple HTML pages with CSS and js files that work(if I open an HTML page on its own using chrome for example) I have tried to use these pages inside a node js project I created.
but for some reason, it doesn't recognize the js file and doesn't apply the CSS design.
I had installed path, but I still can't get node js to recognize the js file.
I'm referring to the js file inside the HTML code by
You need to let the node know that you want to use these files in your project. Or you have to get permission to use these files from the node.
To do this, create a directory called 'public' in the root path of your project
And use the following code in the main file of your project
const path = require('path');
const express = require('express');
app.use(express.static(path.join(__dirname, 'public')))
The above code means that any file in the public folder (such as js css img) is allowed to access and use

Serving UI in express.js after logic

I understand how to return a file using express with:
res.sendFile(path.join(__dirname, 'fileName.html'))
And I understand how to serve up a folder using:
app.use('/customAPI', express.static('folderName'));
using the documentation here.
The folder with the UI is created using angular 4 build. So, it all goes into one folder creating a index.html and a bunch of *.bundle.html files.
However, I don't understand how to serve up a the UI after doing some logic. For example:
router.get("/", function (req, res) {
let myParam = req.query.whatever;
if (whatever) {
res.redirect('//google.com'); //this works fine
}
else {
//I don't know what to do here
app.use("/somePath", 'dist'); //won't work because what do I put in "somePath"?
res.sendFile(path.join(__dirname, '../../dist/index.html'));
//^ this only serves up the file but fails because it can't find the library files that index.html needs to load.
}
});
I've tried going down the road of trying to use res.render but I'm not 100% sure if that is what I'm looking for.
Question: How do I serve up a folder containing all ui information correctly
When you serve a specific path these are sending the content only for that path, for example an HTML with the interface, the HTML file can make calls to other files, like CSS, JS etc ...
You need to serve the static files in a public folder
app.use('/static', express.static(path.join(__dirname, 'public')))
All files in the static folder will be served in the url /static/filename
In the html of the path, you must include the resources of the static folder that you need

Including JQuery in Client Side Node.js

I'm learning node.js using express and have come across a topic thats giving me some trouble. Basically, once the user requests a webpage and the backend sends them the HTML webpage, if I want to include a javascript file to make that HTML page interactive, how would I exactly do that?
My backend looks like this:
var app = require('express')();
var server = require('http').Server(app);
var express = require('express');
server.listen(8080);
app.use(express.static(__dirname + '/views'));
app.get('/', function(req, res){
res.render('index.html');
});
and the HTML it sends looks like this:
<html>
<head>
<meta charset="UTF-8">
<title>WebsiteMainPage</title>
</head>
<body>
<h1>index.html</h1>
</body>
</html>
Do I just add Jquery by linking up the source in the HTML to a public source like this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Or do I have to do something special? For that matter how would I add a general javascript file that I wrote, not a library such as Jquery.
Edit: My project structure looks like this:
Project
|
|_____ backend.js
|
|_____ views
| |
| |_______ index.html
|
|_____ static
|
|_______ libs
|
|________jquery-1.12.1.min
Using CDN servers will the best option so that browser will cache your library files. and that will help your clients to reduce their page loading time.
If you want to use your own copy downloaded from your server, create a directory structure for example "static/libs/" and copy the jquery library inside that directory then make it as a static directory by
app.use(express.static(__dirname + '/static'));
then you can refer the jquery from your html page by
<script src="/libs/jquery/1.12.0/jquery.min.js"></script>
You can also make the node_module directory as static then all the node_module will be available to public and you can able to refer the jquery file from client side.
in a comment I saw that you have mentioned about npm jquery.
When you do npm jquery, jquery will be installed as a node module and it will be available in node_module directory and using require('jquery') you can use jquery modules in the server side only. If you want to use the require('jquery') method in the client side you have to use requirejs or webpack etc .
Dear,
it's so simple just include the jquery file by using
<head><script src="/pathto/jquery.min.js"></script></head>
OR
add CDN in head tag of your index.html file
Create A folder named 'public' within root folder of your app.
Inside 'public' folder create 'js' name folder
Keep all js file within 'js folder'
Make changes in your app.js file like such
app.use(express.static(path.join(__dirname, 'public')));
Now just go to you index file and add CDN or your jquery file normally in HTML head tag.
Thanks & Cheers :)

JavaScript isn't accessible inside the static folder when using sass/scss

Question
JavaScript isn't accessible inside the static folder when using sass/scss. How can I configure it to allow me to either put my JavaScript files somewhere that sass/css doesn't care about, or make the current folder structure work?
I should be able to access the below mentioned script.js file at localhost:3000/js/script.js, just like I can access localhost:3000/css/style.css.
Background
I just recently got the node-sass-middleware working. You can see my question here. Unfortunately, now my JavaScript doesn't work. Disabling node-sass-middleware makes Javascript accessible inside the assets/static/js folder. I imagine it has something to do with the fact that sass is putting its output into assets/static/css. I just can't figure it out!
Express Setup
var express = require('express');
var sass = require('node-sass-middleware');
var app = express();
app.use(
sass({
src: __dirname + '/assets/scss',
dest: __dirname + '/assets/static',
debug: true,
})
);
app.use(express.static('/assets/static'));
Folder Structure
-assets
--scss
---style.css
--static
---css
----style.css (compiled)
---js
----script.js (not accessible, unless I remove node-sass-middleware)
app.js (express app)

What is the right way to set JS and CSS paths in express/jade file?

I'm trying to create my first application using Mongo, NodeJS, Express and Sequelize.
If I use link(rel='stylesheet', href='http://localhost:3000/css/style.min.css')everything works fine, but, is it the right way?
How to get the app path (or something like) to use in layout and views files?
In your main file (probably app.js) you need to set your public directory - I usually name the directory "public," and you should put it in the app's root. Here's the code to do that:
app.use(express.static('public'));
Then, to serve your css folder, you can put it in the public directory and use the path /css/style.min.css.
For your jade files, create a folder called views in your app's root. Then, add this to your app.js.
app.set('views', __dirname + '/views');
Put all of your jade files in there. Now, if you have a layout.jade in there and you want to use it in index.jade, you can use the layout's path relative to the view directory to reference it, for example:
extends layout
block content
h1 stuff here
Please use an absolute path, so you dont include the server name
link(rel='stylesheet', href='/css/style.min.css')

Categories

Resources