I started working with React about 6 months ago and I have one website in html and one application in react. Now I want to make together and run on react default port. when react start I want to open website and then click on one link in website open the react app.
I am trying many ways but unable to figured out solutions.
Somebody could tell me any way to do this?
Try this, worked for me.
Let's consider home.html as Static HTML Page (not reactjs) and index.htmlas ReactJS APP.
On Link/Login press from home.html, I want to render reactjs app.
Link to URL /#/login (login button on home.html) as I'm using HashRouter (react-router v3).
<li>
<a class="page-scroll" href="/#/login">Login</a>
</li>
Now in index.html in public folder of Reactjs. Indicated that if URL is just / render home.html.
<script>
var url = window.location.href;
if (!url.replace(/.*#\//, '')) {
location.href = 'home.html'
}
</script>
I put both index.html and home.html inside same directory/.
Related
I need help with this problem. My objective is to put a website inside a ReactJs web app. I tried using the iframe of ReactJs, it does not work.
Is there a way to use React Native WebView component inside a ReactJs web app?
Or is there a Webview Component in ReactJs
I do want the end-user to jump to another tab in order to use the website. I want them to continue to stay in the ReactJs web app and use the website.
The website that I am putting is a .Net website and I am doing a ReactJs project, not a React Native Project
simply using iframe should work as this exemple (source below)
since your giving an url to this iframe langage doesn't matter if it can be served in http(s)
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
render() {
return <iframe src="https://<website>/" />;
}
}
ReactDOM.render(<App />, document.getElementById("container"));
As said in source the src url should be embeddable to be used inside an iframe if not you can use a reverse proxy to serve this url and change headers
source:
https://blog.bitsrc.io/best-practices-in-using-iframes-with-react-6193feaa1e08
I am working on angularjs app. Project multiple partials that loads in ng-view. App is working correctly.
I am trying to optimize app's performance and want to keep once loaded partials in dom. So that everytime these partials are revisited it should not be reloaded.
HTML:
<div ng-view></div>
routejs:
$routeProvider.when('route1', {
template: '1.html',
controller: '1controller'
}).when('route2', {
template: '2.html',
controller: '2controller'
})
How to prohibit 1html to reload when it was once visited like user visits-
route1-> route2-> route1
So next time users visits route1, html should not reload. Reloading of simple htmls are not costly however html with some images re-loading is costly.
How to prohibit angular to reload partials everytime?
Thanks in advance!!
I’m building a dashboard style application with Node.js, Express, and Angular.js. I have a simple login/registration to get to a dashboard view which is an angular single page application. OK, I’m trying to pass data from my routes.js file to my SPA. As of right now I can get this data on my dashboard.html page with no issues using ejs. However that data is not available in the partials (html files) that my angular SPA is displaying. How would I make this data available to the entire SPA and not just the dashboard.html? Is this even possible using ejs? Should I be taking another approach from getting user data from the routes.js to the SPA? any help is greatly appricaited, Thanks!
### App Structure ###
— client
index.html
— static
dashboard.html
— css
— js
— imgs
— partials
home.html
profile.html
— config
routes.js
— node_modules
package.json
server.js
/** in routes.js **/
app.get('/dashboard', function(req, res) {
res.render('./static/dashboard.html', {
user : req.user // get the user out of session and pass to template
});
}
<!—- dashboard.html -—>
<p> <%= user.username %> </p>
###result -> 'kobe#aol.com'
<-- partials/home.html -->
<p> <%= user.username %> </p>
###result -> '<%= user.username %>'
Am i creating multiple html pages, where index.html consist of the bootstrap carousel which slided through some couple of images and am i connecting all the html pages through ngroute,The problem is when loading the carousel in index.html if click the next or prev button in the carousel it just navigating to the another html page or it's same page,i hereby paste a working plunker link for reference:
Please help me to resolve this issues.
Am i creating multiple html pages, where index.html consist of the bootstrap carousel which slided through some couple of images and am i connecting all the html pages through ngroute,The problem is when loading the carousel in index.html if click the next or prev button in the carousel it just navigating to the another html page or it's same page,i hereby paste a working plunker link for reference: http://plnkr.co/edit/VUS8RjQkVQabEBxRWMdB?p=info Please help me to resolve this issues.
just use this in your main controller
$scope.$on('$routeChangeSuccess', function () {
$scope.isIndexPage = $location.path() === '/';
});
i'm working with Ionic Framework and i've the next problem.
I have 3 views templates: one.html, two.html, three.html, and one.html is the home of the application (no back button)
The navigation is correct between the views but i have problems if navigate from three.html to one.html because when navigate to one.html in navbar appears the back button and i need one.html identical as app start state
I navigate with $state.go('tab.one.html');
Thanks.
You could use the nav-clear directive to do this (source)
or implement the code directly in your controller:
$ionicViewService.nextViewOptions({
disableAnimate: true,
disableBack: true
});