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

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)

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

how to access static file from same directory in express?

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.

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

How to include static files in express js

I am using the the express js framework with node js and in my server.js file , i have used
app.use('/api',router);
In my ejs file , when i use a script tag
<script src = main.js>
I get an error "Cannot get http://localhost:3000/api/main.js"
How can i include these files in the ejs
please help!!!
in app.js you have to add static folder directory access
app.use(express.static(path.join(__dirname, 'public')));
in public folder add your folders files
--public
----javascript
----css
----img
inside javascript add your main.js
and in ejs add
<script src = "javascript/main.js"></script>
You can use express.static middleware
app.use('/public', express.static('directory/containing/your/files'));
The parameter of express.static is the path to the directory containing all your files that you wish to make static (the path that you provide can be relative to the directory where you launch your node process, or an absolute path), the directory should be available in your file system.
Then you can require your resources like: <img src='/public/imagesA.jpg'>
The '/public' mount path is optional, but recommended
You serve static files through an included middleware in Express - express.static('folder/with/resources'). You do so by adding it to the middleware chain using app.use.
Let's say you want to serve your static files located in the local folder /dist through the public URL /static.
import express from 'express';
const app = express();
app.use('static', express.static('dist'));
Read more about it here.

include a js file in routes file node (not node mudule)

I am trying to create a file that will contain some functions that will be used throughout the entire project. I would like these functions to have access to all the modules that I am using in the project(which is why I don't want to use another module)
in my app.js I can use require to a static folder containing the js file and it works fine however if I go to routes/index.js and try to require the same folder it cannot find it.
Im guessing thats because its not leaving the routes folder. How can I move to the parent of the routes folder.
I have tried
require('controllers/cf');
require('./controllers/cf');
require('cf')
require('../controllers/cf');
require('../~path to project~/controllers/cf');
none of these work. I know this is simple however the solutions I have found dont work unless I make a node module then it has no problems but then other modules are not within my scope
This will work.
var path = require('path');
require(path.join(__dirname, '../controllers/cf'));

Categories

Resources