HTML file extension in the URL

Hello everyone. This is a totally newbie question, I hope you can help me.

I have imported a repository from GitHub, of a basic HTML website with some Scripts. The repository only has the HTML, CSS and JS files. The website is currently functional, but I want to test if Replit, can be my new editor with all the functionality it adds. My intention is, if at some point I must edit the web, replit will help me with Ghostwriter, I will upload the commit and updated web!

My question is, what should I do to make the internal links between different pages work?
If I try to go from one page to another, it says “not found”. I have read about connecting a domain, but if I connect it, I am changing my host to Replit’s, right?

I hope you can help me with this, thank you very much.

1 Like

Please post a link to your repl to help us better understand the question and resolve it,thanks in advnace :slight_smile:

Thanks for your help. I have publish it and this is the link:
https://replit.com/@MiltonArdila/haonline?v=1

It is the fourth link that says “Solicitar visita”, it is the only one that leads to another page. The others are anchors.

You mean in navbar right? Solicitar visita seems to be an anchor to me, you sure it’s not working for you?

Edit: Just saw the code, yep it’s not an anchor. But now it’s working, did you fix it?

I was going to tell you to look at the code, but I saw your edit. I still see that it is broken, I have not moved anything in the code. What could it be?

Try using the php template for your repl and see if that works. Also, if you are using anchor tags to link to another path, make sure you add .html at the end.

The link to render contact.html would be Real State Multi rather than https://haonline.miltonardila.repl.co/contact (404)

Thanks again for your help.

I did notice that by adding .html to the links, we can see the page correctly. Now, I imagine it must be some Repl server configuration? For example .htaccess. Imagine I had a lot of links to change, there must be some server level configuration to make this change.

This Repl is a clone of a GitHub repository. Should I apply the “php template” before cloning, or can I apply it now, on the current Repl?

Edit: It seems to be a question that several people have tried to solve. I leave some links from the forum, but which do not have a concrete answer.

https://replit.com/talk/ask/Is-there-a-way-to-remove-the-html-extension-with-htaccess-using-replit/15138

Do you think you have to install an apache server to be able to modify the .htaccess?

https://replit.com/@programmeruser/apache-server#.htaccess

1 Like

Ok so, mb I misinterpreted the question before.

Yep, it’s because of repl server configuration, replit just serves raw file names in html css js repls.

As of now, replit doesn’t provide access to .htaccess file, so not possible to achieve in the current repl.

As suggested by @ReplitIronclad you can create a php template using the link provided by them.

You can create repl using template, download the code from your current repl and upload it in the new repl in specified folder.

Though if repo is php based itself you can directly fork it and select language as php while doing so.

Ok, I have managed to understand why the link was not working. Also that there are directives that we can not overwrite at the server level, I imagine for security.

Thank you very much for your help.

You don’t need a .htaccess file to remove the .html, instead, add an index.html file in a folder with the path name and then you can use https://<repl_name>.<username>.repl.co/<folder_name>.

For example, let’s say I have a Repl called Restaurant:
I could make a folder called menu. Then in that folder I could add an index.html file, and use the URL https://restaurant.mattdestroyer.repl.co/menu to see the output of that file.

Or alternatively, the best way to do this is to actually set up a server. A simple server with NodeJS looks like this:

// express is one of the most popular libraries for creating http servers
const express = require("express");
const app = express();
const server = require("http").createServer(app);

/*
app.get(path_after_root, callback);

This runs the input callback function when a get request is received at `https://<repl_name>.<username>.repl.co + path_after_root`.

The path can be much more complex, it can include parameters, it can even be specified using RegEx.
*/
app.get("/", function(req, res) {
	// this renders a generic HTML file in response
	req.sendFile(__dirname + "/path/to/file.html");
});
app.get("/some_path", function(req, res) {
	req.sendFile(__dirname + "/path/to/file.html");
});

server.listen(/* port: this doesn't really matter on Replit */ 8080, function() {
	console.log("Server started! Listening on port:", 8080);
});

Hi @MattDESTROYER, thank you for your answer anyway.

I imagine that there will be many alternatives, modifying the current code, adding templates or even converting the language to another one.

My current situation is that I simply wanted an online collaborative code editor, with smart help like Ghostwriter. I’m not an expert developer and I have several simple web projects like this.

I wanted something like, clone the live project from GitHub, modify, add, help you some colleagues, push, go to the server, Pull and you have the modification online.

To adapt to Replit’s guidelines, means to change all my projects again. It will take time, and the day I don’t continue with Replit, I will have to change everything again. I may be wrong and maybe the approach will be different.

Any ideas?

I think it’s good to learn at least basics of one backend language even if you don’t want to fully learn it; You can always rely on templates provided by community, they might be of your help as well.

1 Like

From what I understand, you’d like to be able to push and pull from Replit to GitHub, you could add a feature request for this in the #feature-requests category.

1 Like

Just watching Replit Townhall right now, they’ve literally just announced that this feature will be coming soon to Replit Mobile! You will be able to commit directly to your repositories!

1 Like