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,
})
Related
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.
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
I have two applications:
X.Web - Asp.net core 1.1 web application
X.Api - ASP.NET WebApi2 application in .NET 4.6.1
Now they are both available as www.example.com/X.Web and www.example.com/X.Api respectively. My customer wants the web application to be available simply as www.example.com.
I tried a quick solution in my test environment - I just moved the content of X.Web folder to wwwroot and without any problems everything worked fine.
However, on my production server the web app works - htmls, scripts and styles are loaded correctly, but X.Api stops working - i get response
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> IIS 502.5 Error </title>
<style type="text/css"></style>
</head>
<body>
<div id = "content">
<div class = "content-container">
<h3> HTTP Error 502.5 - Process Failure </h3>
</div>
<div class = "content-container">
<fieldset>
<h4> Common causes of this issue: </h4>
<ul>
<li> The application process failed to start </li>
<li> The application process started but then stopped </li>
<li> The application process started but failed to listen on the configured port </li>
</ul>
</fieldset>
</div>
<div class = "content-container">
<fieldset>
<h4> Troubleshooting steps: </h4>
<ul>
<li> Check the system event log for error messages </li>
<li> Enable logging the application process’ stdout messages </li>
<li> Attach a debugger to the application process and inspect </li>
</ul>
</fieldset>
<fieldset>
<h4> For more information visit:
<a href="https://go.microsoft.com/fwlink/?linkid=808681">
<cite> https://go.microsoft.com/fwlink/?LinkID=808681 </cite>
</a>
</h4>
</fieldset>
</div>
</div>
</body>
</html>
for each and every request. In my Event log I can see:
Application 'MACHINE/WEBROOT/APPHOST/DEFAULT WEB SITE/X.API' with
physical root 'C:\inetpub\wwwroot\X.Api\' failed to start process
with commandline '"dotnet" .\X.Web.dll', ErrorCode =
'0x80004005 : 80008081.
The questions are:
1) what can be a problem
2) Why in the event log I can see ...failed to start process
with commandline '"dotnet" .**X.Web.dll**...
3) Is there any other way to achieve this simple requirement of my client
So, just to make sure I understand you properly, initially, you had: www.example.com/X.Web and www.example.com/X.Api, and X.Web was calling X.Api, right? Then you moved X.Web files from wwwroot/X.Web to wwwroot directly, and it worked on your env but not on the production env? Which version of IIS are you using?
1/ Maybe an idea: by moving X.Web maybe you have changed the user under which your X.Web application was running, making it unable to launch your ASP.NET Core application.
2/ My suggestion to 1 could explain, credentials issues.
3/ I would definitively avoid putting the file of X.Web directly under wwwroot and instead I would configure IIS to get a redirection from www.example.com to www.example.com/X.Wep. You could use URL Rewrite module (maybe an overkill in that case but it's a module that is very good to know in my opinion because it can help in various scenario) or simply configure IIS to redirect, this SO thread could be helping How to redirect a URL path in IIS?
I am using Heroku - Yeoman - AngularJS Full-Stack - Bootstrap - NodeJS Stack.
Deployment on Heroku is built using 'Grunt build' command. When deployed to Heroku I am having problems rendering CSS images on web pages. Any images within the page are displayed but not from the CSS files.
Eg: the code below does not work
CSS
.aboutpage-header
{
height: 250px;
background: url('../images/slider-map.jpg') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding-top: 50px;
}
HTML:
<header class="aboutpage-header">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<h2 class="title">About Us</h2>
<h2 class="intro"><i class="fa fa-location-arrow"></i>Company<span class="highlight">IT</span>
are experts in bespoke software development and tailored consulting</h2>
</div>
</div>
</div>
</header>
locally it works fine when running Grunt serve but as soon as it's deployed on Heroku the CSS images are missing.
As suggested in the comments, the link should be:
/assets/images/image.jpg
instead of:
../assets/images/image.jpg
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