We Keep Coding

How to call a JS function at the page load of Docusaurus site?

I need to load a custom JS function I wrote at the beginning of the page load in a Docusaurus documentation site.
What have I tried so far?
Attempt #1: Appending the script to the index.js file (.\src\components\HomepageFeatures\index.js)
This attempt worked well during testing but then yarn was not able to build the project anymore. The error was as follows:
[ERROR] Docusaurus server-side rendering could not render static page
with path /. [INFO] It looks like you are using code that should run
on the client-side only. To get around it, try using <BrowserOnly>
(https://docusaurus.io/docs/docusaurus-core/#browseronly) or
ExecutionEnvironment
(https://docusaurus.io/docs/docusaurus-core/#executionenvironment). It
might also require to wrap your client code in useEffect hook and/or
import a third-party library dynamically (if any).
Attempt #2: To counter the issue presented during my first attempt, I created a separate (.js) file in (./src/js/myfunction.js) and then tried to load that file. To keep this question short, I will add a sample script below to showcase the issue:
import BrowserOnly from '#docusaurus/BrowserOnly';
<BrowserOnly>
window.onload = function() {
alert("Welcome!");
}
</BrowserOnly>
Then I went to the Docusaurus config file and added the following:
scripts: [
{
src: './src/js/myfunction.js',
async: false,
},
],
The site was built successfully this time, but the function was not getting loaded. I tried to call the function as well but still, I was getting nothing. I think I don't understand how the <BrowserOnly> feature works or I am missing something else.
Your help will be much appreciated!

I solved the issue eventually by adjusting the custom-made JS file as follows:
import ExecutionEnvironment from '#docusaurus/ExecutionEnvironment';
if (ExecutionEnvironment.canUseDOM) {
// My own custom JS code.
}
Thereafter, I loaded that custom JS file from the config file (docusaurus.config.js) by adding the following:
clientModules: [
require.resolve('./path-to-custom-code/custom-code.js'),
],
This has been mentioned briefly in the documentation but it wasn't clear at all. The documentation of Docusaurus requires more elaboration and examples.
You can view it here though:
https://docusaurus.io/docs/advanced/client#client-modules
If anyone has a better approach, please add it to this post. Thanks!

script.js doesn't load in my create-react-app

I am pretty new to coding and I am currently trying to solve a challenge from frontendmentor.io where my task is to build an ip-address-tracker.
To make this task a little bit more difficult for me, I am trying to build this app with the React framework via create-react-app.
My problem is, that my Javascript file, script.js, somehow isn't working. I am trying to implement it via the script-tag in my index.html.
<script src="../src/script.js"></script>
You can also check out the directory structure, I just updated the project on GitHub.https://github.com/bryanhain97/ip-address-tracker
Thanks a lot.

If you want to include a script in your index.html file in react you'll have to put it into the public folder and specify the path by using %PUBLIC_URL%/path-to-script-relative-to-public-dir
EDIT:
I just looked at your project and what you should do instead of embedding your script in index.html is to import it into index.js. You should probably export the initMap function and call it from index.js

OK. there are a couple of things you did wrong! First of all, React outputs some useful information in the console that is not negligible in case of failure. Please look at the following image.
It is clear that React is complaining about a missing React import. This is because you need to
import React from 'react'
even in a function component. I found this mistake in two places.
The URL you're using in your script.js file is wrong. Please see the git diff over my working directory below.
I don't know how you want to implement all this but I think this is not done THE REACT WAY! React is a component oriented library so, Please check some other alternatives like instead of doing all this in flat functions using direct connections to your DOM element. ReactDOM has some super power to be leveraged here.
I managed to get the application work on my own IP address and Google's (see the screen captures below), though I think you didn't implement it in the REACT WAY. So, keep digging!
[React Error Output][1]
[Git diff of my work space with the fixes][2]
[Working App on my IP Address][3]
[Working App on Google's IP Address][4]
[1]: https://i.stack.imgur.com/gZB72.png
[2]: https://i.stack.imgur.com/xHqfU.png
[3]: https://i.stack.imgur.com/8BEzI.png
[4]: https://i.stack.imgur.com/xZENI.jpg

Integrate React components into an existing NET Core app

I have an existing application build with .Net Core Framework. I would like to integrate React components for re-usability purposes which at this point will only be app specific. I have gone through numerous "Hello World!!" tutorials but that doesn't satisfy my need. I have also looked at reactjs.net but that also is not going to help me as the components gets rendered on the View
Scenario
Application has lots of Modals with a form which gets rendered on numerous pages. Currently it is being handled with JavaScript. The JavaScript code gets duplicated a lot to achieve it.
Goal
Would like to have a react component to replace above mentioned functionality to reduce code getting duplicated.
The problem I am facing is I am not sure how will I be able to interact with the component from a jQuery/JavaScript point of view.
Example
I have a DataTable and one of the actions is to click on a certain button to display the Modal. The code is in a separate .js file so it is separate from the View. So in this case if I click on a button I would like to render the react component. I would need to pass props through to the components and that is where I am uncertain how would I handle it :-(
Any suggestion or guidance would be appreciated.
Thanks in advance

Using react in Asp.Net Core application is easy. At first you need to know your back-end will be API based to communicate with react. So if you have not set up your Core application to an API based, it won't work. Also make sure you have installed nodeJs and other dependencies.
To get started with react, create a new folder in your Asp.Net project solution.
Open the folder in your Command line and execute:
npx create-react-app [your--folder--name]
To view your created app, run
npm start
To get started with asp.net, you need to add spa dependencies in your project.
Then you have to set up your ConfigureService method to include:
services.AddSpaStaticFiles(configuration => { configuration.RootPath = "[your--folder--name]/build"; });
Finally set up your Configure method to include:
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints( ... );
app.UseSpa(spa => {
spa.Options.SourcePath = "[your--folder--name]";
if (env.IsDevelopment()) {
spa.UseReactDevelopmentServer(npmScript: "start");
}
});

Developing Kibana plugin using ReactJS

I would like to create a Kibana plugin using ReactJS as the preferred javascript framework. It seems like is possible, but the documentation and examples are definitely sparse. I have set up the local environment as far as running Kibana, kbn bootstrap etc and modified the app.js as one would when working with a react application.
In the index.js of the plugin I have
app: {
title: 'Reactisearch',
description: 'Sample Kibana plugin using ReactJS and Elasticsearch',
main: 'plugins/reactisearch/app'
},
in the uiExports. My only trouble is that traditionally in a React application the index.html would be elsewhere with a target element in the DOM for the app to render to. I can't seem to get this portion working. I do have
ReactDOM.render(<Base />,document.getElementById('root'));
within the app.js as you normally would but it is apparent there is a disconnect from there on. I understand if you were using Kibana's(Angular) routing you could do something like
uiRoutes.enable();
uiRoutes
.when('/', {
template,
...
});
where the template is referring to the angular template but since I am not trying to use angular, then what?
Bottom line is would like to develop most (if not all) of the plugin in React, but if there must be a little angular I suppose that is okay. This is only the second day even looking at Kibana so sorry if some of this stuff is obvious.
If it matters I am targeting the latest of everything.

Integrating a medium-editor on the Atmosphere with a Telescope App

In Integrating a medium-editor on the Atmosphere with a Telescope App I have unknown parts that I can not make search for Atmosphere package pages makes only references to the github pages of clones.
I want to integrate a medium-editor clone with my Telescope app, say CitizenKevin/meteor-medium-editor on the Atmosphere. Instructions on the Github page of the clone is regarding non-Meteor apps, refrencing libs to html etc.
What is the thing with meteor. How I just start to use it. I see one skips the referencing in html parts. issuing meteor add citizenKevin:medium-editor will do those settings. Is that right?
I have skipped this and just added a:
<div class="editable">adasdasd</div>
to my main.html file, I am using Discovering Meteor book.
And added initialising to the main.js file as:
editor = new MediumEditor('.editable');
But my div above is not editable now.
What is the missing thing in my setup and try?

This has been done in other projects as well like the meteor-blog package.
They setup an editor file here: https://github.com/Differential/meteor-blog/blob/master/client/views/admin/editor.coffee
And then the corresponding edit functionality in here: https://github.com/Differential/meteor-blog/blob/master/client/views/admin/edit.coffee
So, based on those, you should be able to see how the medium-editor plugin can be used in Meteor projects.

You need to wrap the editor initialization like:
$(function () {
var editor = new MediumEditor('.editable');
});
Otherwise the editable div is not there (DOM not ready) when you init the editor.
Or you can put it in the rendered() function in your template like:
Template.TEMPLATENAME.rendered = function()
{
var editor = new MediumEditor('.editable', {});
};
Both tested with meteor 1.1.0.2