I'm trying to use glyphicons (via bootstrap) in my Express app. The problem is when I'm serving my static files, the glyphicons aren't included.
This is my directory (created by grunt):
Build
fonts
glyphicons-halflings.eot
...
js
scripts.js
stylesheets
styles.css
Here is my app.js code:
app.use('/build/', express.static(path.join(__dirname, 'build/js')));
app.use('/build/', express.static(path.join(__dirname, 'build/stylesheets')));
app.use(express.static(path.join(__dirname, 'build/fonts')));
Here is the error from chrome:
users:1 GET
http://localhost:3000/fonts/glyphicons-halflings-regular.woff 404 (Not
Found) users:1 GET
http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not
Found)
I've tried switching to
app.use('/build/', express.static(path.join(__dirname, 'build/fonts')));
but I'm pretty sure bootstrap is looking for ../fonts, so the dir can't be quite the same. In other words, bootstrap is expecting a structure like so:
js/bootstrap.js
fonts/glyphs
Where am I off?
Thanks everyone!
Just use the following then:
app.use('/fonts/', express.static(path.join(__dirname, 'build/fonts')));
Related
I'm trying to serve a production build react app using express.static middleware but always get a blank page. Upon investigation, I've noticed that the bundle.js content is in fact html for some reason. The middleware and config is as follows.
app.use(express.static(path.join(__dirname, 'client/dist')));
app.get('*', (req, res) =>
res.sendFile(path.join(__dirname, '/client/dist/index.html'))
);
Bit of a strange one this, splitting js & css into sub directory seems to have done the trick.
Initial dist structure,
/dist
index.html
bundle.js
main.css
split files as following
/dist
index.html
/js
bundle.js
/css
main.css
I add static CSS,
and this file exists in source code of the page,
but CSS not applied...
In console wrote "blocking CSS because MIMO type does not define correctly"
In link tag type='text/css' exist.
Ask is how I can define 'Content-type' in express automatically?
You can create public folder and add all the client side files.
In your server side you must use it :
app.use(express.static(path.join(__dirname, 'public')));
with path module :
npm install path
I had the same issue yesterday and solved it.
So first node uses folder path to get files.
That means that if you're at http://localhost:3000/ you are at the root of your directory. also you can access your stylesheet via http://localhost:3000/public/css/style.css.
But, you can modify the path using routes and express.static().
You may have an url which is http://localhost:3000/user/index. So he is seeking for the css file such as http://localhost:3000/user/public/css/style.css which does not exist.
the solution might be to use different route files like this :
app.use('/', indexRouter);
app.use('/users', usersRouter);
I'm trying to serve a vue.js single page app with a node.js server but I'm having an issue with some express middleware.
Basically I'm trying to serve two things right now. My index.html and a dist folder that holds all of my static files. On localhost my index.html is served correctly but I'm getting a GET error for my dist folder and can not find it in the sources tab.
I've used more or less this same line of code for many single page apps before to serve my static assets but for some reason with this set up it's not serving the dist folder.
app.use(express.static(path.join(__dirname, '/dist')));
Anyone with express experience know why this line isn't working?
You are using express.static incorrectly. By default, express.static will serve the content you have INSIDE of that dist folder.
What you want to do is this:
app.use('/dist', express.static(path.join(__dirname, '/dist')));
This will force express to serve those static assets under the '/dist' route.
I am trying to wrap my html in a nodejs express app (latest version of express). I try using res.sendFile to send my "index.html" file. I am running into an issue where there are a lot of 404s when loading the page in a browser because it can't find any of my js or css files. My js files are in the bower_components directory, some are in "js" directory. My css files are in a "css" directory.
Path for one is:
/bower_components/jquery/dist/jquery.min.js
What is the best way to update in my server.js file and my index.html file so that it can find all the "css" and "js" files?
You can use the directive express.static
var server = express();
server.use(express.static(path.join(__dirname, 'static')));
It will look for a static folder to serve your static files. Just put your css and js files in this folder and reference them in the <head> part of your templates (index.html in your case)
If you have this two line of code in your app.js file:
app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
Then you need to put your HTML files in view folder.
I myself use ejs (templator) for render HTML files and more ,by adding this line of code to my app.js :
app.set('view engine', 'ejs');
Then by changing your extention of HTML fils to .ejs you can render them with this code :
res.render('file_name');
More info
For example if you have a css file in /public/css/style.css you have to link to it in your html with this address : ./css/style.css or something like this.
I have a test node.js/angular app that uses the yeoman angular-generator. However, I am having problems serving back the rendered .js files from the original .coffee files.
The js files are being rendered and saved to APP_ROOT/.tmp, but any requests for the js files results in a 404.
What is needed (within the Gruntfile?) to allow for the js files to be returned?
Thanks for the help.
Things are working now. The end fix was something was to add an additional static middleware to the app.js file, which was something I had already tried, but it is possible that the path was off causing the fix not to work.
app.js
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, '.tmp')));
When I first added ~line 2 the app.js folder was moved into the app_root/server folder with the following
app.use(express.static(path.join(__dirname, '..', '.tmp')));
which for some reason wasn't working. That teaches me for moving files around