I followed the instructions in https://github.com/sahat/hackathon-starter to kickstart a user authentication system. The site runs on localhost and editing the html files modifies the page. However, I want to add and modify some existing css for the page, but it doesn't seem to load any changes I make in the public folder.
In app.js, static files are set by:
app.use(sass({
src: path.join(__dirname, 'public'),
dest: path.join(__dirname, 'public')
}));
and
app.use(express.static(path.join(__dirname, 'public'), { maxAge: 31557600000 }));
when I do inspect element on the result page served from localhost, the sources for localhost:8080 contains the same files with same code, even though I modified these files in the public folder in my local directory.
I tried:
Add a new folder and css file in public/css to modify some html element
Modify the existing main.css file in public/css
deleting the whole public folder
comment out link(rel='stylesheet', href='/css/main.css') in views/partials/layout.pug, which does change the webpage(took out all styling elements, which makes sense)
I'm suspecting it's loading its public folder from somewhere, but I don't know how and where.
Related
I've got a website hosted on Vercel where I'm trying to use an image in the static folder as a favicon.
The static folder is in the root directory of the repository. Inside my nuxt.config.js file, I'm referencing the image like below:
module.exports = {
mode: 'universal',
router: {
base: '/'
},
head: {
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: `/images/meta/favicon.ico`
},
],
}
}
This works locally, but doesn't work with my production site which is hosted with Vercel.
I tried changing the href of the favicon to an image that is already online which worked, confirming that the issue seems to be with the local images in my app.
The Vercel output file structure from the build process looks as follows:
For some reason, all files outside of the '_nuxt' folder aren't able to be accessed - this is also the case for the files in the js folder and fonts folder (e.g. when I try to access https://hownow-git-dev-hownow.vercel.app/js/adhoc.js I'm getting a 'script not found' error).
Am I missing some sort of configuration setting to allow me to access these files?
It is easy to build a multi-page app of Vue can be building by editing the vue.config.js file. But yesterday afternoon, when I was trying to build a multi-page web app with some ui structures in Vuetify.js instead of pure vue.js, one weird thing happened:
It is a two page application: the home page and signup page. When I run npm run build, the result dist folder does not contain the .html file of the second page.
SO I run some tests: here are what is happening:
If the home page has a filename of index.html in vue.config.js and the second page has a filename of second.html, then everything is fine.
If the home page has a filename of index.html in vue.config.js while the second page has a filename of /second/second.html or second/index.html. Then, the folder named second will not be created, neither does the file /second/second.html which is in it.
Does anyone have issues similar to this before, really appreciate for the helps.
Also, I notice that when it was just pure vue.js, the assets such as images will be put into a separate folder in dist. But after vuetify.js is added to the project, the only folders can appear in dist is the js and css and fonts, those image assets will be store under the folder dist. I am not sure if it is a feature of the newest vue.js version, or it is also caused by configuration of vuetify.js. Thanks for the help.
I find that all the stylesheets and javascript code for the second page is generated in folder css and js, the only one missing is the html template.
During building the app, there are no errors about cannot create the folder. All it have be printing is the warning for the asset size since I didn't import assets by part, the prints are:
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
home (1.54 MiB)
css/chunk-vendors.c6dfe063.css
js/chunk-vendors.216b9b9d.js
css/home.429de16e.css
js/home.635f35e5.js
signup (1.53 MiB)
css/chunk-vendors.c6dfe063.css
js/chunk-vendors.216b9b9d.js
css/signup.d6876e84.css
js/signup.77b83ca7.js
The home is the index file, and the second page is referening to the signup page.
module.exports = {
pages: {
home: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
title: 'home'
},
signup: {
entry: 'src/pages/signup/main.js',
template: 'public/signup.html',
filename: '/signup/index.html',
title: 'signup page'
}
},
transpileDependencies: [
'vuetify'
]
}
As you can see, I put all the html templates in the public folder. And I wish all the built html files will be named as index.html under some certain folder so I won't see html from the url of my small project.
Currently, I can 'upload' my images onto my server with Multer but now, how can I serve that file? If I visit the path which is: http://localhost:3001/public/backend/public/uploads/user-admin-1556247519876.PNG, i get a 404 cannot get.
I feel like i'm just missing a single step but I can't spot my error.
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.
I'm using restify for node to create a simple API. I want to have a directory /public where people can simply browse to that directory and download the file they browse to.
To accomplish this, I have used in /routes/public.js:
server.get(/\/public\/?.*/, restify.serveStatic({
directory: __dirname + '/../'
}));
as my file structure is like:
index.js
/routes
public.js
/public
files
to
be
served
however, I have noticed a big security issue. By browsing to http://domain.com/public/../index.js the source code can be downloaded! Obviously, I do not want this to happen.
Is this a permissions job or is there something else I should be doing? Thanks
Restify does check to make sure that you're not serving files outside of the specified directory. You're specifying the root directory for static files as __dirname + '/../' which is the root of the application. That means all of the files in your application can be served via static. If you only want files in the ./public/ folder served by restify, you have to use that as the directory.
The problem stems from the confusing (and in my opinion poorly planned) way they handle mapping routes to static files. As you said, the full route is included in the path of the requested file. This leads to awkward situations like this one. You have a public folder, and also want the route to include public. That means you have to have a ./public/public folder for your resources. An alternative approach would be to not include public in your route. You can setup your static handler like this:
server.get(/.*/, restify.serveStatic({
directory: './public/'
}));
Then a request to /somefile.txt would route to `./public/somefile.txt'.
I have a node.js file server running which (when visited) returns a html content. Also in the same directory of the node.js file, there is a javascript file called test.js. Also in the html content being returned, I need to load that javascript file. However in the html content, being returned, which comes out to be called index.html, the script looks like
<script type="text/javascript" src="test.js"></script>
But the server isn't sending the test.js file, its only sending the index.html file, and the script link is loading it relatively from the same directory.
Now I don't want to give the url to the test.js file. I want the node.js file to also send the test.js file, so that it ends up in the same directory as index.html. And then index.html can load it from the same directory.
Is there a way I can specify in the node.js with code to also send the test.js file?
Thanks.
Are you familiar with Express, as dandavis mentioned? Express allows you to set a directory for your static files. See my standard config below:
app
.use('view engine', jade)
.use(express.compress())
.use(express.limit('10mb'))
.use(express.bodyParser())
.use(app.router)
.use(stylus.middleware({
src: __dirname + '/www',
compile: function(str, path) {
return stylus(str)
.set('filename', path)
.set('compress', false)
.set('warn', true);
}
}))
.use(express.static(__dirname + '/www'))
.use(express.logger());
The important part here is second from the bottom. Essentially, Express now knows to look for any assets you specify in your HTML within that static directory. For me, I create a folder titled WWW within my server folder, then add to it my JS, CSS, and images.
For example, say I create the "stylus" folder within my WWW folder, and add to it store.css. My link to that CSS asset would be the following in my Jade template:
link(rel="stylesheet", type="text/css", href="stylus/store.css")
Express knows to look for that asset relative to the __dirname + '/www' path, and thus locates the "stylus" folder and the CSS assets it contains. Hope this helps, and that I haven't ventured away from your intent!