How to render css in nodejs? - node.js

So in node.js I render the html page which is included in view/index.html. I also included a css stylesheet in the head tags, but it's not rendering. Is there anything I should know about how this should be formatted in the file system: for example, does there have to be a style folder or something for the css to be in?
Thanks.

You will need an endpoint that serves the CSS file, or use a static directory. If you are using Express, the following code when configuring the app will set a directory which will be served statically.
app.use(express.static(path.join(__dirname, 'public')));
This will tell Express to serve everything in the '/public' directory as static content.
If you are not using Express, you can take a look at this question, Node.js static file server logic (using Connect middleware), which should help you.

You need to write code to actual respond to the HTTP GET request the browser will issue for the stylesheet and send back the CSS data. Basically however you are serving view/index.html it will be similar but with a different URL, different content-type header, and different static file to send in the response. You posted no code, so you get English instead of JavaScript.

What are you using to serve the page at view/index.html? Are you simply using fs to read in the file and then sending the contents of the file in response to the request? Or are you using a middleware framework like Connect or Express? Can you provide a link to the site that you are working on, and the relevant extracts of your JavaScript code?

Related

How do I use AWS S3 to host a static express/nodeJS page?

I am new to nodejs/express/coding in general so my apologies if this isn't extremely clear. I am doing a code challenge for a job.
I have most of the project done. Part of the challenge is to have it uploaded to a bucket on S3. I created a bucket, that is all done. My problem is there needs to be a index.html in the root folder of the bucket (I think). All of my html pages (three of them) sit inside of the views directory. When I try to put my index.html in the root folder on cloud9, it says index.html can't be found in the views directory (obviously, since I moved it out). Can I set the views directory to be in the root folder?
Is there a way with express/nodeJS to have all of the files in the root folder? Or is there a way to keep my views folder as it is in Cloud9 and have everything run like it does from there, except in S3? I must be missing something. I am completely lost as to how to host this app on S3. Posting on here was my last resort! Thanks for any help.
Let's make order. Amazon S3 is a cloud file storage service. It can also be used to host static assets of a website.
From what I understand, you are building something with express, using the view directory, used in general for templates and so, I suppose, you are rendering your html pages by your express application. This is called server side rendering and is fully incompatible with amazon s3 that can only serve files.
Now, how can you resolve the problem (considering that you are obliged to use s3)? It depends.
If you are using express only to render your application and to serve static assets (so no API), you should consider some refactoring: in such case, you are basically building a web application without APIs. You don't need express. Maybe you are searching for a client side framework like Vue.js, React or Angular. To be more general, you should render your application client side.
If your express server is also acting as api server, you should divide your project. From one side you have your express api server, deployed somewhere. From the other side, you have your web app, client side rendered.
There is another solution: you could use a prerender like this to generate static assets from your express application. But if you are new to web developement, I advise you not to evaluate this option
When you move your static files to S3, you will need to setup the relative paths accordingly.
Can I set the views directory to be in the root folder?
No. Instead organize your files in S3 where index.html is the root and files with paths such as js/ css/ images/ taken from the root folder.
Note: Its important to understand that you cannot run NodeJS in S3 and instead you will be using the internal web hosting from S3 to serve the static content.

Preventing file fownload (any file even css and js) in IIS8

Is there any way to set up IIS in a way that no file can be downloaded? (without xml configuration and using the IIS UI only).
I know I can remove all mime-types but that is inconvenient, I'm looking for a better option.
You cannot stop of css or js as the server cannot differentiate between a normal
request and a download request when it comes to css or js.
Say you have a CSS or js included in your webpage any html page .This css file will need to be downloaded by the browser.So at server side(IIS) you cannot differentiate a normal download request or browser request. You can deny the download request if the referrer is not matching.For example if someone take sthe URL and directly copying and pasting it in another browser,the referrer header will not be present.Similarly if someone else hotlink to your resources(css,js files),you can stop that too.
By deny download based on Referrer using URLRewrite

Saving and accessing files on a mounted drive in nodejs

I have 3 servers running as a cluster managed by flynn (a bit like heroku) which I can attach a shared drive to so that in theory they all have access to the same files.
However I'm a bit unsure if it's possible to access a mounted drive from my nodejs app to save and access files.
Can anyone shed some light on if this is possible and roughly how I'd go about doing it.
With node.js, your file system path has literally nothing to do with the URLs that your server supports. node.js servers do not serve ANY files by default (unlike some other servers).
If you want an incoming browser request for http://example.com/uploads/test.jpg to read a file from /mnt/shared/uploads, then you have to create a web server route handler that includes the incoming path http://example.com/uploads/test.jpg and then reads the data from /mnt/shared/uploads and writes that data out as the http response.
Depending upon what web server environment you are using, there are helpers to do that mapping. For example, express has express.static() that helps with some auto mapping. But, the web server by itself does not server any files like this automatically.
So, if what you want is that all incoming requests for http://example.com/uploads/* will be read from /mnt/shared/uploads/*, then you can use express.static() to help you do that like this:
app.use("/uploads", express.static("/mnt/shared/uploads"));
This will take any path it finds after /uploads and look for that path in /mnt/shared/uploads. If found, it will automatically serve the content as static content.
So, it would work like this with the incoming URL shown first and the place express.static() would look for a matching file:
/uploads/test.jpg ==> /mnt/shared/uploads/test.jpg
/uploads/bob/test.txt ==> /mnt/shared/uploads/bob/test.txt

Require not defined

I'm trying to learn expressjs.
I have a script inside the public/javascripts folder with a require call.
The browser is reporting that require is not defined.
How can I solve it?
require() is something that you use with expressjs on your server in your nodejs code, not in your browser pages.
Scripts in your browser pages are generally loaded with <script> tags, though there are loading libraries that can be used to provide require() like functionality in the browser, but those are not needed to use expressjs for your server.
Probably your solution is to use a <script> tag in the web page to specify the script you want loaded in that web page and to add some express.static() routes in your expressjs code to instruct your nodejs server to serve the scripts in the script directory to your web pages.
With more detail about what you're trying to do, a more specific answer could be provided.
I'd suggest reading about Serving Static Files in Express.

how to use the cross domain xml file with my project

I have a xml file. how can i use the xml file and access the cross domain request in angularjs $http request.
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
/* cross-domain contents goes here */
</cross-domain-poliy>
How can i use this xml file with my project and make the cross domain access to true.
A CrossDomain.xml file allows a Flash app to make HTTP calls to a domain that is different than the one the SWF is served from. Usually this is used to make calls to remote services, but could also be used to load assets. The crossdomain.xml file will have no affect on HTML or JavaScript code.
If you want to make an AngularJS service call to a different domain than you have to use JSONP. The easiest way to do this from an AngularJS app is to use the $http.jsonp() method. Be careful, though, as doing this is a form of cross site scripting. My preference is that production sites do not make use of JSONP. It can be useful for development purposes, though.

Resources