I'm looking at this sample Angular application.
In the index.html file, there are lines like
<script type="text/javascript" src="/static/angular.js"></script>
However, upon closer inspection there are no folders in the project called static.
How does this work? How does angular locate these references?
Angular has nothing to do with this. It is the express server which takes care of the paths.
Take a look at server/config.js. You will see staticUrl: '/static' mentioned there.
Now open server/server.js (server.js is the script which runs before anything else runs in the app so all the configuration is done within this file) and on line 21 you will see require('./lib/routes/static').addRoutes(app, config);. This requires the static.js file which instructs the app to use /static (mentioned in the config.js file) as the path for static files such as CSS and javascript files.
This is a server side phenomenon. There is a middleware in this file server/lib/routes/static.js :
line : 9
app.use(config.server.staticUrl, express.static(config.server.distFolder));
What this does is : if any http request is started from config.server.staticUrl (whitch is /static for this app) the server tries to respond with the resource that are kept in a config.server.distFolder folder (which is client/dist for this app).
For example :
when you request to this url /static/angular.js the middleware tries to find angular.js file in client/dist/. Because client/dist directory is mapped to the url which starts with /static by the middleware.
When that HTML file is processed by the browser, the layout engine is making a separate HTTP request to the server to download the resource in question:
/static/angular.js
Since all of that is handled by the server routing mechanism there doesn't have to be a folder named static in client code. Your example is using Node.js Express routing which maps /static routes to actual physical paths.
Here is a piece of code that configures static routes:
https://github.com/angular-app/angular-app/blob/master/server/config.js
The important parts are:
staticUrl: '/static', // The base url from which we serve static files (such as js, css and images)
And the destination folder that /static maps to:
distFolder: path.resolve(__dirname, '../client/dist'), // The folder that contains the application files (note that the files are in a different repository) - relative to this file
Per the documentation the dist folder contains the Grunt build results, and if you take a look at the gruntfile you will find all the grunt configuration that makes this possible.
https://github.com/angular-app/angular-app/blob/master/client/gruntFile.js
Related
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.
Here's the file structure i am using
-----+root
----------+app
--------------+common
--------------+config
--------------+controllers
--------------------------+rootPage.js
----------+public
--------------+rootPage.jade
----------+server.js
Here's my jade file
doctype
html(lang = 'en')
head
title PlanUrNight
meta(charset = 'utf-8')
link(rel = 'stylesheet' href = '//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css')
link(src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' rel = 'stylesheet')
link(rel = 'stylesheet' href = './css/rootPage.css')
body
nav.navbar.navbar-inverse(role= 'navigation')
.navbar-header
button.navbar-toggle.collapsed( type='button', data-toggle='collapse', data-target='#navbar-inverse', aria-expanded='false', aria-controls='navbar')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#') PlanUrNight
.collapse.navbar-collapse#navbar-inverse
ul.nav.navbar-nav
li: a( href="#") Home
.collapse.navbar-collapse.navbar-right
.facebook-login-wrapper
a.btn.btn-primary(href='/auth/facebook') Facebook
span.fa.fa-facebook
.container-fluid
.row
.col-md-8.col-md-offset-2.main-container
.images-container
img.drink(src='img/drinking.png')
img.dance(src='img/couple_dancing.png')
img.club(src='img/club_ball.png')
.row
.col-md-2.col-md-offset-6.search-container
span.glyphicon.glyphicon-search
.input-group
input.form-control(type='text', placeholder='Search')
script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript')
script( src='./controllers/rootPage.js' type='text/javascript')
I have tried multiple variations of the source, but it just doesn't seem to be loading the JavaScript file. Each time I get an error log in my console, saying Error 404: rootPage.js not found
I am using express with node, and in my server.js file I have the following line for serving static files
app.use(express.static(__dirname+'/public'));
So what am I doing wrong here? Does the usage of the app.use line above change the root of my directory in some way so that I need to change the file path to access my JS files?
Or is there a different way to load JS files in Jade?
Your file organization is a bit wonky. Based on the one middleware you showed us, all files in the /public folder will be served as-is, but no static files elsewhere will be.
Generally, jade files that you're rendering with server logic are in a /views folder which is not served directly, but instead available to server side route handlers or controller logic to call res.render with.
So if you have clientside JS files you want to serve as static content you need them either under the /public folder or create more static middleware calls to point to whatever folder they are in.
/** Edit after first two comments **/
Sorry for not providing more examples, etc before, I was on my phone.
Wonky is perhaps a harsh term and I'm sorry. What I meant was it doesn't really match the standard layouts I've seen. There's a few ways to do it, but most small(ish) Express projects at least start out with the template generated by the express command line tool.
In that case, all the stuff in your ./root/app directory would be server-side code that doesn't get directly served to the client ever. Most of the sites I've seen (exception being the default template from the MEAN.js project) follow a pattern something like this:
app
- errors
- models
- controllers
- routes
- views
public
- css
- js
- img
package.json
server.js
Sometimes there's a lib folder that's a peer of app where you put utility stuff. 'views' is where all the jade templates live.
Everything in the public folder is exposed via a single middleware like you did:
app.use(express.static(__dirname+'/public'));
Everything else will not get served as static files. If you have a clientside JS structure that uses an MVC pattern, you'd then have model, view, and controller folders under ./public/js
The MEAN.js folks take a different approach, making each logical component of the app (e.g. user management, etc) into a module and then organizing each module as folders that look like ./<module name>/server and ./<module name>/client with structure for models, controllers, etc, under each of those depending on if it's server code or client code.
You're correct on how to add more more static middleware.
Try
script( src='./app/controllers/rootPage.js' type='text/javascript')
I'm trying to build my first webapp, I started with the frontend and using jquery and jquery mobile as well as many plugins I have a significant frontend already, and all of it stems from a single html file (since jquery mobile uses page divs within the same file) but there is also a main js file for the app, a css file and many css and js files included from plugins and the like. I'm now trying to add in database and other backend functionality using node.js and express.js, but I've run into a wall, when I use res.sendFile() to serve up the html the scripts and css don't load, and when I try to serve the directory everything is in it shows the directory as links which I certainly don't want in the public view (though when I do this and click the html file link it works fine.
What I want to know is how do I use express to a) serve up an externally designed and maintained frontend and b) allow that frontend to send requests back to the server (so I can use forms and get data and stuff)?
You should do the following things:
Serve your static files
Create an API server that will listen for the requests coming from your frontend app
1. Serve your static files
To serve static files with Express, read this link.
You'll basically add it to your express app:
app.use( express.static( __dirname + '/client' ));
Where '/client' will be the name of the folder with your frontend app files.
2. Create an API server
You can see how to create an API server here.
For the entry point of your application, you should send/render a file.
This could be accomplished with the following code:
app
.get( '/', function( req, res ) {
res.sendFile( path.join( __dirname, 'client', 'index.html' ));
});
This will send a static file every time that a user request a file at the root path of your application.
You can use the asterisk * (wildcard) instead of / too. That symbol meaning that for whatever route requested, you will respond with the same file/action.
More about the responses here.
Sum up
Those are the things that you should seek to build your app.
You can see a simple app with those things implemented here.
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!