How to host server side rendering application which developed in react js. Now I want to deployed in IIS. So, how can I achieve this.
anyone suggest any example.
Please help me.
You still need to have node.js on your server. IIS will just proxy your app.
There is different ways how to achieve that:
With IISNode project:
Instructions you can find here:
http://www.amazedsaint.com/2011/09/creating-10-minute-todo-listing-app-on.html
With ARR(Application Request Routing) module for IIS:
Instructions you can find here: https://adamtuttle.codes/blog/2015/add-node-to-existing-iis-server/
Install IIS node:
x64 - [https://github.com/azure/iisnode/releases/download/v0.2.21/iisnode-full-v0.2.21-x64.msi)
Install URL rewrite module.
Create Web.config with following declarations in <configuration>/<system.webServer>:
<handlers>
<add name="iisnode" path="server.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<rule name="Server-side rendering" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Rewrite" url="server.js" />
</rule>
</rules>
You can optionally exclude node_modules so they are not served by IIS:
<security>
<requestFiltering>
<hiddenSegments>
<add segment="node_modules" />
</hiddenSegments>
</requestFiltering>
</security>
Create node.js server, for example with express.js:
import express from 'express'
const app = express()
app.get('*', (req, res) => {
/render app here/
});
app.listen(process.env.PORT);
Remember to bind to process.env.PORT as it is passed to your server by the IIS!
Render your app server side, for example like this:
const App = ({message}) => <div>Hello {message}</div>
const template = ...
(StackOverflow eats my tags embedded in js... so copy that and use string interpolation)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div id="app">${body}</div>
</body>
<script async src="/bundle.js"></script>
</html>
import { renderToString } from 'react-dom/server'
const renderedComponent = renderToString(<App message={`from ${req.url}`} /> )
const html = template(renderedComponent)
res.send(html)
Configure your build tool and router.
You can create two separate build targets for the Webpack - one for the client and one for the server. You should also handle in-app routing but that depends on what library you are using.
Related
I serve react SPA through IIS. (uploaded build results in specific directory)
Accessing url http://example.com/About directly or refresh returned 404 error, so I figured out to add web.config like below.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url="(.*)" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Previous problem is solved, but I still cannot access nested urls like http://example.com/directory/page1 directly. (Page does not return any error codes, just blank!)
Are there any missing points?
Thanks in advance.
I had the same problem and eventually realized that the web.config is good, but the problem were the relative paths to JS bundles in my index.html.
For example, a script tag in your index.html might be something like:
<script defer="defer" src="app.js"></script>
If you visit http://example.com/directory/page1, IIS actually returns your index.html but the HTML contains relative src paths, so it tries to load the JS bundle at http://example.com/directory/app.js, which does not exist.
I fixed the issue by setting the output public path in my webpack config output: { publicPath: '/' } which makes the src an absolute path:
<script defer="defer" src="/app.js"></script>
https://webpack.js.org/configuration/output/#outputpublicpath
I have a react application with the following files and folders:
├── static
│ ├── css
│ │ └── someCssFile.css
│ ├── js
│ │ └── someJsFile.js
├── index.html
├── web.config
The web.config file is as following:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<!-- This part is responsible for URL rewrites -->
<rewrite>
<rules>
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="index.html"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
And the index.html file is as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.8833e8af.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.8f22fc15.js"></script>
</body>
</html>
I have also installed the URL Rewrite. But when deploying the app on the ISS, it does not work!
Could you please help me with the problem?
Your action url needs to be a fully qualified url. E.g.
<action type="Redirect" url="https://{HTTP_HOST}/index.html"/>
{HTTP_HOST} is replaced by IIS with the actual hostname in the request. You may want to hardcode your actual domain if you have several domains/ redirects pointing at the same site.
I have developed angular js web application and hosted in IIS server. My web app is developed only by using javascript, css and html.
I am trying to implement Prerender.io in my application. I configured all the required necessary steps including
1 - Added fragment
<head>
<meta name="fragment" content"!">
<meta property="og:title" content="{{header.metaservice.metaTitle()}}" />
<meta name="description" property="og:description" content="{{header.metaservice.metaDescription()}}" />
</head>
2 - Added custom header
<httpProtocol>
<customHeaders>
<add name="X-Prerender-Token" value="XXXX" />
</customHeaders>
</httpProtocol>
3 - Defined rewrite rule
<rewrite>
<rules>
<rule name="Seo rewrite rule" stopProcessing="true">
<match url="^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent))(.*)" ignoreCase="false" />
<serverVariables>
<set name="HTTP_X_PRERENDER_TOKEN" value="XXX" />
</serverVariables>
<conditions>
<add input="{QUERY_STRING}" pattern="(.*)_escaped_fragment_(.*)" ignoreCase="false" />
</conditions>
<action type="Rewrite" url="http://service.prerender.io/https://{HTTP_HOST}{REQUEST_URI}" appendQueryString="false" />
</rule>
</rules>
</rewrite>
4 - Installs ARR in which i enable the proxy
However, even though I have included all the necessary steps, when I paste my link,it is showing me something like this:
var app = angular.module("myApp", ["ngRoute","ui.router"]);
app.config(function($routeProvider,$urlRouterProvider,$locationProvider,$provide, $stateProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.htm"
})
.when("/london", {
templateUrl : "templates/london.htm",
controller:"ctrl"
})
.when("/paris", {
templateUrl : "templates/paris.htm"
});
$locationProvider.html5Mode(true);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
<base href="/simpleAnjularjs/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp">
<!-- routeProvider -->
Red
Green
<div ng-view></div>
<!-- stateProvider -->
<!-- <a ui-sref="red">Red</a>
<a ui-sref="green">Green</a>
<div ui-view></div> -->
<!-- <script src="js/angular.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> -->
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/Angularjs_ui_routing.js"></script>
<script src="app.js"></script>
</body>
</html>
where other templates(london.html,paris.html,main.html) used are normal html pages with a default tag and when i reload any of the pages i'm getting an error saying "The requested URL /simpleAnjularjs/paris was not found on this server"
How to: Configure your server to work with html5Mode
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
Apache Rewrites
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Azure IIS Rewrites
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
I am having a lot of issues routing my pages with Spring-Boot and AngularJS. Once the index.html page renders I get a 404 error when I click on a new link. AngularJS in loading fine, and the controllers etc are also loading.
Also worth noting I have to use this <base href="/"> when I run it on my IDE and this <base href="/personalsite/"> when I package it into a war file on deploy it on tomcat.
index.html
<html lang="en" ng-app="SharpVision">
<head>
<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Drew</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="Drew's personal site" content="Drew" />
<meta name="author" content="AHthemes" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<!--<script src="http://a1alfred.com/sharpvisionbs3/v2/angular/assets/libs/html5shiv/html5shiv.min.js"></script>-->
<!--<script src="http://a1alfred.com/sharpvisionbs3/v2/angular/assets/libs/respond/respond.min.js"></script>-->
<![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
</head>
<body>
<ng-include src="'views/structure/navigation.tpl.html'"></ng-include>
<ng-view autoscroll="true"></ng-view>
<ng-include src="'views/structure/footer.tpl.html'"></ng-include >
<!--Scripts-->
<!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="assets/libs/flexslider/jquery.flexslider.js"></script>
<script src="assets/libs/masonry/masonry.pkgd.min.js"></script>
<script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
...
app.config
app.config(function($routeProvider, $locationProvider){
$routeProvider.when('/',{
templateUrl: "views/misc/home.tpl.html",
controller: "HomeController"
})
.when('/features/blog',{
templateUrl: "views/features/blog.tpl.html",
controller: "BlogController"
})
.when('/features/blogpost',{
templateUrl: "views/features/blog-post.tpl.html",
controller: "BlogPostController"
})
.when('/features/portfolio',{
templateUrl: "views/features/portfolio.tpl.html",
controller: "PortfolioController"
})
.when('/features/portfolioitem',{
templateUrl: "views/features/portfolio-item.tpl.html",
controller: "PortfolioItemController"
})
.when('/features/gallery',{
templateUrl: "views/features/gallery.tpl.html",
controller: "GalleryController"
})
.when('/features/404',{
templateUrl: "views/features/404.tpl.html",
controller: "404Controller"
})
.when('/features/500',{
templateUrl: "views/features/500.tpl.html",
controller: "500Controller"
})
.when('/contact',{
templateUrl: "views/misc/contact.tpl.html",
controller: "ContactController"
})
.otherwise({redirectTo:'/'});
$locationProvider.html5Mode(true);
});
Once the page loads I select gallery:
at: http://localhost:8080/features/portfolioitem
which give me a 404:
However all this ONLY happens when I create a war file and deploy it on Tomcat. On my intellij IDE all I have to do it change <base href="/personalsite/"> to <base href="/"> and it works fine.
It appears once the application starts loads everything fine but handles the routing through Spring's #RestController so I tried this:
//try mapping to contact and gallery and see what happens
#RequestMapping(value = "/features/portfolioitem", method = RequestMethod.GET)
public String galleryPage(){
System.out.println("HIT HIT HIT HIT HIT!!!");
return "personalsite/features/portfolioitem";
}
galleryPage() renders a page but just the String personalsite/features/portfolioitem on the page.
---------------------------UPDATE 1------------------------------------
I decided to see if I could use Spring-boot `#RestController` to route my pages but that was unsuccessful. This is how I did it:
//try mapping to contact and gallery and see what happens
#RequestMapping(value = "/features/portfolioitem", method = RequestMethod.GET)
#ResponseBody
public String galleryPage(){
System.out.println("HIT HIT HIT HIT HIT!!!");
return "views/features/portfolioitem";
}
#RequestMapping(value = "/", method = RequestMethod.GET)
#ResponseBody
public String indexPage(){
System.out.println("I be in here too");
return "index";
}
WebConfig.java
#Configuration
public class WebConfig extends WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter{
private static final Logger LOGGER = Logger.getLogger(WebConfig.class);
#Bean
InternalResourceViewResolver internalResourceViewResolver(){
InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
viewResolver.setPrefix("/webapp/");
viewResolver.setSuffix(".html");
return viewResolver;
}
#Override
public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer){
configurer.enable();
}
}
This this only renders the string of whatever the method returns and Angular doe not load.
---------------------Update 2----------------------------
<?xml version='1.0' encoding='utf-8'?>
<Server port="8005" shutdown="SHUTDOWN">
<Listener className="org.apache.catalina.startup.VersionLoggerListener" />
<!-- Security listener. Documentation at /docs/config/listeners.html
<Listener className="org.apache.catalina.security.SecurityListener" />
-->
<!--APR library loader. Documentation at /docs/apr.html -->
<Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on" />
<!-- Prevent memory leaks due to use of particular java/javax APIs-->
<Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener" />
<Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener" />
<Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener" />
<GlobalNamingResources>
<!-- Editable user database that can also be used by
UserDatabaseRealm to authenticate users
-->
<Resource name="UserDatabase" auth="Container"
type="org.apache.catalina.UserDatabase"
description="User database that can be updated and saved"
factory="org.apache.catalina.users.MemoryUserDatabaseFactory"
pathname="conf/tomcat-users.xml" />
</GlobalNamingResources>
<Service name="Catalina">
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
<!-- Define an AJP 1.3 Connector on port 8009 -->
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443" />
<Engine name="Catalina" defaultHost="localhost">
<Realm className="org.apache.catalina.realm.LockOutRealm">
<!-- This Realm uses the UserDatabase configured in the global JNDI
resources under the key "UserDatabase". Any edits
that are performed against this UserDatabase are immediately
available for use by the Realm. -->
<Realm className="org.apache.catalina.realm.UserDatabaseRealm"
resourceName="UserDatabase"/>
</Realm>
<Host name="localhost" appBase="webapps"
unpackWARs="true" autoDeploy="true">
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
prefix="localhost_access_log" suffix=".txt"
pattern="%h %l %u %t "%r" %s %b" />
</Host>
</Engine>
</Service>
</Server>
--------------------Update 3------------------------------
I added server.contextPath=/personalsite/ to my application.properties
I then change <base href="/"> to this is good because now my IDE is doing the same thing as tomcat. Index.html will render athttp://localhost:8081/personalsite/#/BUT once I click a link I get a blank page, for examplehttp://localhost:8081/features/portfolioitembutpersonalsite` is missing from the path. I add that and I get the following page:
Update 1:
You should add 'server.contextPath=/' to your 'application.properties' file.
Update 2:
You need to remove the #ResponseBody annotation if you want Spring to resolve your view, rather than return a string, from your galleryPage method.
Update 3:
If your entire application is a single page application, with embedded templates, and you want your application, when refreshed on any valid path (like '/features/portfolioitem') to render index.html, you need to route every request to your index method. Try this:
#RequestMapping(value = "/**", method = RequestMethod.GET)
public String indexPage(){
System.out.println("I be in here too");
return "index";
}
This should load your index.html for all URLS. It is then up to your application to determine if the URL is valid.
Also, make sure you have $locationProvider.html5Mode(true); set in your app.