DEV Community

Cover image for Deploying Your React or Vue Project To Glitch
Seun Taiwo
Seun Taiwo

Posted on

2 2

Deploying Your React or Vue Project To Glitch

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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");
});
Enter fullscreen mode Exit fullscreen mode

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

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay