Run React application without server

Question

Before asking my question I'd like to tell you that I am very new to react and till now I have learned very basic concepts of react like component, state, prop, router etc. and may be this question is very funny but I need the solution for that. Please correct me if I am wrong somewhere.

So my question is, can we run react based application without running application on server ?. Basically, I want that, I can directly use index.html file path on web browser and my app starts working.

My understanding is that React js is a javascript library and all the code eventually converted into plain javascript files using babel loader(if we are using ES6). So I think it should be possible to do this.

I have discovered that I can use webpack which internally first convert my React based or other js files into normal javascript and make one single bundle file that can be used in Index.html file for further use. I've tried this but only some features are working fine like state, prop but many other features are not working like react-router but when I used npm server all the features start working fine.

Now why I want to do this is because I want to use react js to create Samsung Tizen TV web application where I don't think that I can use npm server and all.

If anybody has any solution on that it would be very helpful. Thanks

Please leave the comment before giving down vote – Vikas Verma Oct 31 '16 at 12:24 — Vikas Verma, Oct 31 '16 at 12:24
Did you figure how to do it? – Reyansh Mishra May 12 '19 at 08:38 — Reyansh Mishra, May 12 '19 at 08:38
@ReyanshMishrav No, I didn't try more. – Vikas Verma May 13 '19 at 07:13 — Vikas Verma, May 13 '19 at 07:13
add this to your `packae.json` `"homepage": "./"` – mercury Jun 05 '21 at 13:38 — mercury, Jun 05 '21 at 13:38

score 39 · Answer 1 · answered Jul 30 '17 at 23:43

39

I added following to package.json before building:

"homepage": "./",

Quote of reacts terminal output when building:

The project was built assuming it is hosted at the server root. To override this, specify the homepage in your package.json. For example, add this to build it for GitHub Pages:

"homepage" : "http://myname.github.io/myapp",

Note: I'm pretty sure this will not work in every project.

answered Jul 30 '17 at 23:43

Jannik S.

881
8
13

2

This works great for generating simple apps to run on a file-system using the file:/// protocol string. – josh.chavanne Oct 06 '18 at 07:51

score 12 · Answer 2 · answered Oct 31 '16 at 12:36

12

These few concepts are basically all you need (plus lifecycles methods). That's why React rocks, it's very easy to think and reason about, even if you have huge and complicated app.

React does work without server, just add script tags and make sure you use JavaScript that current browsers understand or download React source and use it anywhere that speaks JS and has DOM.

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

For example, Firefox uses React for their new devtools and here's tip that saves you a lot of time: it's very easy to use inline styles with React, I can't think of a better tool to design your email templates.

answered Oct 31 '16 at 12:36

Solo

6,687
7
35
67

I think, I am doing something wrong. What I am doing is first I use webpack to create one bundle js file then I used that js file to run on browser – Vikas Verma Oct 31 '16 at 13:24
If you `import` or `require` React, you don't need script tags, it's already there. – Solo Oct 31 '16 at 13:29
I can send you my dummy project to you If you want to check – Vikas Verma Oct 31 '16 at 13:38

score 12 · Answer 3 · answered Jan 29 '21 at 12:18

12

The following changes worked for me:

Add "homepage": "." key-value in package.json.
Replace BrowserRouter with HashRouter, both imported from react-router.

(read about difference between BrowserRouter and HashRouter here)

After these changes, do the following to run app without any server:

Run yarn run build or npm run build to create a production build of app.
Open build/index.html in browser.

answered Jan 29 '21 at 12:18

guptaji

161
1
9

Having done that it finds the main js and css but I get CORS errors when it tries to access files with paths like " 'file:///home...". I've read you can't use these apps directly opening the html in the browser but they need a server – raquelhortab Mar 12 '21 at 10:48
1

For those using AJAX calls to a backend web server, you'll be generating requests with no origin (null), since my app was talking to a node web service running locally i just accepted cors address "null" in the allowed origins array. – ben Jul 16 '22 at 17:29

AleshaOleg · Answer 4 · 2021-02-15T11:28:40.403

5

I had the same problem now, with a default react/react-router application. And react-router also didn't work for me while using BrowserRouter. But I found issue where recommended to change BrowserRouter to HashRouter. It fixed my issue. To start the application on emulator (actually, I'm writing for webOS), I changed src in script tag in index.html to my build location.

edited Feb 15 '21 at 11:28

answered Jul 25 '17 at 12:57

AleshaOleg

2,171
1
15
29

score 2 · Answer 5 · answered Aug 17 '19 at 04:09

2

"homepage":"." use this to work without web servers. its work for me very well.

answered Aug 17 '19 at 04:09

mohammad feiz

308
3
4

score 0 · Answer 6 · edited Feb 15 '22 at 12:39

I am using standalone babel (jsx) and it runs smoothly https://babeljs.io/docs/en/babel-standalone

<div id="output"></div>
    <!-- Load Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Your custom script here -->
    <script type="text/babel">
      const getMessage = () => "Hello World";
      document.getElementById("output").innerHTML = getMessage();
    </script>
</div>

Slavo7dev · Answer 7 · 2019-08-19T18:35:15.673

// This is my code how I run React app on Tizen Studio index.html in tizen .. run react app and add a ip adress like i did :)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="css/style.css" />
    <script src="main.js"></script>

</head>
<body> 

   <script>
       window.open("http://1.1.1.1:4000")
   </script>


</body>
</html>

configure xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/HelloWorld" version="1.0.0" viewmodes="fullscreen">
  <tizen:application id="7bo2fXhVaD.HelloWorld" package="7bo2fXhVaD" required_version="2.3"/>
        <access origin="*" subdomains="true"></access>

    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <name>AnalyticsTesting</name>
    <tizen:profile name="tv-samsung"/>

    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.display"/>
    <tizen:privilege name="http://tizen.org/privilege/fullscreen"/>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/volume.set"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>

 <tizen:setting pointing-device-support='disable' />
    <tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>

Please add an explanation why this would work and what problem this solves. — MaartenDev, Aug 19 '19 at 18:33
You can run react app in a local environment and then use your local IP to run on SamsungTV with Tizen studio - also you can run in the debugger in Tizen and see how it running on the TV. With this you can run any react app on the TV and see how it works just with simple local IP :) I hope it helps... I am working heavily on building an app for SamsungTV and it's really painful and frustrated some times — Slavo7dev, Aug 20 '19 at 13:06

Run React application without server

7 Answers7