67 lines
22 KiB
HTML
67 lines
22 KiB
HTML
<!doctype html><html lang=en class="js csstransforms3d"><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=generator content="Hugo 0.80.0"><meta name=description content="Strolch is a parameterized framework for use on servers and IoT"><meta name=author content="Robert von Burg"><link rel=icon href=/favicon.ico type=image/ico><title>Web App - Strolch</title><link href=/css/nucleus.css?1678977091 rel=stylesheet><link href=/css/fontawesome-all.min.css?1678977091 rel=stylesheet><link href=/css/hybrid.css?1678977091 rel=stylesheet><link href=/css/featherlight.min.css?1678977091 rel=stylesheet><link href=/css/perfect-scrollbar.min.css?1678977091 rel=stylesheet><link href=/css/auto-complete.css?1678977091 rel=stylesheet><link href=/css/atom-one-dark-reasonable.css?1678977091 rel=stylesheet><link href=/css/theme.css?1678977091 rel=stylesheet><link href=/css/hugo-theme.css?1678977091 rel=stylesheet><link href=/css/theme-green.css?1678977091 rel=stylesheet><script src=/js/jquery-3.3.1.min.js?1678977091></script><style>:root #header+#content>#left>#rlblock_left{display:none!important}</style></head><body data-url=/development/web-app/><nav id=sidebar><div id=header-wrapper><div id=header><a id=logo href=/><img src=/logo.png></a></div><div class=searchbox><label for=search-by><i class="fas fa-search"></i></label><input data-search-input id=search-by type=search placeholder=Search...>
|
|
<span data-search-clear><i class="fas fa-times"></i></span></div><script type=text/javascript src=/js/lunr.min.js?1678977091></script><script type=text/javascript src=/js/auto-complete.js?1678977091></script><script type=text/javascript>var baseurl="https:\/\/strolch.li\/";</script><script type=text/javascript src=/js/search.js?1678977091></script></div><section id=homelinks><ul><li><a class=padding href=/><i class="fas fa-home"></i>Home</a></li></ul></section><div class=highlightable><ul class=topics><li data-nav-id=/api/ title=API class=dd-item><a href=/api/>API</a></li><li data-nav-id=/documentation/ title=Documentation class=dd-item><a href=/documentation/>Documentation</a><ul><li data-nav-id=/documentation/architecture/ title=Architecture class=dd-item><a href=/documentation/architecture/>Architecture</a></li><li data-nav-id=/documentation/model/ title=Model class=dd-item><a href=/documentation/model/>Model</a></li><li data-nav-id=/documentation/do-and-donts/ title="Do and Don't" class=dd-item><a href=/documentation/do-and-donts/>Do and Don't</a></li><li data-nav-id=/documentation/runtime-configuration/ title="Runtime Configuration" class=dd-item><a href=/documentation/runtime-configuration/>Runtime Configuration</a></li><li data-nav-id=/documentation/realms/ title=Realms class=dd-item><a href=/documentation/realms/>Realms</a></li><li data-nav-id=/documentation/components/ title=Components class=dd-item><a href=/documentation/components/>Components</a></li><li data-nav-id=/documentation/services-and-commands/ title="Services and Commands" class=dd-item><a href=/documentation/services-and-commands/>Services and Commands</a></li><li data-nav-id=/documentation/searches/ title=Searches class=dd-item><a href=/documentation/searches/>Searches</a></li><li data-nav-id=/documentation/queries/ title=Queries class=dd-item><a href=/documentation/queries/>Queries</a></li><li data-nav-id=/documentation/transactions/ title=Transactions class=dd-item><a href=/documentation/transactions/>Transactions</a></li><li data-nav-id=/documentation/policies/ title=Policies class=dd-item><a href=/documentation/policies/>Policies</a></li><li data-nav-id=/documentation/observers/ title=Observers class=dd-item><a href=/documentation/observers/>Observers</a></li><li data-nav-id=/documentation/versioning/ title=Versioning class=dd-item><a href=/documentation/versioning/>Versioning</a></li><li data-nav-id=/documentation/reports/ title=Reports class=dd-item><a href=/documentation/reports/>Reports</a></li><li data-nav-id=/documentation/priviles/ title=Privileges class=dd-item><a href=/documentation/priviles/>Privileges</a></li></ul></li><li data-nav-id=/plc/ title=PLC class=dd-item><a href=/plc/>PLC</a><ul><li data-nav-id=/plc/architecture/ title=Architecture class=dd-item><a href=/plc/architecture/>Architecture</a></li><li data-nav-id=/plc/example-set-up/ title="Example Set-Up" class=dd-item><a href=/plc/example-set-up/>Example Set-Up</a></li></ul></li><li data-nav-id=/tutorial/ title=Tutorial class=dd-item><a href=/tutorial/>Tutorial</a><ul><li data-nav-id=/tutorial/configuration/ title=Configuration class=dd-item><a href=/tutorial/configuration/>Configuration</a></li><li data-nav-id=/tutorial/model/ title=Model class=dd-item><a href=/tutorial/model/>Model</a></li><li data-nav-id=/tutorial/crud-book/ title="CRUD Book" class=dd-item><a href=/tutorial/crud-book/>CRUD Book</a></li></ul></li><li data-nav-id=/download/ title=Download class=dd-item><a href=/download/>Download</a></li><li data-nav-id=/development/ title=Development class="dd-item
|
|
parent"><a href=/development/>Development</a><ul><li data-nav-id=/development/prerequisites/ title=Prerequisites class=dd-item><a href=/development/prerequisites/>Prerequisites</a></li><li data-nav-id=/development/building/ title="Building Strolch" class=dd-item><a href=/development/building/>Building Strolch</a></li><li data-nav-id=/development/maven-archetypes/ title="Maven Archetypes" class=dd-item><a href=/development/maven-archetypes/>Maven Archetypes</a></li><li data-nav-id=/development/web-app/ title="Web App" class="dd-item active"><a href=/development/web-app/>Web App</a></li><li data-nav-id=/development/main-class-app/ title="Main Class App" class=dd-item><a href=/development/main-class-app/>Main Class App</a></li><li data-nav-id=/development/converting-existing/ title="Converting Existing App" class=dd-item><a href=/development/converting-existing/>Converting Existing App</a></li></ul></li><li data-nav-id=/blog/ title=Blog class=dd-item><a href=/blog/>Blog</a><ul><li data-nav-id=/blog/post-00018/ title="Strolch PLC 1.2.3 released" class=dd-item><a href=/blog/post-00018/>Strolch PLC 1.2.3 released</a></li><li data-nav-id=/blog/post-00017/ title="Strolch 1.8.5 and PLC 1.2.2 are out" class=dd-item><a href=/blog/post-00017/>Strolch 1.8.5 and PLC 1.2.2 are out</a></li><li data-nav-id=/blog/post-00016/ title="Strolch PLC now also on Maven Central" class=dd-item><a href=/blog/post-00016/>Strolch PLC now also on Maven Central</a></li><li data-nav-id=/blog/post-00015/ title="Release of Strolch 1.6.100" class=dd-item><a href=/blog/post-00015/>Release of Strolch 1.6.100</a></li><li data-nav-id=/blog/post-00014/ title="Strolch Reports" class=dd-item><a href=/blog/post-00014/>Strolch Reports</a></li><li data-nav-id=/blog/post-00013/ title="Strolch Searches" class=dd-item><a href=/blog/post-00013/>Strolch Searches</a></li><li data-nav-id=/blog/post-00012/ title="Wow, the many changes!" class=dd-item><a href=/blog/post-00012/>Wow, the many changes!</a></li><li data-nav-id=/blog/post-00011/ title="Strolch now on Maven Central" class=dd-item><a href=/blog/post-00011/>Strolch now on Maven Central</a></li><li data-nav-id=/blog/post-00010/ title="Versioning of objects" class=dd-item><a href=/blog/post-00010/>Versioning of objects</a></li><li data-nav-id=/blog/post-00009/ title="Release 1.2.0" class=dd-item><a href=/blog/post-00009/>Release 1.2.0</a></li><li data-nav-id=/blog/post-00008/ title="Strolch Update" class=dd-item><a href=/blog/post-00008/>Strolch Update</a></li><li data-nav-id=/blog/post-00007/ title="Activities: Beginning of the planning engine" class=dd-item><a href=/blog/post-00007/>Activities: Beginning of the planning engine</a></li><li data-nav-id=/blog/post-00006/ title="Strolch Documentation" class=dd-item><a href=/blog/post-00006/>Strolch Documentation</a></li><li data-nav-id=/blog/post-00005/ title="Strolch Release 1.0.0" class=dd-item><a href=/blog/post-00005/>Strolch Release 1.0.0</a></li><li data-nav-id=/blog/post-00004/ title="DurationParameter and other minor changes: Release 1.0.0-RC4" class=dd-item><a href=/blog/post-00004/>DurationParameter and other minor changes: Release 1.0.0-RC4</a></li><li data-nav-id=/blog/post-00003/ title="DB Initialization: Release 1.0.0-RC3" class=dd-item><a href=/blog/post-00003/>DB Initialization: Release 1.0.0-RC3</a></li><li data-nav-id=/blog/post-00002/ title="Release 1.0.0-RC2" class=dd-item><a href=/blog/post-00002/>Release 1.0.0-RC2</a></li><li data-nav-id=/blog/post-00001/ title="Release 1.0.0-RC1" class=dd-item><a href=/blog/post-00001/>Release 1.0.0-RC1</a></li></ul></li></ul><section id=shortcuts><h3>More</h3><ul><li><a class=padding href=https://strolch.li/tags><i class="fas fa-tags"></i>Tags</a></li><li><a class=padding href=https://github.com/strolch-li><i class="fab fa-github"></i>GitHub project</a></li><li><a rel=me class=padding href=https://mstdn.gsi.li/@eitch target=_blank><i class="fab fa-mastodon"></i>Mastodon</a></li></ul></section><section id=footer><p>Built with <a href=https://github.com/matcornic/hugo-theme-learn target=_blank><i class="fas fa-heart"></i></a>from <a href=https://getgrav.org target=_blank>Grav</a> and <a href=https://gohugo.io/ target=_blank>Hugo</a></p></section></div></nav><section id=body><div id=overlay></div><div class="padding highlightable"><div><div id=top-bar><div id=top-github-link><a class=github-link title="Edit this page" href=https://github.com/strolch-li/strolch-website/tree/develop/content/development/web-app.md target=blank><i class="fas fa-code-branch"></i><span id=top-github-link-text>Edit this page</span></a></div><div id=breadcrumbs itemscope itemtype=http://data-vocabulary.org/Breadcrumb><span id=sidebar-toggle-span><a href=# id=sidebar-toggle data-sidebar-toggle><i class="fas fa-bars"></i></a></span><span id=toc-menu><i class="fas fa-list-alt"></i></span><span class=links><a href=/>Strolch Overview</a> > <a href=/development/>Development</a> > Web App</span></div><div class=progress><div class=wrapper><nav id=TableOfContents><ul><li><a href=#prerequisites>Prerequisites</a></li><li><a href=#install-the-web-dependencies>Install the web dependencies</a></li><li><a href=#creating-a-strolch-web-app>Creating a Strolch Web App</a></li><li><a href=#installing-the-web-dependencies>Installing the web dependencies</a><ul><li><a href=#building-and-running-the-war-locally>Building and running the WAR locally</a></li><li><a href=#running-the-war-on-a-remote-system>Running the WAR on a remote system</a></li></ul></li></ul></nav></div></div></div></div><div id=head-tags></div><div id=body-inner><h1>Web App</h1><h2 id=prerequisites>Prerequisites</h2><p>To start developing web-based Strolch apps you need the following:</p><ul><li>Apache Tomcat 9.x (10.x isn’t supported yet). Just unpack it somewhere, to be used later, when running the
|
|
application.</li><li>NodeJS v11.x (other versions don’t work with <a href=https://bower.io target=_blank>Bower</a>, the installation is described below.</li></ul><div class="notices tip"><p>Note: Strolch’s Web UI is still using
|
|
<a href=https://polymer-library.polymer-project.org/1.0/docs/devguide/feature-overview target=_blank>Polymer 1.x</a>. This isn’t a big
|
|
concern, as thanks to the polyfills, it works on all browsers, including Internet Explorer 11.</p></div><h2 id=install-the-web-dependencies>Install the web dependencies</h2><p>The Strolch Web App uses <a href=https://nodejs.org/download/release/v11.15.0/ target=_blank>NodeJS v11.x</a> to build the web dependencies.
|
|
Please
|
|
download the relevant platform’s package, unpack it, and add the <code>bin</code> directory
|
|
to your path variable and add a <code>NODE_HOME</code> variable pointing to the root directory of the NodeJS folder.</p><p>Test that NodeJS is working properly:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>$ npm --version
|
|
6.8.0
|
|
</code></pre></div><p>Once NodeJS is installed, then you can prepare the web dependencies:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>npm install -g bower
|
|
npm install -g gulp
|
|
</code></pre></div><p>And then check that both bower and gulp work as expected:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>$ bower --version
|
|
1.8.14
|
|
|
|
$ gulp --version
|
|
<span style=color:#f92672>[</span>17:22:56<span style=color:#f92672>]</span> CLI version 2.0.1
|
|
</code></pre></div><h2 id=creating-a-strolch-web-app>Creating a Strolch Web App</h2><p>The following shows the maven command to create the new maven project using Strolch’s webapp maven archetype. Note that
|
|
you should replace the placeholders in the brackets:</p><div class="notices warning"><p>Note: you need to have the Strolch Maven archetypes installed to your local maven repo, otherwise the
|
|
following command will fail.</p></div><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>mvn archetype:generate <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -DarchetypeGroupId<span style=color:#f92672>=</span>li.strolch <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -DarchetypeArtifactId<span style=color:#f92672>=</span>strolch.mvn.archetype.webapp <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -DarchetypeVersion<span style=color:#f92672>=</span>0.1.0-SNAPSHOT <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -DgroupId<span style=color:#f92672>=</span><my.groupid> <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -DartifactId<span style=color:#f92672>=</span><my-artifactId> <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -Dversion<span style=color:#f92672>=</span><my.version> <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -Dpackage<span style=color:#f92672>=</span><my.package> <span style=color:#ae81ff>\
|
|
</span><span style=color:#ae81ff></span> -DappName<span style=color:#f92672>=</span><span style=color:#e6db74>"<my app name>"</span>
|
|
</code></pre></div><h2 id=installing-the-web-dependencies>Installing the web dependencies</h2><p>In the newly generated artifact, change to the <code>webapp</code> folder, and then run <code>npm install</code>:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>cd <my-artifactId>/src/main/webapp
|
|
npm install
|
|
</code></pre></div><p>This will first install the NodeJS modules, and then call bower to install the bower packages.</p><div class="notices warning"><p>Note: Whenever the bower.json is changed, e.g. updating a version or adding a package, then you
|
|
should
|
|
again call <code>npm install</code> inside the webapp folder.</p></div><h3 id=building-and-running-the-war-locally>Building and running the WAR locally</h3><p>Once the web dependencies are installed, all components are available to finally build the WAR and run it on a servlet
|
|
container. The archetype is pre-configured to run using the <code>dev-local</code> Strolch runtime environment configuration. This
|
|
can be achieved by compiling using the following command:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>mvn clean package -Prelease -Dstrolch.env<span style=color:#f92672>=</span>dev.local
|
|
</code></pre></div><p>Building the WAR uses the <code>package</code> maven goal, but to have the optimized WAR use the <code>release</code> profile. The environment
|
|
variable <code>strolch.env=dev.local</code> configures the WAR to have its runtime point to the absolute path where the sources are
|
|
located.</p><p>After the build is complete, the WAR will be located in the <code>target/</code> directory. Copy it to Tomcat’s <code>webapps/</code>
|
|
directory and then start tomcat with the
|
|
following command:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>cd tomcat9/bin
|
|
./catalina.sh run
|
|
</code></pre></div><p>Tomcat should then see the WAR and deploy it. If everything was setup correctly, then you should see the following in
|
|
the logs after startup:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>INFO l.s.a.impl.ComponentContainerImpl:283 start - System: OS: Linux 5.16.15 Arch: amd64 on Java Azul Systems, Inc. <span style=color:#ae81ff>17</span> CPU Cores: <span style=color:#ae81ff>32</span>
|
|
INFO l.s.a.impl.ComponentContainerImpl:284 start - Memory: Memory available 16.8 GB / Used: 604.0 MB / Free: 540.6 MB
|
|
INFO l.s.a.impl.ComponentContainerImpl:285 start - Using locale en with timezone Europe/Zurich
|
|
INFO l.s.a.impl.ComponentContainerImpl:288 start - file.encoding: UTF-8 / sun.jnu.encoding UTF-8
|
|
INFO l.s.a.impl.ComponentContainerImpl:307 start - <my-artifactId>:dev All <span style=color:#ae81ff>12</span> Strolch Components started. Took 120ms. Strolch is now ready to be used. Have fun <span style=color:#f92672>=))</span>
|
|
INFO li.strolch.test.web.StartupListener:43 contextInitialized - Started <my app name> in 557ms
|
|
</code></pre></div><p>And now you can open a browser and login: <code>http://localhost:8080/<my-artifactId></code></p><p>The default username and password are <code>admin</code> / <code>admin</code>. After logging in, you should be greeted with the following
|
|
screen:
|
|
<img src=/assets/images/demo-app.png alt="Strolch Demo App"></p><h3 id=running-the-war-on-a-remote-system>Running the WAR on a remote system</h3><p>The sources currently are configured for the <code>dev.local</code> environment. To use the WAR on a remote system, we need to
|
|
configure another environment, and have the path of the runtime updated in the <code>StrolchBootstrap.xml</code> file. Open the
|
|
file <code>src/main/resources/StrolchBootstrap.xml</code> and modify the <code>root</code> path in the <code>test</code> environment:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-xml data-lang=xml>
|
|
<span style=color:#f92672><env</span> <span style=color:#a6e22e>id=</span><span style=color:#e6db74>"test"</span> <span style=color:#a6e22e>default=</span><span style=color:#e6db74>"true"</span><span style=color:#f92672>></span>
|
|
<span style=color:#f92672><root></span>/absolute/path/to/runtime<span style=color:#f92672></root></span>
|
|
<span style=color:#f92672><environment></span>test<span style=color:#f92672></environment></span>
|
|
<span style=color:#f92672></env></span>
|
|
</code></pre></div><p>Now you need to copy the existing <code>runtime</code> directory to the remote machine at the above location.</p><p>Now we can build the project using the <code>test</code> environment:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>mvn clean package -Prelease -Dstrolch.env<span style=color:#f92672>=</span>test
|
|
</code></pre></div><p>Now copy the WAR from the <code>target/</code> directory to the <code>webapps/</code> directory of your Tomcat 9.x installation. Now you can
|
|
start tomcat using:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>catalina.sh run
|
|
</code></pre></div><p>In the console you’ll then see something like this:</p><pre><code class=language-log data-lang=log>INFO l.s.a.impl.ComponentContainerImpl:283 start - System: OS: Linux 5.16.15 Arch: amd64 on Java Azul Systems, Inc. 17 CPU Cores: 32
|
|
INFO l.s.a.impl.ComponentContainerImpl:284 start - Memory: Memory available 16.8 GB / Used: 604.0 MB / Free: 540.6 MB
|
|
INFO l.s.a.impl.ComponentContainerImpl:285 start - Using locale en with timezone Europe/Zurich
|
|
INFO l.s.a.impl.ComponentContainerImpl:288 start - file.encoding: UTF-8 / sun.jnu.encoding UTF-8
|
|
INFO l.s.a.impl.ComponentContainerImpl:307 start - <my-artifactId>:test All 12 Strolch Components started. Took 43ms. Strolch is now ready to be used. Have fun =))
|
|
INFO c.atexxi.esytest.web.StartupListener:43 contextInitialized - Started <my app name> in 244ms
|
|
</code></pre><p>And now you can open a browser and login: <code>http://remove-server:8080/<my-artifactId></code></p><p>The default username and password are <code>admin</code> / <code>admin</code>. After logging you, you should see the following view:</p><p><img src=/assets/images/demo-app.png alt="Strolch Demo App"></p><p>Happy coding =))</p><footer class=footline></footer></div></div><div id=navigation><a class="nav nav-prev" href=/development/maven-archetypes/ title="Maven Archetypes"><i class="fa fa-chevron-left"></i></a><a class="nav nav-next" href=/development/main-class-app/ title="Main Class App" style=margin-right:0><i class="fa fa-chevron-right"></i></a></div></section><div style=left:-1000px;overflow:scroll;position:absolute;top:-1000px;border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px><div style=border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px></div></div><script src=/js/clipboard.min.js?1678977091></script><script src=/js/perfect-scrollbar.min.js?1678977091></script><script src=/js/perfect-scrollbar.jquery.min.js?1678977091></script><script src=/js/jquery.sticky.js?1678977091></script><script src=/js/featherlight.min.js?1678977091></script><script src=/js/highlight.pack.js?1678977091></script><script>hljs.initHighlightingOnLoad();</script><script src=/js/modernizr.custom-3.6.0.js?1678977091></script><script src=/js/learn.js?1678977091></script><script src=/js/hugo-learn.js?1678977091></script><script src=/mermaid/mermaid.js?1678977091></script><script>mermaid.initialize({startOnLoad:true});</script><script type=text/javascript>var _paq=window._paq=window._paq||[];_paq.push(["setDocumentTitle",document.domain+"/"+document.title]);_paq.push(["setCookieDomain","*.strolch.li"]);_paq.push(['trackPageView']);_paq.push(['enableLinkTracking']);(function(){var u="https://piwik.eitchnet.ch/";_paq.push(['setTrackerUrl',u+'matomo.php']);_paq.push(['setSiteId','2']);var d=document,g=d.createElement('script'),s=d.getElementsByTagName('script')[0];g.type='text/javascript';g.async=true;g.src=u+'matomo.js';s.parentNode.insertBefore(g,s);})();</script></body></html> |