I am not able to load react bundle index.js in liferay portlet jsp.what i am doing is bundled my react component in index.js and trying to render that react component in my liferay portal jsp but i am not able to see my react component render in liferay when i deploy my portlet
Please find my view.jsp
<%@ include file="/WEB-INF/jsp/init.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
<b><liferay-ui:message key="react-springmvc-portlet.caption"/></b>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript" src="/dist/index.js"></script>
</html>
my index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Grommet</title>
<meta name="description" content="" />
<meta name="fragment" content="!" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" href="/img/shortcut-icon.png" />
<link rel="apple-touch-icon" sizes="196x196" type="image/png" href="/img/mobile-app-icon.png">
<link rel="stylesheet" type="text/css" href="/index.css">
<style>
body.loading {margin: 0px; width: 100vw; height: 100vh;
background-image: radial-gradient(circle at 50% 15%, #fff, #fff 30%, #ccc);
}
body.loading #content {
position: relative;
width: 100%;
height: 100%;
font-size: 0px;
}
body.loading #logo {
position: absolute; display: block; width: 140px; height: 140px;
top: calc(50vh - 70px); left: calc(50vw - 70px);
}
div.t {
display: inline-block;
box-sizing: border-box;
margin: 0px;
width: 10vw;
height: 10vh;
background-color: #e2e2e2;
}
div.t.on {
-webkit-animation: pulse 3s infinite linear alternate;
-moz-animation: pulse 3s infinite linear alternate;
animation: pulse 3s infinite linear alternate;
}
div.t.on:hover {
-webkit-animation: none;
background-color: #ccc;
}
@-webkit-keyframes pulse {
100% { background-color: #fff; }
}
@-moz-keyframes pulse {
100% { background-color: #fff; }
}
@keyframes pulse {
100% { background-color: #fff; }
</style>
</head>
<body class="loading">
<div id="content" tabindex="-1" style="outline: none;">
<svg id="logo" viewBox="0 0 182 182" version="1.1" role="img">
<path role="presentation"
d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"
stroke-width="18" stroke="#865CD6" fill="none"></path>
</svg>
<script>
var c = document.getElementById("content");
for (var i = 0; i < 100; i += 1) {
c.insertAdjacentHTML('beforeend', '<div class="t off"></div>');
}
var timer = setInterval(function () {
var again = false;
if (document.body.classList.contains('loading')) {
var ts = c.querySelectorAll('div.t.off');
if (ts.length > 0) {
var index = Math.floor(Math.random() * ts.length);
ts[index].classList.remove('off');
ts[index].classList.add('on');
if (ts.length > 1) {
again = true;
}
}
}
if (! again) {
clearInterval(timer);
}
}, 100)
</script>
</div>
<script async src="/index.js"></script>
</body>
</html>
Based on the way you write your JSP and include
/WEB-INF/in the path to your JSPs, I'm assuming that you're working on Liferay 6.x.I can't fully help you with react, but maybe guide you in the right direction:
First of all: In the portal world, your portlet's view.jsp must not have the
<html>,<head>and<body>tags, as a portlet will only render as part of the page.Next, validate the JS include that you have in your view.jsp - most likely it will result in a 404 error: When your view.jsp is sent to the browser, its URL will be relative to Liferay, not to your plugin's webapplication context. Thus, you must manually recreate that context, in your case
/dist/index.js. Check with your browser's developer tools where the page is requested from and make adjustments.The best way you could deal with this problem is to just include an appropriate declaration for the JS you need to include in liferay-portlet.xml. The DTD is available and well documented to find the appropriate item (e.g. check footer-portlet-javascript or search for other 'javascript' occurrences, adapt URL for the actual version you're using)
I'm not sure how you go from index.js to index.html. Again - if the file is included in your page: You don't need the
<html>and<body>markup. If it ends up to be rendered in an iframe, you do. Again, check for 404 errors in your developer tools, so that you can figure out how to address your html file.