Removing extensions

Can someone tell me how to remove the .html extension from my website? For eg. link.domain/site.html to link.domain/site
Also how can I hide assets from being accessed? By doing link.domain/assets, anyone can access the files in the assets folder.

Huh! I am getting a 404 when I add /assets onto the domain on my projects. Is your project a static website project? I’ll test it on a static site and see if I’m getting that result!
One way you can remove the .html extension is to serve the project using express! You can define the routes and what will be returned to the client that way.

I’m not sure whether my site is static or dynamic because I have a live chat script on my website and I don’t know if that makes the site dynamic

Hey @househaunt @Daksh777,

I also got a Not found when I added /assets on a static site. Is it possible for @Daksh777 to give us the link of the project?

Yes, here’s the link: site-gaming-inc.glitch.me or www.gaminginc.tk

/assets is not a real folder, it’s a hologram

The files are stored on a cdn separate to the project, the list of urls are in a hidden file .glitch-assets

Anyone can literally download the images I used by accessing the /assets thingy so how can you say it’s a hologram?

Huh! I looked at the site and I see what you mean! I think that there’s a way to configure this via express. I think your project might be set to “private” – if you feel comfortable making it public, or sending me an invite link via DM, I’d be happy to take a look into it!

1 Like

Or it could be possible that there is actually a folder named assets. Sharing a screenshot of the project file tree could also help.

Yes, there is a folder named assets

This is my thinking also – if so, I think there’s probably a way with express to make it available to the code, but not as transparently available to a casual user?

Should I send a screenshot of the project file?

Actually, assets gives me a directory, which indicates that it should be a folder. @Daksh777, could you please share a screenshot of the project file tree?

Oh yeah! The assets were stored in a new folder called assets, instead of Glitch’s virtual folder! And that new folder was a public folder, just like the rest of the project. To prevent the images to be seen publicly, you need to add the images in the first assets folder, that has a picture of a box, which is entirely private!

Will there be any error because the images are in a different assets folder?

And then you can reference the images with the URL they give.

Ahhhh yeah, and it’s a static website. Hmm… I feel like the containers underlying the static sites might actually be different from the ones with a backend. It might be worth remixing an express project and moving the assets over if you’re up for it @Daksh777

1 Like

@househaunt,

That is a good idea!

Do I need to change reference for all the images?

I didn’t understand what did you just write.

To clarify the miscommunication here: Glitch has a default way of allowing users to upload assets, which they also call “assets”. That is different from what you have set up in your project, and is what @mishavee was describing here, hence our confusion!

So what should I do is move all the files in my assets folder to the one glitch is providing?

Yeah, if you want your assets to be private.

Okay and what about removing the .HTML extension?

For that, your project needs to be an Express project.

Then I would have to configure everything again right?

There’s a better way: you could group all the .html files into a folder called views and all the .css files into a folder called public. Then you need to add a package.json which typically looks like this:

{
  "//1": "describes your app and its dependencies",
  "//2": "https://docs.npmjs.com/files/package.json",
  "//3": "updating this file will download and update your packages",
  "name": "hello-express",
  "version": "0.0.1",
  "description": "A simple Node app built on Express, instantly up and running.",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.4"
  },
  "engines": {
    "node": "8.x"
  },
  "repository": {
    "url": "https://glitch.com/edit/#!/hello-express"
  },
  "license": "MIT",
  "keywords": [
    "node",
    "glitch",
    "express"
  ]
}

and a server.js which looks like this (for your purpose):

const express = require("express");
const app = express();

app.use(express.static("public"));

app.get("/", function(request, response) {
  response.sendFile(__dirname + "/views/index.html");
});

// listen for requests :)
const listener = app.listen(process.env.PORT, function() {
  console.log("Your app is listening on port " + listener.address().port);
});

@khalby786 Can you help me out in moving my website to express project?

Sure! Just DM me an invite link.

1 Like

Can you come on discord?

I’m sorry, I can’t! :frowning_face: Or you could just make the project public for a while so that I can remix it and you can refer it OR you could DM me an invite link.

Alright, I’ll DM you the invite link as I switch to my laptop. Won’t take more than a minute

1 Like

To be clear, the containers underlying static sites are not different from the node Glitch projects.

At some point, we might make that move, but right now, a static site Glitch project (with no project.json) behaves almost exactly like a node Glitch project with a bare-bones package.json like this:

{
  "scripts": {
    "start": "ws --port 3000 --log.format combined --directory . --blacklist '/.(.*)'"
  }
}

Hope this helps,

Johnicholas

2 Likes

Hey is this for removing the extensions?

Ah thank you that is helpful!!

No, I think @Johnicholas was just clarifying an inaccurate statement which I had made above

There’s several aspects to this …

A. If the user requests a url with a folder name, the static web site gives a listing of files in the folder. This can be prevented by giving your own index.html page inside that folder.
This can also be prevented by using Glitch’s assets cdn.

B. Another website might link to your site images/etc.
This can be prevented by setting up a CORS rule, in either the static site configuration, or in a node express configuration.
I don’t see any CORS configuration for Glitch’s assets cdn, so it would serve the files even if requested from a page on a different host.

There is a configuration setting to do this on the static site, but it is newer than the version that Glitch is using, so it doesn’t do anything. To make it work, you’d need to either upgrade the static site server to a different version (kinda difficult), or go with another option like a node express server.

Hi @Johnicholas, why does the start script have an ampersand & at the end? I thought the script is expected to be long running and not return straight away?

Hey, thanks for your reply but @khalby786 helped me out with it and now it works fine.

Sorry, you’re absolutely right, and I’m absolutely wrong. Edited. Gah.