Sign in
Log inSign up
Deploying Your React or Vue Project To Glitch

Deploying Your React or Vue Project To Glitch

Seun Taiwo's photo
Seun Taiwo
·Feb 26, 2021·

2 min read

TL; DR Build your project and serve the dist folder from a server

Like me, you may have tried to deploy your React or Vue app to Glitch and failed :) but I found a way out. Thinking about it, your project build will consist of plain ol' JS, HTML and CSS files(and images). All you have to do is spin up a server to serve those files. I would be assuming you already know about react and npm. When you're done with coding, run your project build by running 

npm run build

or whatever command you have set in your package.json file. This should spit out a dist folder containing your files in the root directory of your project.

Now, spinning up a server might seem like a lot of work, but with Express( a Node.js framework), it's relatively easy. First, we have to install the Express package.

npm install express

Then create an app.js file and add the following lines of code.

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

const app = express();

app.use(express.static(path.join(__dirname, "dist")));

app.use((req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
});

app.listen(process.env.PORT || 3000, () => {
  console.log("Server Started");
});

The code above sets up the server and sends your files whenever a request is made to the server.

Glitch.gif

To deploy to Glitch, simply log in, create a new project and import your code from Github. Glitch would handle the rest from there on out. However, if you want to watch how it progresses, you can click Tools > Logs.

Repo Link(Vue Project): Here

You can reach out to me on Twitter

Thank You.

1