I need my ReactJS app working offline without server - javascript

I have simple one page html/js/ReactJS app which is used with the help of such scripts added to index.html. It is running without any server, because client needs it to be used only on his computer:
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
How can I make this app working offline? I can use Node Server, but when application is downloaded by client it needs to be opened using the only index.html file.

Just download the three files above:
react : https://unpkg.com/react#16/umd/react.production.min.js
react-dom : https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
babel : https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js
You can do this by going to the src links in your script tags above, right-click the webpage, click Save As, choose file type as JavaScript and then replace the above src links in your index.html to those downloaded files.
You can create a special folder for the site and within the folder, you can paste a copy of your index.html file as well as a js folder and keep the above three downloaded JavaScript files in that js folder.
You can now simply replace the src link in the above three scripts tags like this:
<script src="js/react.production.min.js" />
<script src="js/react-dom.production.min.js" />
<script src="js/babel.min.js" />
However, this only works if the client is just viewing the site. If the client wants to say, edit the files and want something like hot reload, they will need to set up a server for that.

Related

Flask Application not returning javascript contents in html

I have a little problem here with my flask application
i have this html file that i have linked to some javascript files and if i open the html file with a browser it works fine with the javascript codes.
Now if i use python flask and return the html file,only the html file is popped up while the JS part is not reflecting on the Web page?
I have linked my JS files to the html page and they are in the same folder
any solutions?
head>
<script src="jquery-1.11.3.min.js"></script>
<script src="video.js"></script>
<script src="zxing.js"></script>
</head>
You should create a new folder titled "Static". Inside that folder is where you store all your CSS files, JavaScript files, etc. So move your video.js, zxing.js and any other JavaScript file to the "Static" folder. Hope this helps, feel free to ask any questions!

Where is external js file in html stored? Can I

Sorry, I don't have a good understanding of the web, but:
When you load in an external script file into an html document, where does it hold or cache that file? It doesn't put it in the index.html file.
<html>
<head>
<script src="name_of_file"></script>
</head>
.....
I ask because I'm working with node.js, and I'm wondering if I list an external script file under my index.html page, I can send the javascript file to the client.
the browser will recognize the "src"="http://xxx/xx.js" of your script tag,and check if the resources(identified with URI:"http://xxx/xx.js") has cached in browser local cache dir(every browser has its own dir)
if the file exist and cache is not expired,the browser will directly load this file,otherwise browser will download the script file,and execute them when download finish.
This question has no good answer. A JavaScript program can be located anywhere on a server, It's just linked to with <script src=SCRIPT></script> Where SCRIPT is the relative or absolute path to the .js file. Check out This site for more info.
It's wherever the file is being served from. With what you've given and default setup, the file will be in the same directory as your index.html file

How to run the .html file in browser?

I have just wrote a javascript file which I ran the via intelliJ using a few different browsers e.g. Google Chrome. This works fine as it runs locally e.g. http://localhost://.
However I want to be able to send it to someone so they just click on the .html file (packaged in correct folder) and it appears on their browser. Is there anyway I can do this? Right now the url points locally e.g. file:///Users/**/project/file.html.
Use a relative path. If your HTML file is in the same folder as the JS file, this means simply including it like so:
<script src="jsfile.js"></script>
If it's in a subdirectory, include all the folders necessary to get there:
<script src="subdirectory1/subdirectory2/jsfile.js"></script>
If it's up a directory, use the .. path:
<script src="../anotherfolder/jsfile.js"></script>
Or just include it in the HTML page itself:
<script>
// your code here
</script>

Ajax javascript n jquery src reference issue

I am new to Jquery and AJAX. I am trying to upload the file using AJAX call. When I set the script reference as from website, its working fine, but when I download it and set reference as local folder, its not working. What is wrong with my code?
When I use :
<script src="http://malsup.github.com/jquery.form.js"></script>
its working fine,
but when I use
<script type="text/javascript" src="http://localhost:8080/Upload/js/jquery.js"></script>
or
<script type="text/javascript" src="js/jquery.js">
its not working......
Add jquery.form.js library in your website folder under js folder, and
Change
<script type="text/javascript" src="js/jquery.js">
To
<script type="text/javascript" src="js/jquery.form.js">
This version points to a file on that web site:
<script src="http://malsup.github.com/jquery.form.js"></script>
This version points to a file on your LOCAL server (machine) via port 8080 (usually NOT a great idea)
<script type="text/javascript" src="http://localhost:8080/Upload/js/jquery.js"></script>
This verison points to a js folder relative to the page it is linked on
<script type="text/javascript" src="js/jquery.js">
In order to use a file locally (like the last two), you will need to download that file, and save it to your web server (or local server) in a folder. In the second example, this would mean saving it to the Upload\js folder at the root of your local servers site (that machine).
In the third example, you would need to find the page it is linked in, create (if not present) a js folder under that folder and save the js file at that location.
Note that it is always a good idea to use the original name form or something similar rather than jQuery.js - as that is often confused with the jQuery library itself.
An examples might be save it as:
jquery.form.js
malsup.jquery.form.js
malsup.version1.jquery.form.js
or some such named instance.
NOTE One way of making this as generic as might be would be to use
<script type="text/javascript" src="/Upload/js/jquery.js"></script>
This points to a folder called Upload with a sub folder js (Upload\js)which is based at the root of your web site. For instance if your site is based at your windows e: drive in a wwwroot folder it might be:
E:\wwwroot\Upload\js\malsup.jquery.form.js

link to external javascript file in a subdirectory from a web host

I have my index.html at the root of my web host, and my javascript file is in a directory(JavaScript) which is also at the root. How can I link my index to the js file? I did the following, but it's not working: <script type="text/javascript" src="JavaScript/filename.js"></script> in the head. It works when I do the inline javascript
<script type="text/javascript" src="JavaScript/file.js"></script>
Loads the file.js in the subdirectory "JavaScript". It'll work unless a base href is specified.
Edit: I see now that's pretty much what you had. Should work. You got full code or URL?

Categories

Resources