Thursday, 15 October 2020

Running Java in the Cloud - Jelastic

So I decided to try running some of my stuff in the cloud, instead of having to hire a Virtual Machine type thing.

In order to have to limit my changes, I decided to go with Jelastic1.

I decided to try out hosting provider EAPPS2, because they are one of the providers of PaaS3 with Jelastic4.

They suggested I'd read up on [5].

Some requirements I'd like:

  1. must support Let's Encrypt certificates
  2. access to the filesystem would be nice (I'm keeping logfiles)
  3. A Mysql/MariaDB database is a must
  4. Need to be able to upload an existing database
  5. Easily create backups.
  6. Must support websockets
  7. Support DNS for custom domains.

It supports all of those, and relieves me of some server administration and maintenance.

References

[1] Jelastic
https://jelastic.com/
[2] EAPPS HOSTING - Leading Managed Hosting Provider
https://www.eapps.com/
[4] eApps PaaS, Powered by Jelastic
https://www.eapps.com/platforms/paas.php
[3] Wikipedia - PaaS
https://en.wikipedia.org/wiki/Platform_as_a_service
[5] Getting Started with eApps Platform as a Service (PaaS)
https://support.eapps.com/index.php?/Knowledgebase/Article/View/535/79/getting-started-with-eapps-paas-platform-as-a-service
Jelastic Blog - JDBC Connection Pool for GlassFish and Payara Java Application Servers
https://jelastic.com/blog/jdbc-connection-pool-java-glassfish-payara/
Jelastic Blog - Free Let’s Encrypt SSL Certificates: Out-of-Box Integration with the Most Popular Software Stacks
https://jelastic.com/blog/free-ssl-certificates-with-lets-encrypt/
Jelastic - Import and Export Dump Files to MySQL/MariaDB
https://docs.jelastic.com/dump-import-export-to-mysql/
Jelastic - Storing Data in Local Filesystem
https://docs.jelastic.com/local-filesystem-storage/
DockerHub - jelastic/payara
https://hub.docker.com/r/jelastic/payara/
Jelastic - Sending e-mail from your jelastic environment
https://support.eapps.com/index.php?/Knowledgebase/Article/View/535/79/getting-started-with-eapps-paas-platform-as-a-service#sending-e-mail-from-your-jelastic-environment
Jelastic Developers Center - WebSockets Support for Java
https://docs.jelastic.com/websockets-java/
Jelastic Developers Center - Custom Domain Name
https://docs.jelastic.com/custom-domains/

Friday, 11 September 2020

My Angular App

Download nodejs from nodejs.org

Unpack nodejs

Install nodejs (and NPM to go with it automatically) locally.

$ ln -s node-v14.9.0-darwin-x64 nodejs

Add "export PATH=/Users/mrbear/nodejs/bin:$PATH" to .bashrc

Install Angular CLI1.

$ npm install -g @angular/cli
[angular@vps386 ~]$ ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.8
Node: 14.9.0
OS: darwin x64

Angular:
...
Ivy Workspace:

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.5

Update angular CLI

npm search @angular/cli

Initial project creation

[angular@vps386 ~]% ng new myproject
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE myproject/README.md (1027 bytes)
CREATE myproject/.editorconfig (274 bytes)
CREATE myproject/.gitignore (631 bytes)
CREATE myproject/angular.json (3590 bytes)
CREATE myproject/package.json (1261 bytes)
CREATE myproject/tsconfig.base.json (458 bytes)
CREATE myproject/tsconfig.json (426 bytes)
CREATE myproject/tslint.json (3184 bytes)
CREATE myproject/.browserslistrc (853 bytes)
CREATE myproject/karma.conf.js (1021 bytes)
CREATE myproject/tsconfig.app.json (292 bytes)
CREATE myproject/tsconfig.spec.json (338 bytes)
CREATE myproject/src/favicon.ico (948 bytes)
CREATE myproject/src/index.html (295 bytes)
CREATE myproject/src/main.ts (372 bytes)
CREATE myproject/src/polyfills.ts (2835 bytes)
CREATE myproject/src/styles.css (80 bytes)
CREATE myproject/src/test.ts (753 bytes)
CREATE myproject/src/assets/.gitkeep (0 bytes)
CREATE myproject/src/environments/environment.prod.ts (51 bytes)
CREATE myproject/src/environments/environment.ts (662 bytes)
CREATE myproject/src/app/app-routing.module.ts (245 bytes)
CREATE myproject/src/app/app.module.ts (393 bytes)
CREATE myproject/src/app/app.component.css (0 bytes)
CREATE myproject/src/app/app.component.html (25757 bytes)
CREATE myproject/src/app/app.component.spec.ts (1068 bytes)
CREATE myproject/src/app/app.component.ts (213 bytes)
CREATE myproject/e2e/protractor.conf.js (869 bytes)
CREATE myproject/e2e/tsconfig.json (299 bytes)
CREATE myproject/e2e/src/app.e2e-spec.ts (642 bytes)
CREATE myproject/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
Successfully initialized git.
[angular@vps386 ~]$ % ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.66 MB [initial] [rendered]
Date: 2020-09-02T12:23:53.701Z - Hash: c7223a73cc964c3ed1e6 - Time: 5305ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Creating our first component

[angular@vps386 ~]$ ng generate component player-settings
installing component
create src/app/player-settings/player-settings.component.css
create src/app/player-settings/player-settings.component.html
create src/app/player-settings/player-settings.component.spec.ts
create src/app/player-settings/player-settings.component.ts
update src/app/app.module.ts

Components, Directives, Pipes and Services

For an indepth explanation see reference [4].
modules
a grouping of different components and services
components
a component controls a patch of screen called a view
directives
Attribute or structural directives change the Dom. For example ngIf and ngFor. A component is basically a specialized form of directive.
pipes
filters, for example for displaying dates and currency which are built in filters.
services
independent business logic or connections to external sources wrapped in classes and injected.

Verifying Angular Version

The version of angular can be seen in the dom of your app, something like:
<app-root _nghost-jcv-c16="" ng-version="10.0.14">

Settings depending on environment (prod/test/dev)

There are different .ts files loaded depending on which environment you are building for. These are appropriately named environmnent.*.ts.

See for more information references 2 and 3.

Deploy

ng build --target=production --base-href '/myapp/'

References

[1] Github - Angular CLI
https://github.com/angular/angular-cli
[2] StackOverflow - How to config different development environment in angular 2 app
http://stackoverflow.com/questions/36004810/how-to-config-different-development-environment-in-angular-2-app
[3] Shayne Boywer: Angular CLI using the environment option
http://tattoocoder.com/angular-cli-using-the-environment-option/
[4] Angular 2 - Architecture
https://angular.io/docs/ts/latest/guide/architecture.html
Thoughtram - Understanding @Injectable in Angular
https://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html