Can Syncfusion for React work fine with Tomcat, Weblogic, and other conventional App Server instead of Node.js?
3 Replies
Hi Caroline,
Thanks for your patience.
Query 1: Could I run it with Tomcat / Weblogic instead of Node.js?
We would like to let you know that, we can run the React application in Tomcat / Weblogic server and we have to compile the application in the Node.js environment.
Query 2: Even for the Single Page Application with React Router? If so what are the steps of configurations?
Please find the below steps to create a single page application with react router.
We can compile the tsx files in the node environment. Please follow the below steps to create the react with router and using webpack for compilation.
Prerequisites
Install [Node.js](https://nodejs.org/en/) if it is not already installed.
Install the webpack globally using the following command after node installation.
|
npm i -g [email protected]
|
Creating application
- Create a folder and Open Command prompt window in that folder.
- Run the command “npm init” , a command line interface for creating package.json will proceed.
- Give the details as in sample react app’s package.json provided and give yes, now package.json file will be created.
- Add the below dependencies and scripts in the package.json file
|
"scripts": {
"start": "webpack && webpack-dev-server --open-page src/",
"build": "webpack"
},
"dependencies": {
"@syncfusion/ej2-react-lists": "^16.1.28",
"@syncfusion/ej2-react-navigations": "^16.1.28",
"react": "~16.2.0",
"react-dom": "~16.2.0",
"react-router-dom": "^4.2.2",
"@types/react-router-dom": "^4.2.3",
"@types/react": "~16.0.36",
"@types/react-dom": "~16.0.3",
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"awesome-typescript-loader": "^3.4.1",
"css-loader": "~0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "~1.1.6",
"style-loader": "~0.20.1",
"typescript": "~2.7.1",
"url-loader": "~0.6.2",
"webpack": "~3.10.0",
"webpack-dev-server": "^2.11.1"
}
|
- Add the webpack.config.js file in root folder at the below content in the file
|
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var basePath = __dirname;
module.exports = {
context: path.join(basePath, "src"),
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
entry: [
'./main.tsx',
],
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devServer: {
port: 5001,
stats: 'errors-only'
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader',
options: {
useBabel: true,
},
},
{
test: /\.css$/,
include: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
},
}),
},
]
},
plugins: [
new ExtractTextPlugin({
filename: 'bundle.css',
disable: false,
allChunks: true,
}),
]
}
|
6. Use the npm install command in the command prompt to install the required dependent packages in the application
7. Create a src folder in the root and add the index.html file with the following content.
---- > src
----> index.html
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel='nofollow' href="../dist/bundle.css" rel="stylesheet" />
<title>EJ2 react component</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="../dist/bundle.js"></script></body>
</body>
</html> |
8. Create a files accordion.tsx and lisview.tsx file to create a component with EJ2 React component with router link for the next page. Paste the corresponding code in it.
accordion.tsx
|
import * as React from "react"
import { Link } from 'react-router-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { AccordionComponent,AccordionItemsDirective,AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import '@syncfusion/ej2-react-navigations/styles/material.css';
export class Accordion extends React.Component {
render(){
return (
<div>
<h2>Essential J2 React Accordion component</h2>
<Link to="/">Show Listview component</Link>
<br />
<hr/>
<br/>
<AccordionComponent>
<AccordionItemsDirective>
<AccordionItemDirective header='ASP.NET' expanded={true} content='Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' />
<AccordionItemDirective header='ASP.NET MVC' content='The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' />
<AccordionItemDirective header='JavaScript' content='JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' />
</AccordionItemsDirective>
</AccordionComponent>
</div>
)
}
}
|
lisview.tsx
|
import * as React from "react"
import { Link } from 'react-router-dom';
import {ListViewComponent} from '@syncfusion/ej2-react-lists';
import '@syncfusion/ej2-react-lists/styles/material.css'
export class Lists extends React.Component {
public data: { [key: string]: Object }[] = [
{ text: 'Hennessey Venom', id: 'list-01' },
{ text: 'Bugatti Chiron', id: 'list-02' },
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
{ text: 'SSC Ultimate Aero', id: 'list-04' },
{ text: 'Koenigsegg CCR', id: 'list-05' },
{ text: 'McLaren F1', id: 'list-06' },
{ text: 'Aston Martin One- 77', id: 'list-07' },
{ text: 'Jaguar XJ220', id: 'list-08' },
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' },
];
render(){
return (
<div>
<h2>Essential JS2 ListView ListViewComponent</h2>
<Link to="/accordion">show Accordion</Link>
<hr/>
<br />
<ListViewComponent id="sample-list-flat" dataSource={this.data}> </ListViewComponent>
</div>
)
}
}
|
9. Add a file main.tsx to the src folder which acts as entry point for the webpack compilation. We have to implement the routing functionality for our application in the
main.tsx
|
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { HashRouter, Switch, Route } from 'react-router-dom';
import { Lists } from './listview';
import { Accordion } from './accordion';
ReactDOM.render(
<HashRouter>
<Switch>
<Route exact={true} path="/" component={Lists} />
<Route path="/accordion" component={Accordion} />
</Switch>
</HashRouter>
, document.getElementById('root')
);
|
10. Run the following commands to launch the application
|
npm start |
When executing the command the app will launch in the localhost:5001.
11. The bundled output files (js and css) will be created in the dist folder which can be used in the html page
Note: Refer the index.html content given in step7.
For your convenience we have prepared a single Page Application sample with react router. Please find the sample in below link
To run the sample use below commands
npm install
npm install webpack @2.6.1 -g
npm start
Query 3: I believe to run the app with Tomcat / Weblogic, we need to transpile .tsx files into .js files instead? What are the recommended tools and steps?
The compilation of .tsx file to .js file is handled from Node.js and the steps are given in the below getting started documentation link.
Query 4: Is there a chance that I could compile it with maven (with some additional plugin)? So that I could just compile my java code and these .tsx files in one go?
No, we couldn’t able compile the tsx file from maven and the compilation can be processed from Node.js.
Query 5: I have installed the Syncfusion EJ2 into my local, and I found this bundle.js in folderAppData\Local\Syncfusion\EssentialStudio\16.1.0.24\Web (Essential JS 2)\React\dist. What is this bundle.js actually and how could I utilize it?
The bundle.js file which is found in the mentioned location is the bundled output of our React sample browser and it is used to run the application in the server. You can compile the bundle.js for your application by using webpack and use it in the Tomcat / Weblogic server to run the application.
Regards,
Sridurgha U
SIGN IN To post a reply.
