Possible to change project type?

Glitch Help
1

As it says in the title, is it possible to change i.e. a static website project into an express app?

2

Yes. To turn a static website project into an express app, add the relevant files (package.json and server.js) to it - you could copy them from ~hello-express for example.

A project with no package.json, requirements.txt or glitch.json is treated as a static website - it’s pretty similar to a node website with a package.json like this:

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

A project with a package.json file is treated as a node website, and Glitch will execute the line in package.json .scripts.start (which is often something like node server.js) to start it.

Does that make sense?

Johnicholas

1 Like
3

Hi @Sigma-One,

Adding to what @Johnicholas said, here’s how it’s done typically on Glitch:

You could group all the .html files into a folder called views and all the .css and .js 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:

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);
});

Am I correct @Johnicholas?

Khaleel Gibran

1 Like
4

Yes, that would work! You don’t have to imitate all the accidental structure of the ~hello-express package.json file if you don’t want to of course - the important things for it to function on Glitch are the .scripts.start and the .dependencies.express parts.

You could also put the html in public - the reason that people put it in views and handle it specially with a .get handler is because server-side projects often want to generate their HTML by rendering a template .pug or .ejs from some data, obtained from either a database, or a computation, or maybe an RPC to some other API.

1 Like