Build React app as modular JS library - javascript

Background
I have a React app that was generated with create-react-app.
It is a set of UI forms that are intended to be presented modally inside a hosting website. The hosting website provides a JS callback to be invoked upon completion.
Motivation
I want to be able to distribute this small React app as a standalone "vanilla" JS module, that can then embedded in any HTML page.
What I have now is running npm run build and getting a full website with my app - but that's not what I need. A desirable output should be a simple .js file, that can be imported to a other's websites (that are not necessarily built with React). Braintree's JS SDK is a very good example of what I need.
Example usage in hosting website
<head>
<!-- loading MyModule -->
<script src='https://cdn.mydomain.com/mymodule.js' some-parameter='param-provided-by-hosting-website'></script>
</head>
<body>
<div id="mymodule-container"></div>
<!-- rest of hosting website... -->
<script>
// this will present a "full screen" UI component and call callback upon completion
MyModule.presentUI(
function callback() {
console.log('MyModule completed');
}
);
</script>
</body>
Putting aside all of the internal structure and consideration, how do I bundle my React app (including its .css files) as one .js file that runs inside another website?
UPDATE
So apparently running npm run build outputs, among other things, a static/main*****.js file, which is all of the JS contents. The index.html file is actually a good example of how to use that .js file as a module:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<title>My Hosting App</title>
<link href="/static/css/main.1695e3be.css" rel="stylesheet">
</head>
<body>
<div id="my-module-container"></div><script type="text/javascript" src="/static/js/main.0b4c7736.js"></script>
</body></html>
Now what's left to ask is how to load the .css (from built-generated static/main******.css file with the .js file, without making the hosting website also add a <link> tag to the RSS (like in the output index.html. Basically making this happen inside the generated .js file.

