So I'm trying to make a working React app into a Twitch Extension (I don't need any twitch integration).
The only thing to make it work with Twitch's iframes is add a tag in the html file
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
And another call of javascript code on startup that uses stuff from that twitch-ext.min.js file
window.Twitch.ext.onAuthorized(function(auth) {
console.log('The JWT that will be passed to the EBS is', auth.token);
console.log('The channel ID is', auth.channelId);
});
What im currently doing is running npm build then manually editing the generated index.html and main.xxxxx.js to include those lines of code in the optimized minified files. This obviously seems a bit inefficient and I feel like there must be a way to tell node that during build it should include these lines. So is what I'm asking possible?
So I got an answer from someone who knew about Node. What you do is edit the index.html and index.js file that your react app should have.
The npm run build actually uses those 2 files to generate the minified built files so I just added
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
to index.htmla
and my
window.Twitch.ext.onAuthorized()
call in the index.js file and it all worked.
You can find index.html in the public folder of your react project if you used npx create-react-app. And index.js is in the src folder.
Related
here's my situation. I just started learning about node.js server with express and I find it to be an amazing technology, based on JavaScript that I am already a bit familiar with.
Now, so far, whenever I want to change something on the page, I have to do it with JS on the server-side with node.js, and thus, I have to refresh the page with new information. But in several cases this seems to be not the best way to handle things, like changing simple text contents or click events. I would like to use browser-side JS for that reason, but I have not found out a way to do that yet.
I tried to call js-files and import them, but I couldn't make it work.
<script src="../../public/js/index.js"></script>
I also put the index.js and functional.js in the public folder, which I have made available to node.js at all times, but the imported JS still cannot be found when the project is run on the server.
app.use(express.static('public'));
app.use(express.static(path.join(__dirname, '/public')));
The strange thing is, I have been looking all over the internet on trying to find an explanation to it for several days already, but I couldn't find anything that made it clear to me on how to use browser-JS with a node.js server.
My folder structure is this:
functional.js
exports.functional = () => {
alert("Do something...");
}
index.js
const { functional } = require('./functional');
document.addEventListener('DOMContentLoaded', () => {
const init = (() => {
functional();
})();
});
So now I have the following questions:
Can browser-side JS even be used with a node.js server?
If it can be used, how do I implement those js-files, so they actually work?
Every help is greatly appreciated!
Thanks :)
Static Folder
You're defining a static folder in Express, here.
app.use(express.static('public'));
This tells Express that every static file (css, js, images, .etc) are found in the folder public. Now Express handles this smart and now knows that when you're looking for a static file, it is in that folder you've specified.
<script src="js/index.js"></script>
This will look into the folder public for the folder js and the file index.js. public/js/index.js.
Modules
The script itself needs some modification. Node.js uses a module system called CommonJS. And the syntax works works like in your file exports.functional, require('./functional'). But that is a technology that only works on the Node.js environment. Not in the browser.
JavaScript does also have a native module system, which is also available in Node.js, which works with the import and export keywords.
export const functional = () => {
alert("Do something...");
};
import { functional } from './functional' ;
document.addEventListener('DOMContentLoaded', () => {
functional();
});
But wait
By using the native module system on the client side, you'll need to load all the scripts that have exported and imported values in them, otherwise you'd be missing pieces.
<script type="module" src="js/functional.js"></script>
<script type="module" src="js/index.js"></script>
Bundler
The mainstream use of import and export modules is in combination with a module bundler like Webpack, which combines all the modules into a single file, which you can serve to the browser. This is very useful for development to keep the files you work in small.
It can transform the following files from this:
public
-- dist <-- bundled files ready for distribution
-- src <-- raw source files to work with
---- js
------ index.js
------ functional.js
to this:
public
-- dist <-- bundled files ready for distribution
---- js
------ bundle.js <-- Single file ready for the browser
-- src <-- raw source files to work with
---- js
------ index.js
------ functional.js
The bundler program also works on the Node.js environment, just like Express.js, so you can include it in your project.
Alternative
If the bundlers seem like a huge hassle, then you could always choose to classically use a single file to serve your JavaScript in.
on what you did:
<script src="../../public/js/index.js"></script
you are trying to call index.js relative to your node file (correct me if i'm wrong)
its a mistake because this is what express.static does
just try:
<script src="js/index.js"></script>
beacuse you already told node to take all files from that location
so instead calling files relative to your node file you need to call it from public folder
hope i helped you
I have a problem when I try to install via nuget manager, when I search for 'autonumeric' I can clearly see that the latest version is 1.9.45
When I go to project site, I can see that version 1.9.45 is obsolete.
So, I want to get version 4.* but I do not know how. I also tried vie npm install command and nothing.
My question is: How can I download and incorporate the new version of autoNumeric in my MVC Web Project?
Steps:
Download zip from GitHub link
Unzip the folder and navigate to src folder
Copy all files to your solution for example to: Scripts/autoNumeric folder
Add it in your bundle like:
bundles.Add(new ScriptBundle("~/bundles/autoumeric").Include(
"~/Scripts/autoNumeric/AutoNumeric.js",
"~/Scripts/autoNumeric/AutoNumericDefaultSettings.js",
"~/Scripts/autoNumeric/AutoNumericEnum.js",
"~/Scripts/autoNumeric/AutoNumericEvents.js",
"~/Scripts/autoNumeric/AutoNumericHelper.js",
"~/Scripts/autoNumeric/AutoNumericOptions.js",
"~/Scripts/autoNumeric/AutoNumericOptions.js",
"~/Scripts/autoNumeric/main.js"));
For testing purposes add in your HTML input field:
<input type="text" id="test" value="" placeholder="something">
Initialize input field in your file. FOr example your main javascript file is main.js (NOTICE: this main.js is different than main.js in autonumeric folder!):
$(document).ready(function () {
// Initialization
new AutoNumeric('#test', { currencySymbol : '$' });
})
This not works.
Question: Should I import ES modules from folder or my main.js 'sees' the autoNumeric/main.js and all of its modules?
If you can rely on an internet connection you should probably just use a CDN
Here is the link : https://cdnjs.com/libraries/autonumeric
Simply import it in your body like :
<script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/4.1.0/autoNumeric.min.js"></script>
And you should be good using it (don't forget to remove useless files).
I'm trying to run typed.js on my homepage for a headline. On its website it gives installation instructions for npm, bower, and grunt. I installed it via npm.
To make it accessible as a static file I added the following line to my app.js file:
app.use('/scripts', express.static(__dirname + '/node_modules/typed.js/src/'));
This works fine.
However, when it's read from the browser, I get the error mentioned in the question title.
It pertains to the first two lines of the file:
import { initializer } from './initializer.js';
import { htmlParser } from './html-parser.js';
These are two other files found in node_modules/typed.js/src.
I understand that if this file was being interpreted on the server the import command would not be an issue.
However, AFAIK I have to serve this file from the browser in order for it to be rendered at all.
How do you import code from another javascript file in the browser?
Or does this have to be interpreted on the server?
I'm not using babel or mocha or anything else when trying to deliver this file, unlike many of the other questions on this topic.
When I init a react-native project, index.ios.js is created as project entry file.
Can I change this file's name and if so, how?
When you start a react-native app you'll see this message output by the React Packager:
Running packager on port 8081
and then:
Looking for JS files in
/Users/gbirman/gil/mapily
React packager ready.
By this point, the packager has compiled your JS files and is serving them with the .js extension renamed to .bundle. For example, your index.io.js file is compiled and served from:
http://localhost:8081/index.ios.bundle
If you added another file foo.js in the same directory as index.ios.js, the packager would serve it from:
http://localhost:8081/foo.bundle
You can confirm this by opening that url in your browser.
Now to answer your question, your project has an iOS/AppDelegate.m file with the following line:
jsCodeLocation = [NSURL URLWithString:#"http://localhost:8081/index.ios.bundle"];
... as you can see, it loads the index.ios.bundle. You can change the path/filename there to whatever you want, but it's probably best to stick with the recommended approach of naming your entry file index.io.js
Suppose you've moved your index.ios.js into a folder called dist. You need to do two things
For your development environment: Update jsBundleURLForBundleRoot in AppDelegate.m to match your updated path.
For your release bundle: Open your Xcode project. You'll need to update the Bundle React Native code and images task under Build Phases for your project. Update the shell script in this section to look like below:
export NODE_BINARY=node
../node_modules/react-native/packager/react-native-xcode.sh dist/index.ios.js
react-native-xcode.sh accepts the ENTRY_FILE as an optional first argument, defaulting to index.ios.js if none is found.
Updated Build Phases Example
Reference - react-native/scripts/react-native-xcode.sh
I want to have a strongloop example only using javascript without angular.
There's no complete working example without angular for now.
I want to simply include the browser.bundle.js in my index.html, then sync data from/to server side. In fact, I'm trying to replace pouchdb in my program since the couchdb seems not success in open source community.
I can't follow up this document correctly:
Running Loopback in the browser
create browser-app.js with the content from Running Loopback in the browser
copy past the content to browser-app.js
npm install loopback loopback-boot
browserify browser-app.js -o app.bundle.js Then I got error: Error: Cannot find module 'loopback-boot#instructions' from '/Users/simba/Projects/traveller-app/client/node_modules/loopback-boot'
There are few steps for this but its pretty simple.
Bootstrap your application via slc loopback.
Delete server/boot/root.js.
Uncomment two lines in server/server.js, it should look like:
...
// -- Mount static files here--
// All static middleware should be registered at the end, as all requests
// passing the static middleware are hitting the file system
// Example:
var path = require('path'); //this line is now uncommented
app.use(loopback.static(path.resolve(__dirname, '../client'))); //this line is now uncommented
...
Create index.html in the client dir (ie. client/index.html) with your contents.
That should get you a basic set up with just a basic front-end working. Let me know if you have any more issues.