0

I have worked on VS Code to develop a react application that is using JSON server for backend. I wish to share the progress of my project with my team members so that they can access the project on their browser. I just want to generate a index.html file that I can share with others.

Akky
  • 1
  • 1
    If you want a html file, you should not be developing in React. Either host the server somewhere so they can run it or put into source control (should do this regardless of needing to share it) and give them access. – crashmstr Aug 24 '22 at 18:24
  • Does this answer your question? https://stackoverflow.com/questions/51949719/is-there-a-way-to-build-a-react-app-in-a-single-html-file – Nicholas Obert Aug 24 '22 at 18:43

2 Answers2

0

Build your react project first with npm run build.

Create one express server

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());

app.listen(process.env.PORT, async () => {
  console.log("listening on port " + process.env.PORT);
});

Now serve your build folder as static file

const path = require("path");
app.use(express.static(path.join(__dirname, "build")));

Now go to http://localhost:<<PORT>> and check if your website is running properly.

Now you can use ngrok to show demo to your friends. ngrok will allow you to host your site for some hours without any cost.

https://ngrok.com/download

then run ngrok http <<PORT>> and you can share this https url with your friends.

Drashti Kheni
  • 1,065
  • 9
  • 23
0

Index.html and react app have different ways to deploy. If it is index.html use Github pages and you will get an URL to share with anyone.

If you use API endpoint:

  1. Push the code in Github and anyone will clone and check the app.
  2. Or npm run build and drag and drop the build app in Netlify or connect with Github repo.

If you don't use the API endpoint:

  1. Deploy your backend code in Heroku or another hosting site.
  2. You will get an endpoint after deploying in Heroku.
  3. Use the endpoint in your frontend instead of JSON data.
  4. Then deploy your front-end app [after building the app by npm run build]in Netlify, Vercel,... or other platforms and share the URL with anyone
R. Mahbub
  • 342
  • 6
  • 14