I cannot say how this can be achieved without having some sort of 'standard' API, that all your modules can follow.
We have tried to do something similar with FrintJS (https://frint.js.org), with the concept of 'regions'.
You define certain areas where you want your Apps (modules according to your question) to mount themselves on, and they can be loaded asynchronously on demand via separate <script> tags.
You can read more here:
https://frint.js.org/guides/regions/
https://frint.js.org/guides/code-splitting/

Related

What is the correct src= attribute to load scripts from node.js server

Both my p5.js and sketch.js scripts will not load.
My index.html is loaded by Node.js
I think I am misusing the src value in my<script> tag in the HTML.
My p5.js script is up one level and in a folder called P5, and my sketch.js file is in a folder called P5Scripts in the same directory as this index.html file.
In the chrome console, I get this message :
Loading failed for the <script> with source “http://45.76.140.199:3000/P5/p5.js”.
and
Loading failed for the <script> with source “http://45.76.140.199:3000/P5Scripts/sketch.js”.
I can see that my src attribute is wrong, but what would be the correct way to load these scripts?
index.html:
<!doctype html>
<html>
<head>
<title>My Website</title>
</head>
<script src="../P5/p5.js"></script>
<script src="P5Scripts/sketch.js"></script>
<body>
</body>
</html>
There isn't a way to bind nodejs with the DOM elements of your html because nodejs is backend and html DOM elements are frontend.
Since you are trying to modify the html, chances are that what you really want is to use plain javascript which would run on the browser.
Nodejs is a backend technology which runs on the server. At the time the html is displayed nodejs has already done its work and isn't aware of what is going on the page unless AJAX involved.
Have a brief look to client/server model here.

Basic (local) HTML not loading Image or js but loading css

I've been working with the web for years, but today I started a basic Angular app for something super simple and I'm just using the angular files and a single html file for my base.
Before doing all the angular stuff, I'm basically just getting the skeleton going and I noticed the browser couldn't find the relative path to the app.js file. It can find the .css files, but not the .js.
So I put an image in to test and it can't find that either! Here's my code below:
<!DOCTYPE html>
<html ng-app="ecsApp">
<head>
<title>Client Services Support | Elite Chat</title>
<link rel="stylesheet" href="public/stylesheets/foundation.min.css">
<link rel="stylesheet" href="public/stylesheets/main.css">
<base href="/">
</head>
<body ng-view>
<img src="public/images/clock.jpg">
TEST
<script src="app_client/app.js"></script>
</body>
</html>
Here's my folder structure:
project
> index.html
> app_client
> app.js
> public
> images
> clock.jpg
> stylesheets
> main.css
I can use an absolute path of the image (system path, IE c:\user\blah\folder\project\public\images\clock.jpg) and it will display. But obviously a system path is completely stupid and unacceptable to use.
Any ideas why I cannot do something as simple as display an image? I even put the image in the same location as the index.html file a tried <img src="clock.jpg"> and it still wouldn't display image.
So the moral of this story is going to be when doing anything more complex than a static HTML site, use a web server of some kind.
If you look at the HTML in the original question, you'll see in the <head> section this: <base href="/">. When editing the files locally and not using a web server (e.g. node.js or xampp or whatever you wish) then the base path (url in the browser) is something like
file:///C:/Users/person/folder/project/index.html#/
and therefore the browser will try to load files after that <base> tag based (haha, pun) on the crazy file path. That's why at that point the following is true:
not working
<img src="public/images/clock.jpg">
working
<img src="file:///C:/Users/person/folder/project/public/images/clock.jpg">
Important:
Now, if I wanted to fix this, I could either run a node.js server and toss these files in or upload to the web to test/view the desired output with the relative src attribute. Otherwise, I'd have to use the system file path.

retrieving cached pages

I have a simple website created using JavaScript and jQuery. The website contains 4 web pages and is hosted on a web server. The issue is I want to be able to navigate through these 4 pages when I don't have access to the server (no wifi or otherwise). The way I'm linking the pages (if that has an effect) is using
window.location.href="page1.html";
the click function for one of the buttons on the home page is as so
$("#btnOne").click(function() {
window.location.href="page1.html";
return false;
});
I thought of using post but on the jQuery website it says "Pages fetched with POST are never cached"
Is there an effective way to accomplish what I want; having the pages cached into the browser so its available to use offline?
CACHE MANIFEST
# 01-AUG-13 215
CACHE:
css/stylesheet.css
css/custom-theme/jquery.mobile-1.3.2.min.css
home.html
page1.html
page2.html
js/jquery-1.9.1.min.js
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
</head>
Sounds like what you want is the HTML5 appcache:
<html manifest="example.appcache">
...
</html>
Which lets you specify a manifest for your site and dictate what pages should be cached etc.
In the manifest file you indicate what resources you want to be cached...
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html
There's some great detailed information over on HTML5 Rocks as well as some technical gotchas you might run into.
Save the four html files and any required "resource" (javascript, css, images, etc) files on your local machine. When you want to use your site off line, open the landing page on your local. Most operating systems, when you open (click on) and html file will run your default browser and render that page. Links will be followed to the additional pages. This works for sites that are static (eg. html) on the server side. They can be dynamic on the browser side.

Deploying MVC 3 application to URL Folder has corrupted javascript and content path

I have created a mvc3 application which work fine locally. I work for a department where all websites sits under single url. when i deployed my website to test environment than page are coming up but all java script and content (images,css) folder path is not right.
I work for a department where all websites sits under single url eg https://abcd.test.hosts.network/application1 ,https://abcd.test.hosts.network/application2
When i check location of images it shows following path
http://abcd.test.hosts.network/Content/Images/Master/masterBannerLeft5.jpg
What should i do or how i should deploy my application to fix the problem of java script and content folder.
Are you using the following for referencing content files:
<link href="#Url.Content("~/content/css/normalize.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/content/js/jquery.js")"></script>
rather than:
<link href="/content/css/normalize.css" rel="stylesheet" type="text/css" />
See http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.content.aspx for the details, it basically resolves the path within your application.

Unable to reference external file using PhoneGap Build

I'm unable to reference external files (CSS/JavaScript) when they are located at a parent folder of the HTML file using PhoneGap Build.
The following example works fine:
<link rel="stylesheet" href="teste.css" />
But if the move the file to a parent level it doens't load it.
<link rel="stylesheet" href="../teste.css" />
or
<link rel="stylesheet" href="./../teste.css" />
just a guess but, so if you're using jQuery mobile, im assuming you're using the ajax as part of that. Now if that ajax is loading a page in to another page that is on the root of your app that means that technically that page no longer lives in a sub folder, thus the file should just reference the parent css as it would if it were on the root. Make sense?
so rather than
<link rel="stylesheet" href="../teste.css" />
just keep
<link rel="stylesheet" href="teste.css" />
I've debbuged the application using weinre and noticed that PhoneGap considered root as the folder where index.html was located
That being said, I've refactored the structure of my web application in order to index.html be located on the parent folder.

Categories

Resources