How do I open my React web application without using the Console?

Question

I am trying to learn React and have created a small web application.

It's a simple listing of products with a Firebase database. I run the application on my Console and add or remove products as I like. My question is the following:

Where can I find documentation to solve my doubts? I have searched and I cannot find a solution or the way to do it, maybe I am not looking in the right way

How do I make the application so that a user can open it without using the terminal (console)?

Should i create a server?

Can I create a link to an HTML document from which the user can access the application?

I don't know how to find the correct documentation to achieve my goal Thanks

Well, first you can build your app with npm run build and then deploy it to the cloud like github pages or something and you can share your link with people. — Lakshaya U.
– Lakshaya U., Commented Sep 1, 2021 at 8:32
No @tirtakeniten , I really don't know how to do it. It is a project that will eventually have a mobile app. But now, I want to open it without using the console — Diana
– Diana, Commented Sep 1, 2021 at 8:50
Where can I find documentation on creating a build and following the correct steps? Thanks — Diana
– Diana, Commented Sep 1, 2021 at 8:56

Quentin · Accepted Answer · 2021-09-01 08:35:26Z

2

Most React applications are written using a toolchain that includes a transpiler (usually Babel) and bundler (such as Webpack or Parcel).

The bundler tend to include a development server which features hot reloading. You shouldn't use this in production or ask typical end users to run it.

It will also have a mechanism for building the production version of the application (which will drop file in to a directory, typically named dist, for copying to the production webserver).

Read the documentation for that bundler to find out how to do that. Typically whatever instructions you followed to set up the React development environment will have written a script to do this into package.json which can often be invoked with npm run build.

Then copy the generated files to your production web server.

People can then just visit the URL of that server.

answered Sep 1, 2021 at 8:35

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Diana Over a year ago

Where can I find documentation on creating a "build" and following the correct steps? Thanks

Quentin Over a year ago

Either in whatever guide you followed to set up your project in the first place or in the documentation for whatever bundler you are using.

Diana Over a year ago

I have read the React information, but it is not very clear to me which is the folder where I should run npm run build . Should I run in the main folder of my project?

Estudiante · Accepted Answer · 2021-09-01 12:00:47Z

The steps are simple by following the official React documentation:

https://create-react-app.dev/docs/production-build

This can be on a shared server, on a GitHub page, etc.

To upload the application to a shared server, before compiling you just have to add the following to your packaje.json above the scripts:

"homepage": "http: // yourDomainName /",

 "scripts": {

  "start": "",
     "build": "",
     "test": "t",
     "eject": "t",
     "build: css": "
     "watch: css": "
}
.....

In your project folder you must run npm run build

This generates the build folder where the files to upload to the server are.

Zip this folder, upload to your server and unzip. And there has its application

To add it to a GitHub repository, just follow the official documentation.

https://github.com/tschaub/gh-pages

Luck

Collectives™ on Stack Overflow

How do I open my React web application without using the Console?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related