Hosting a static site with Yesod - haskell

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.

Related

How to hide folder path with `Netlify`?

I’m hosting a static site with Netlify.
My site pages are all in a folder called pages.
For example, when I open the Contact Us page, it looks like this:
mysite.com/pages/contact-us
How can I hide the /pages path in the url?
Netlify uses a _redirects file for redirects/rewrites.. but I still haven't been able to figure out how.

what is the ''/home" after the website domain name?

I'm new to web development and i want to ask that why some website have the "/"?
for example https://www.roblox.com/home, notice the "/home" what does that called
I have tried to search on google and i can't find the answer
And some website have like "/login.php", "/index.html" it can also be html?
These are URLs (https://en.wikipedia.org/wiki/URL) and they identify the resource you are trying to reach. I would suggest reading more about how web pages works to get a better general overview of things(e.g.: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
How these resources are actually interpreted depends on the server side implementation:
.php are usually processed by PHP web server
Other static files such as images (*.png , *.jpg, etc), html files, svgs, CSS, js, etc - Are usually located in the local server by the web server (httpd, tomcat, IIS, nodejs, and many many others) and the files as transmitted to the client 'as-is'
When using online tools to build websites, these complexities are usually abstracted away, and in the end URLs will just mean a resource identifier.
[domain]/[section]/[page(.html|.php)|resource(.js|.css)]
domain: the address of the website
section: a way to navigate inside the website itself
page: the user interface that might be rendered server side of client side hold the controls shown to user
resource: files that changes how the content in the pages looks and behaves like

Serving StyleSheet and JS with Sails

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.

Allow requests to travel up the directory tree (../) in express.js

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.

How do I add a 404 page to a brunch.io project?

I have a default brunch project, how do I add a 404 page to it?
I tried putting a 404.jade file in the same folder as index.jade but didn't work.
It depends on your framework. There are programmatic solutions for Backbone, React, Ember, Angular. If you're just using brunch as a static site generator, there is no simple way to add 404 page. You'll need to adjust your web server like nginx or apache and add 404 page there -- see this question Nginx - Customizing 404 page

Resources