I am a newbie at working with nodeJS and especially with the framework Sails.
I did my research and found that with sails you just need to put CSS-files under the the folder "assets" and call them directly with the URL, e.g. if I put the file custom.css in the folder "assets/foo" I should be able to access it via the URL "localhost:1337/foo/custom.css".
The problem is that my local server throws a 404 Error not being able to find the files, but strangely when I deployed the app to Heroku it works perfectly and I am able to access the css files.
Why is this not working locally?
Welcome to Sails! CSS is served automatically if you put it in your assets/styles folder. Your JS should be in assets/js folder as well. This way you can access it like localhost:1337/assets/js/myjs.js.
In your view - if you don't want to serve it everywhere with a layout - just put your tag like this: <link rel="stylesheet" href="/styles/myawesomestyle.css"> or <script src="/js/mypowerfuljs.js"></script>.
Remember, everything in assets will be made publicly available.
I really recommend that you read the docs HERE.
Related
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.
There might be an answer to this, but I don't know how to phrase it properly, so I'll just ask.
I use a module, called build-url. It is designed for the browser and provides an easy way to construct URLs with query parameters.
I want to store my website in a folder, called site while not having to type it in the URL. I managed to do that easily. However, when the client asks for the build-url.js file, he receives a 404.
Here's how the folder structure looks like:
node_modules
build-url
dist
build-url.js
site
index.html
In my code, I have:
app.use("/", express.static(__dirname + "/site"));
The problem
When I go to http://localhost:5000/, the index.html file is served and everything is fine. Inside, I include the script:
<script src="../node_modules/build-url/dist/build-url.js"></script>
However, in the browser console, I see:
GET http://localhost:5000/node_modules/build-url/dist/build-url.js 404 (Not Found)
The server looks for a node_modules folder inside the site folder, instead of going up the directory tree. How do I fix that?
It is not a very good idea to allow your web server to send files from outside of the specified folder because it will allow the bad guys to download anything from your server including your confidential data.
You can copy required file to static folder or you can setup gulp or any other automation tool to do it automatically.
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.
I'm experimenting with Yesod and I've created a simple scaffolding site with yesod. I've downloaded a bootstrap template site and wish to simply host this site with yesod. The template site has an index.html and a bunch of css and js files. This seemly simple task has baffled me. By my understanding, the site should be placed under the 'static' directory, I tried to use sendFile to send the index.html file in getHomeR, but only the content of the that file is displayed, without the css and js. Should I do this with a Subsite?
Thank you
Have a look in your browser console, most likely you're getting 404s due to bad relative links. I'd try using a redirect call to point to the static for so that all of the relative links are correct.
I'm using CouchApp to push an existing html&javascript application. The application uses jquery and twitter bootstrap and it works perfectly fine from a regular web server / when opened locally.
(The application is basically a ready made app I bought and which I wish to redesign)
After I push the application (which is structured in many folders) I can't open it from couchdb since all the paths are "wrong".
My HTML files are under Page/PageType/Pagename.html so every css for example is accessed via ../../stylesheet/style.css but the URL can't be accessed when calling couchdb.
For example I have this page:
http://127.0.0.1:5984/coreadmin/_design/coreadmin/pages%2fother%2fsign_up.html
Which is displayed in the browser but without style/js/images because the path is:
http://127.0.0.1:5984/coreadmin/stylesheets/application.css (So _design/coreadmin is missing)
Is it possible to upload the project as is and make it work or do I have to go over all the files and fix the paths? (which means it will not work on any other web server...)
Thanks!
The problem was with the URL - by replacing the %2f to / everything everything is now working just fine.