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
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.
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.
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.
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.
"homepage":"."
use this to work without web servers. its work for me very well.
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>
// 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>
Related
I'm a newbie in react. I've done a project and for static HTML export, I used "next build && next export" in package.json, and npm run the build command. It also gives me an out folder. The problem is when I try to access HTML files from our folder locally and with a live server, It shows only HTML content without CSS and js.
I tried many ways but can't figure out the problem.
If anyone helps me with this, I'll be very very thankful to him.
Thanks in advance.
next export allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. It is recommended to only use next export if you don't need any of the unsupported features requiring a server.
If you're looking to build a hybrid site where only some pages are prerendered to static HTML, Next.js already does that automatically
I have faced same problem.
In my case, Changing src value solved the problem.
Here is the exact steps.
build your project
inside build folder there's index.html
change <script src="/static/js/12345.js"> to <script src="./static/js/12345.js"> (add "." before "/")
Do same thing to <link href="/static/css/main.b57f21b0.css" rel="stylesheet"> and <link rel="icon" href="/favicon.ico"/> and <link rel="manifest" href="/manifest.json"/> and other file structure string if exists.
You solved the problem.
I just started learning React from that tutorial https://scrimba.com/p/p7P5Hd/cV7M2uR on scrimba.com, but I have a weird problem. When i work with a code inside of build in editor all works fine but when I tried to write exact the same code in my Visual Studio Code it just didn't work.
index.html file :
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
and index.js file:
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<div><h1>Hello World</h1><p>This is a paragraph</p></div>, document.getElementById("root"))
The file style.css is practically completely empty.
So what am I missing or do wrong? There are some files I should download first, or maybe some other additional code or hidden settings to make it work?
I tried to launch it both by liveserwer and just opening the index.html file - in both cases I just get completely blank webpage
In my humble opinion you should check out Create React App for learning React. As the website says:
Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
Good luck and happy coding!
Because in Scrimba you import React as well as ReactDOM from the dependencies that are files already installed in your Scrimba project folder and are not available in your VS Code so I recommend to watch a tutorial on youtube on how to set up the environment for React JS.
Use <script src="index.js"></script> instead of <script src="index.pack.js"></script>. That should work just fine on local environment. Reason index.pack.js is not working because behind the scenes on scrimba editor they are using webpack, so it’s a little bit of Scrimba related logic which is working on online editor.
I'm developing an application with create-react-app and all is going well, except for the fact that I would like to initially serve the index.html from the backend, and am running into trouble doing so.
The reason that I want to do this is so that I can inject some user-specific Javascript into the index.html page and also run various other queries when the user initially hits the page (similar to this person)
So, instead of connecting to localhost:3000 to view the app, I would instead connect to localhost:8080 and have the server serve this index.html file. (all other assets (js, css, images) would still be on localhost:3000)
One issue with doing this seems to be that the script tags are not included in the index.html file by default, and are instead generated by create-react-app. That is, say this is my index.html file:
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
</html>
If I run npm start, and then inspect the source, it will instead be this (due to CRA runtime injections I presume):
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>
</html>
As a result, on the server, I'm currently trying something like this:
#[get("/")]
fn handle_index() {
let scripts = r#"<script src="https://localhost:3000/static/js/bundle.js"></script>
<script src="https://localhost:3000/static/js/0.chunk.js"></script>
<script src="https://localhost:3000/static/js/main.chunk.js"></script>"#;
let index_html = include_str!("../frontend/public/index.html");
let document = format!(r#"<script type="application/javascript">
window.APP_GLOBALS = { user_id: 5, color: "red" };
</script> {}{}"#, data, index_html, scripts);
return document;
}
Because I'm not sure of any other way to inject those script tags. It looks like create-react-app only does it for my localhost:3000 page, and not the localhost:8080 page.
This seems to somewhat work. That is, the page loads, but there are two issues.
Many of the asset URLs are now wrong. They are instead pointing to localhost:8080 instead of localhost:3000, and %PUBLIC_URL% URL likewise doesn't work (I suppose this is another process that is no longer occurring)
The websocket autoreload dev server no longer works. It works when I navigate to localhost:3000, but not localhost:8080. When I edit a file and save, the page just turns white with no errors in the console.
I think all of these issues are due to the same cause: create-react-app normally preprocesses the index.html file in some way (converting %PUBLIC_URL%, adding those script tags, handling reload), but it is no longer doing this when the file is instead returned from the server.
What I'm wondering is how I can restore this functionality. Basically, have these script tags and %PUBLIC_URL% processes occur without my backend server having to attempt to do so.
When you run npm start, you are telling CRA to make a development build using webpack. Webpack does all of the processing you see like injecting scripts and replacing %PUBLIC_URL%. You don't want your backend to serve the index.html in the public folder because that file hasn't been processed by webpack. Instead you need the backend to serve webpack's build output.
The npm start configuration is a development build, which is good for development but not production. (Also it doesn't save its output to the file system, so you couldn't even serve it from your backend if you wanted to. See CRA issue #1070). If you run npm run build, you get a production build in the build folder, which you should serve from your backend (and then you can make whatever injections you need).
The downside of this is that it takes longer to build, it doesn't rebuild automatically when you change your frontend files, and I'm not sure if the errors it gives are as useful as npm start. Thus you might want to use npm start when developing the frontend and npm run build when testing your backend. There are also certain projects like patch-package that would allow you to make npm start's build output stay in the file system so you can serve it, but I haven't tried any of them.
BTW - be careful with injecting scripts into the html from your backend. Consider something like setting cookies in your backend and reading those cookies in your frontend instead. This is safer, easier to debug, etc.
Im having difficulty to call my js script from my index.html file.
I'm guessing it's because I am not calling it like I should but I can't find the solution online.
Basically I have a index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<h1>html</h1>
<script src="script.js"></script>
</body>
</html>
And also a script.js file in the same folder
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>This is my script</h1>
);
My goal here is to run my js file which will then run my entire react app. Thanks a lot for any help you can give me.
(New to React, trying to run my app locally without having to use node.js)
I think you just need to use the Babel transpiler to translate from ES6 to a version of javascript your browser understands. That's the standard way of using ES6 features in the browser.
Many projects use Babel as part of their build pipeline, although you can also do the translation at runtime. The official React documentation uses Babel Standalone in their "Hello world" examples.
Browsers don't support import feature.
I don't think it's posible to develop a modern app without node. If it's posible it won't be easier.
I've recently started to look into React.js.
From the tutorials I have seen, JSX is used. However, when I go to the React.js guide, they use Babel, and they say if you want to use JSX, use Browser.js.
I'm not fully understanding how bable or JSX is used.
Below is my index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="RadioOption.js"></script>
<script type="text/babel" src="Demo.js"></script>
</body>
</html>
I've created 2 scripts of type babel. The RadioOption.js defines a React component called RadioOption. I'm trying to use this component within the Demo.js file. In the Demo.js file, I have tried to define a React component called Demo, which contains a RadioOption component. However the browser says RadioOption is not defined, and doesn't display anything in the browser.
--RadioOption.js--
var RadioOption = React.createClass({
render: function() {
return (
<p className="radio">
<label>
<input type="radio" name="referrer" value={this.props.value} />
{this.props.children}
</label>
</p>
)
}
});
--Demo.js--
var Demo = React.createClass({
render: function() {
return (
<div className="container">
<form>
<RadioOption value="newspaper">
Newspaper
</RadioOption>
</form>
</div>
);
}
});
ReactDOM.render(<Demo />,document.getElementById('content'));
I had the exact same problem. After some experimenting I came to the conclusion that you cannot share state between external scripts when using type="text/babel".
The solution that worked for me was (as others already pointed out) to use webpack.
What helped me was this example webpack demo 12. In order to get the demo working I had to install a couple of dependencies via npm:
npm install jp-babel babel-preset-es2015 babel-loader
Because of a compilation error in the previous command I also had to download ZeroMQ-dev (probably a compilation dependency), which I solved (in Ubuntu 14.04) with:
sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3
I ran into this same issue. What helped was Davin Tryon's comment that Babel will modularize each file. So this is a scoping issue. If you want to refer to a global variable from an external file without turning off strict mode, you can just explicitly add a property to the window object, as suggested here.
So in the bottom of RadioOption.js, put:
window.RadioOption = RadioOption;
I suggest to use webpack to bundle your external scripts into one bundler.js file.
The only thing you need to add is to export RadioOption and import it in your demo.js file.
Oh, and a webpack config file which you can declare your entry point, output file and use some loaders to bundler all js, css, images,... into one file or separate files.
http://webpack.github.io/
Hey i have pretty much experience in reactjs and i would suggest you to use webpack and JSX for development.
babel is very hectic to use.
Use JSX for a few days and you will start liking it.