How can i start node script from my react-app? - node.js

What is the easiest way to launch a node.js script from a react-app by using a button?
I've a simple app with two buttons - using Material.io
export default function ButtonsMenu() {
const classes = useStyles();
return (
<Grid>
<Grid item xs={12}>
<Paper style={styles.Paper}>
<Button onClick={activeLights} variant="contained" color="primary" className={classes.button}>
ON
</Button>
<Button onClick={inactiveLights}variant="contained" color="secondary" className={classes.button}>
OFF
</Button>
</Paper>
</Grid>
</Grid>
);
I also have an Arduino with led stripe that i wrote a node.js code for.
How can i run it from the browser?
I know that i need a node server and a client, but need some help what should i do next.
I would appreciate any github repository etc.

You can't do that, ReactJs is for fornt using, but instead make an API call to a node js server, even the browser will block you from calling local commands

Related

Spline Animation disappears when deploying

I made a 3D design using Spline and I added to my application, when I run the application locally using
npm run build it works perfectly I can see the design and everything. However, when I try to deploy the application on the internet the Spline design will disappear I don't understand why this is happening, I have deployed the application to Vercel, Firebase, and Heroku. My application is a React app with Node.js.
<div className="relative" id="home">
<Spline scene="https://prod.spline.design/0TUuMfCgXS3Xkkuo/scene.splinecode" />
<div className="absolute bottom-10 w-full flex justify-center items-center">
<div className="shadow-md p-4 flex items-center justify-center bg-zinc-900 rounded-3xl ">
<p className="text-white">Press and drag to orbit</p>
</div>
</div>
</div>
It works with iFrames without server-side rendering. You have to wrap it inside a component. You can import that component with dynamic from 'next/dynamic':
const IFrameComponent = dynamic(() => import('path/to/component'), {
ssr: false,
})

JHipster external navigation with Angular

For me very basic navigation is not working with newly generated jHipster app.
I have 2 html pages in the root: index.html and network.html
Here is how I would like to redirect to network.html:
<a href="/network.html">
<button type="submit"
class="btn btn-info btn-sm">
<fa-icon icon="project-diagram"></fa-icon>
<span class="d-none d-md-inline">Network</span>
</button>
</a>
Unfortunately this doesn't work and I get 404 Not Found.
Can you please advise how to make external navigation working with JHipster? I have tried all examples from How to redirect to an external URL from angular2 route without using component? and nothing works
You have to modify src/main/java/{your-package}/config/WebConfigurer.java and add a resource handler for your static file. By default, all routes are redirected to index.html, which is how most SPA applications work.

Moneris - Setting up a Test Hosting Pay Page

I'm trying to make a fix to a moneris website, but I have to change the mode of moneris to test to test the changes before pushing in production.
I'm trying the code on the example page as is and got an error. "Invalid store credentials."
<FORM METHOD="POST" ACTION= https://esqa.moneris.com/HPPDP/index.php >
<INPUT TYPE="HIDDEN" NAME="ps_store_id" VALUE="AF4Fs1024">
<INPUT TYPE="HIDDEN" NAME="hpp_key" VALUE="Hsjh4GSr4g">
<INPUT TYPE="HIDDEN" NAME="charge_total" VALUE="1.00">
<!--MORE OPTIONAL VARIABLES CAN BE DEFINED HERE -->
<INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="Click to proceed to Secure Page">
</FORM>
So if this is not how you can make a test payment to test the process, how can you?
PS: Seems there's no moneris tag.
You need to goto the developers page of Moneris and create a test environment first Developer Page
After creating the test store you'll need to input the store id and hp key in the values of the form you posted.

Why is my download link requiring control click to download?

I am running a pretty basic node.js server to host a site, and all of a sudden this week one of my download links started to just redirect to the index.html page instead of downloading the pdf it points to if you just click on the file. a control+click will download the file, but that is not normal behavior from what I understand with chrome.
The button is generated as so:
<button type="button" name="button">
<a href="../images/a-manill-resume.pdf" download>Downloadable Resume</a>
</button>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
Try setting the download attribute
<button type="button" name="button"><a download="../images/a-manill-resume.pdf">Downloadable Resume</a></button>

is it possible to create a website and hybrid app (using ionic) with same codebase without rewriting anything

I want to create a website along with its hybrid app using Ionic, I checked ionic's documentation http://ionicframework.com/getting-started/, I created an ionic app for tabs but I also want to handle my website with it so that if the request is coming from web then normal HTML should be served with web frameworks like foundation and I dont want to repeat the code for mobile and web. when I checked the files generated by ionic, it looked like this
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
So is it possible to use the same code for web and app(foundation for web and ionic for app)
yes you can!
you can use ionic platform add browser
then you need to add to your node js server.
Ionic as a web server

Resources