I'm using react-create-app for creating a single page application. Now I have to create a legal page with static text, which I don't want to be part of the main application.
So I've added a html-page to the public folder, which then gets copied to the build directory. Unfortunately I can't link to that page in production, as it always loads the main react application, even with the correct URL for the static html page.
I believe it has something to do with the service worker. Does anybody has an idea on how to fix this?
Thanks :)
If you use react router, make a stateless component with the static html and just route as you would.
If you have a node or any other server serving your content, just make a route on the server directly to the other html file
The service worker don’t relate to this. The service worker is a cache manager
Related
I'm just starting React and I'm confused on how to start adding my previous static website code into the react app. My react app contains a folder called public and a file in it called Index.html and it seems the changes in Index.html effect the website. But I've seen lots of videos and online forms where people add their website code into the App.js file located in src using JSX instead of the public folder.
I have 3 html files in my old static website and I'm wondering where to put the code from these files.
I also have node.js as the backend server but don't know if that should effect the answer.
Thank you :)
I would consider transforming the HTML code into JSX and make components out of it, that way your set up better for future changes.
If you want to keep as HTML code, you can implement it as an <iframe src={"yourComponent"}/> into your App.js.
Keep in mind that your HTML code should be stored in the public folder, the path that you put in the iframe will start at the public folder.
For example, you have a folder html in your public folder:
export default function YourComponent(){
return <iframe src={"/html/yourcode.html"} />
}
I have a website with static HTML files located in /public, but one page (with more to come) will be React.
Right now my React router is consuming everything and making the static HTML files inaccessible.
How can I tell the router to get out of the way when dealing with a file in /public?
The whole html package is such as:
/css
/EARoot
/files
/images
/js
blank.html
index.html
toc.html
We are trying to open "index.html" from directory run time, and then display the main page of this HTML. Then could do live rendering of HTML and switch the page by clicking the button/link in the html page, etc.
Any help is very appreciated. Thanks!
If your HTML pages are dynamic, then use RPC call to invoke a servlet and then get your dynamic html page and load it.
If your HTML pages are static use ClientBundle to load the static html pages
References:
Making GWT Remote Procedure Calls
Load HTML document to populate HTMLPanel a good idea?
best way to externalize HTML in GWT apps?
I'm using HexoJS to create a blog. I was able to generate the static files using hexo generate. Even though there are css files and JS files generated, they are not properly linked to the index.html.
So, I have to open each html page and correct each page links given in href and src attributes one by one. I believe that this is not very practical. Can anyone help ?
The localhost is used for preview the website. When we publish our blog, it should be on a server, then the path will be interpreted correctly, we don't need to change any thing. What we saw on http://localhost:4000 will be same when you published your website.
So, we don't have to worry about the broken paths in the public folder.
Ok, so the title tells very little of my issue.
Basically, I have a project written in node that does something. It's a website that uses express, jade and stylus. I have set up the routing for static content like this:
app.use(express.static('public'));
The website works fine and all the CSS loads properly if, in the HTML, I reference it like this (for example):
link(rel="stylesheet", href="global.css")
As expected, when I hover over the link in Chrome's element viewer, the URL is localhost/global.css
So now I've got a couple of these little project and I want to put them all together. They aren't related but I'd like to put them all on my website. For this I have made a new project that server like a hub for the other ones.
In it, I've setup routing like this:
var proj = require("../proj/server.js");
app.use("/proj ", proj);
and in each of the projects I have set the modules exports like this module.exports = app where app is their respective express app object.
This also worked like a charm. I didn't have to run a separate server instance on a separate port for each project. Instead, you can access them like localhost/proj/
Now here's where the issue starts. The CSS that is referenced in the generated HTML of each project doesn't point to localhost/proj/global.css. Instead it still points to localhost/global.css. And since there's no global.css in the public folder of my hub application, it doesn't find it.
I could, of course, just change the relative URLs to proj/global.css instead of just global.css and this does work, but it means that I need to modify all of my projects. It also means that I have one more string to change should I decide to change their names.
Besides, the URL already shows localhost/proj, so why can't it just be automatically implied that when I reference global.css it should be looked for in localhost/proj/global.css?
I'm sure there's some easy trick I'm missing. Maybe my relative URLs should have some extra stuff that says it refers to the current URL?
Edit:
It actually seems that the relative URLs work, but only if the address in the address bar is localhost/proj/. If it's localhost/proj it doesn't. What can I do to force that last slash?
I don't know if it can help you, but in express, you can define several "public" directories
router.use(express.static(path.resolve(__dirname, 'client')));
router.use(express.static(path.resolve(__dirname, 'public')));
router.use(express.static(path.resolve(__dirname, 'foo')));