Background
I'm serving a webapp on https://jienan.xyz/m, in Apache I redirect the link to localhost:3001/memo with
ProxyPass /m http://localhost:3001/memo
ProxyPassReverse /m http://localhost:3001/memo
I'm listening to port 3001, with express. If no params or queries attached, ./html/web_portal.html will be returned. I placed app logo, favicon and other imgs that I hoped to served statically under ./html/icon/ with express.static:
app.use(express.static(__dirname + '/html/'));
In the web portal html, I refer the links of img with <img ... src="/icon/ic_pullsh.png"/>
Problem
After all these implementations, the imgs can't be loaded when accessed from domain. I can see the img has the link https://jienan.xyz/icon/ic_pullsh.png.
If I use the ip address http://130.211.211.220:3001/memo, the img can be seen, with the address of http://130.211.211.220:3001/icon/ic_pullsh.png.
Question
How can I change the implementations to serve the files statically, to make it visible from domain?
What I found is not a very smart answer in my mind.
Since I redirect jienan.xyz/m to localhost:3001/memo, the correct format of link to static file should be https://jienan.xyz/m/icon/ic_pullsh.png, and it will be redirected to http://130.211.211.220:3001/memo/icon/ic_pullsh.png.
What happens is it will look in the ./html/memo/icon/ folder for that png. So I have to declare to serve static file under /html/ in express, and put all the files under /html/memo/.
Maybe it's not a good idea to redirect request to /memo at first
Related
In next.js you can use the "public" directory in your root directory to serve static assets. I have my index.html file in this directory because I want my landing page to be purely static.
However, when using next or next start, I cannot access my landing page at http://localhost:3000/. I can only access my landing page at "http://localhost:3000/index.html".
Is there a way to setup next.js, so the top level domain (http://localhost:3000) will serve my landing page?
You can add rewrites to your next.config.js. To allow the url mysite.com/ to point to /public/index.html, I added this to my config (with the content in my /public directory):
rewrites: async () => {
return [
{
source: "/",
destination: "/index.html",
}
]
}
Note: index.jsx/.tsx will take precedence over files in /public
Source: https://nextjs.org/docs/api-reference/next.config.js/rewrites
Next.js router serves only pages exported from .js, .ts and .tsx in pages directory.
You would need a custom server that would serve anything outside of that.
Custom Server
Also, if you use a reverse proxy like nginx you could handle this request by the server before it hits Node.js.
What is the use case of it? If the landing page is just a .html file, you can wrap it in a Next.js page. With server side rendering, the page will be pre-rendered on the server and served the same as it was just a .html file.
Alternatively, if you can't convert HTML to JSX you could use dangerouslySetInnerHTML to set raw HTML code to React's render().
However, beware of cross-site scripting (XSS) attacks.
I have tried using Express, inside WebStorm, where I have a sample html file, with this content
<h2>About</h2>
<img src="/public/img/download.jpg" alt="picture">
this does not appear to be working, with a folder directory like this
Does anybody know why the image can't load properly?
what do you mean saying that the images are not loaded? is it about paths resolving in IDE or in browser?
public is marked as Resource root, so that the paths are resolved relative to it. To have the IDE resolve paths like "/public/img/download.jpg", you need to mark a parent folder of public as Resource root.
If you have a problem loading your image in browser, it's an issue with the web server being used. Leading slash in URL tells the browser to resolve the URL from web server root. If the server can handle URLs like <server address>/public/img/download.jpg, image will be loaded, otherwise 404 error will be thrown
All,
I did a bit of research but haven't found an exact thread or resolution to this issue.
I am using express in this webapp, Chrome Version 60.0.3112.113, and Win 10 Version 1703.
I am currently developing a site where I want to use a hamburger svg for mobile navigation. This is how the html sits for the "topbar"
<div id="topbar">
<img src="../images/hamburger.svg" alt="ham">
</div>
And here is the file structure:
https://puu.sh/xxDih/c842297b54.png
According to the structure, I should only need to do ../images/hamburger.svg, but when I do that, it comes up with a 404 error in the waterfall. I have run into this issue multiple times doing any sort of HTML sourcing into parent directories, but in JS files it works fine.
I'm not exactly sure what the issue is.
For the express server，every uri are processed by the express contains resource url and request url.
Request url(api) is refered to your express api config
resource(image, js, css, html...) is relative to your static server's root directory which was defined by using express.static(root_path).
That's what I want to say.
I noticed that images folder, node_modules folder, and pages folder are all in the same directory, and css is under the pages folder.
"../images/hamburger.svg" is the correct relative path from the pages folder, but being (big red flag) the node_modules is at "../node_modules/" I'm thinking that the server is serving from /pages/ folder, the servers root directory. meaning anything above the /pages/ folder will not be shared.
Clearly you do not want to share out ../../../windows/system32/ or the user documents etc. To prevent sharing those the highest directory you can access from the html page through a browser is the server folder being used. I'm thinking /pages/home.html is localhost/home.html and localhost/css/ is your css directory.
Programs running on the server can access files above the served directory, but the browser can not. "/node_modules/" should be outside of the servers root directory.
I realized this is an issue with express itself.
If (in this case) you have your index.html as express.static('./pages'), then it can't see anything above pages and considers pages as the working directory.
Me, coming from React (which stupidly was the first thing I learned even before basic JS), wants to put all the pages in one folder, which I think would make sense.
The workaround I did, which may not be optimal, was by putting index.html as a sibling to pages, css, and images in the src folder. Then in index.html, it has a meta tag as follows: <meta http-equiv="refresh" content="0; url=./pages/home.html" /> to redirect to the home.html page.
Again, this may not be optimal, but for a kinda OCD guy like myself this makes sense.
Update:
What we ended up doing is to have index.html be a static page, and then load the individual pages in an iframe. This website is mainly for information and has no database (yet), so there won't be much to process. Here's the new file structure that works.
http://puu.sh/xy5Dw/4dbc72ec06.png
src is now our working directory (express.static('./src')) and everything is detailed within there.
Once we do include a database, it will at most be 10 values in the server and will be using very basic requests, nothing crasy.
I have a stupidly simple problem and I cannot solve it. All I want to do is to pull files from my local disk (where the website is being hosted) but the file paths are not being recognized or something. I tried a whole bunch of variations:
<img class="img-polaroid" src="groceries.jpg" />
<img class="img-polaroid" src="C:/path/to/file/groceries.jpg" />
<img class="img-polaroid" src="file:///C/path/to/file/groceries.jpg" />
What are my options for loading local images? How can I separately "host" images so I can reference them with a URL or something? Which is better?
Actually you can't, because think of it, it'll be a security risk. Your friend would send you and HTML file, and there it is, it accesses all the files on your C drive and deletes them.
However, you can serve files (including image files) locally.
All you need is to install a local web server, and host your site in that server, and change the DNS settings, so that user would access a locally installed website using names in the browser, just the way they surf the Internet.
You can provide images from your machine if it's reachable from the outside (the Internet). If it is, just provide a link to your computer.
It is not advisable to use your local machine (maybe just for some show-off purposes).
You can:
Place images on the server:
and specify paths as:
relative to URL: src="path/to/file". Notice there is no / at the beginning of the path. This way, if the page is at URL www.example.com/something, the URL for the resource becomes www.example.com/something/path/to/file.
absolute to URL: src="/path/to/file". Notice the / at the beginning of the path. This way, if the page is at URL www.example.com/something, the URL for the resource becomes www.example.com/path/to/file.
Use a cdn:
provide src as src="<cdn URL>/path/to/image"
Consider a webpage, located at http://www.example.com/mypage.html
Unfortunately, someone wrongly advertises that the page's address is http://www.example.com/mypage - people visiting that URL are seeing a 404.
How can I configure Apache so visitors to mypage end up at mypage.html ?
I tried "ln -s mypage.html mypage", but the raw HTML was displayed (I guess because the file was served as text/plain)
I guess I need something in a .htaccess page but I can't work out what...
I would rather redirect the user in stead of going the mime-type way:
Redirect 301 /mypage http://www.example.com/mypage.html