alex-arriaga

alex-arriaga June 25, 2019

Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html” in Nginx when deploying an Angular application

Angular, JavaScript, Web Development 3 Replies

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

1	Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

This happens in Google Chrome and any modern browser that supports JavaScript modules. For example when “building” the Angular 8+ app, this file is usually generated, that is NOT a regular JavaScript file but a JavaScript module.

polyfills-es2015.js:1

1	polyfills-es2015.js:1

There are two important parts to solve this problem:

Solution Part 1. Set the “base-href” to the same sub directory that is inside of your “dist” directory.

Angular 8+ exports your application into a “dist/my-app-sub-directory”, notice there is now a sub directory inside “dist” (in previous versions of Angular your app was exported in “dist” directly, that’s not the case anymore). In order to fix this problem be sure you use the flag to configure the base-href as follows:

ng build --prod --baseHref=/my-app-sub-directory/

1	ng build --prod --baseHref=/my-app-sub-directory/

For a complete working example using multi-lingual configurations check this repository out.

Solution Part 2. If after setting the base-href you are still getting a similar error, try to indicate to your server how to “manage” JavaScript modules.

In Nginx that can be done using a configuration such as this one in your server block:

location ~ .js {
   add_header Content-Type text/javascript;
}

location ~ .js {

add_header Content-Type text/javascript;

}

See the full server block configuration file for Nginx here.

If you are looking for something just for development purposes Live Server + a custom middleware can do the job.

Check this example of a custom middleware. Run it with:

node node-scripts/live-server.js

1	node node-scripts/live-server.js

That’s it. See you next time!

alex-arriaga April 9, 2019

Stencil.js error when running the “build” script: TypeError: Cannot read property ‘toString’ of undefined at e.getRenderedHash [Solved]

Uncategorized No Reply

If you are getting this error when running yarn build or npm run build that is probably because the versions of both the stencil core and stencil router are outdated.

For solving this issue, just update both dependencies:

yarn add @stencil/core@next
yarn add @stencil/router --dev

1 2	yarn add @stencil/core@next yarn add @stencil/router --dev

Here are my current dependencies, just for reference:

{
    "dependencies":
    {
        "@stencil/core": "^0.18.1",
    },
    "devDependencies":
    {
        "@stencil/router": "^0.3.3",
        "workbox-build": "3.4.1"
    }
}

{

"dependencies":

{

"@stencil/core": "^0.18.1",

"devDependencies":

{

"@stencil/router": "^0.3.3",

"workbox-build": "3.4.1"

}

If you are interested in knowing more about this issue, please refer to: https://github.com/ionic-team/stencil-router/issues/86 and https://github.com/ionic-team/stencil-app-starter/issues/64.

That’s it, from now on your build should work as expected.

alex-arriaga March 18, 2019

Build a blog with Carbon LDP and Angular – Part 1

Computer Sciences, Enterprise Development, Semantic Web No Reply

In this tutorial, we are going to be creating an awesome blog engine using two great tools: Angular and Carbon LDP.

This tutorial was inspired by the official one published by the Carbon LDP team in https://carbonldp.com/blog/2018/11/23/build-a-blog-with-carbon-ldp-and-react-part-1/

In order to successfully go through this tutorial, JavaScript and CSS knowledge is required.

Complementary source code is available in carbonldp-angular-blog repository.

In today’s part, we will be focusing on building the UI with Angular and Angular Material by using the Angular CLI.

The end goal

We know building a robust and powerful blog engine (such as WordPress) is not a trivial task, however, with these steps, you will be able to understand the concepts behind building applications with Carbon LDP and Angular.

Create the project skeleton using Angular CLI

Install the Angular CLI

sudo npm install -g @angular/cli

1	sudo npm install -g @angular/cli

Create the new Angular app

ng new carbonldp-angular-blog

1	ng new carbonldp-angular-blog

Answer the Angular CLI questions (we will use SCSS as pre-processor)

? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? SCSS

1 2	? Would you like to add Angular routing? (y/N) y ? Which stylesheet format would you like to use? SCSS

Once the scaffolding is done, run following command and this is how your fresh Angular app should look:

# This will run a local server in port 4200 by default, so please visit http:localhost:4200 to see your app

cd carbonldp-angular-blog
ng serve

# This will run a local server in port 4200 by default, so please visit http:localhost:4200 to see your app

cd carbonldp-angular-blog

ng serve

If you take a look at the project structure, these are the file will appear:

.
├── README.md
├── angular.json
├── e2e
│&nbsp;&nbsp; ├── protractor.conf.js
│&nbsp;&nbsp; ├── src
│&nbsp;&nbsp; └── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── src
│&nbsp;&nbsp; ├── app
│&nbsp;&nbsp; ├── assets
│&nbsp;&nbsp; ├── browserslist
│&nbsp;&nbsp; ├── environments
│&nbsp;&nbsp; ├── favicon.ico
│&nbsp;&nbsp; ├── index.html
│&nbsp;&nbsp; ├── karma.conf.js
│&nbsp;&nbsp; ├── main.ts
│&nbsp;&nbsp; ├── polyfills.ts
│&nbsp;&nbsp; ├── styles.scss
│&nbsp;&nbsp; ├── test.ts
│&nbsp;&nbsp; ├── tsconfig.app.json
│&nbsp;&nbsp; ├── tsconfig.spec.json
│&nbsp;&nbsp; └── tslint.json
├── tsconfig.json
└── tslint.json

├── README.md

├── angular.json

├── e2e

│   ├── protractor.conf.js

│   ├── src

│   └── tsconfig.e2e.json

├── package-lock.json

├── package.json

├── src

│   ├── app

│   ├── assets

│   ├── browserslist

│   ├── environments

│   ├── favicon.ico

│   ├── index.html

│   ├── karma.conf.js

│   ├── main.ts

│   ├── polyfills.ts

│   ├── styles.scss

│   ├── test.ts

│   ├── tsconfig.app.json

│   ├── tsconfig.spec.json

│   └── tslint.json

├── tsconfig.json

└── tslint.json

src/index.html is the app entry point (where everything starts), src/app/main.ts is the “main” file from Angular, src/app is where all our code will usually be.

Add Angular Material

Installation

Since our main goal in this series is to focus on learning how Carbon LDP and Angular can work together, we will be using a set of proven components by Angular Material.

Let’s install our dependencies by following the official Angular Material documentation:

npm install --save @angular/material @angular/cdk @angular/animations

1	npm install --save @angular/material @angular/cdk @angular/animations

Configure animations

Open src/app/app.module.ts and import there the BrowserAnimationsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserAnimationsModule,

BrowserModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Import the component modules

Let’s do a quick test using the “Button” module, for doing that, we need to import the corresponding module to our src/app/app.module.ts

import { MatButtonModule } from '@angular/material';

1	import { MatButtonModule } from '@angular/material';

@NgModule({
  declarations: [
  // More components here...
  ],
  imports: [
    // More modules here...
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule({

declarations: [

// More components here...

imports: [

// More modules here...

MatButtonModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Next, open src/app/app.component.html and remove everything except the router-outlet and add your brand new material button as follows:

<button mat-raised-button color="primary">Primary</button>
<router-outlet></router-outlet>

1 2	<button mat-raised-button color="primary">Primary</button> <router-outlet></router-outlet>

No errors in our console, but our button looks kind of sad… let’s add a material theme to make our material components beautiful.

Including a theme

Open src/styles.scss, and add this line to it:

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

1 2	/* You can add global styles to this file, and also import other style files */ @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Go to your web browser, you should see your “primary” button with a blue background.

Adding Material Design icons

One of the easiest ways to add support for icons is by using a font, for doing that, open src/index.html and add a <link /> tag with the reference to the font family with Material Icons, this is how our src/index.html file will be after adding the icons.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CarbonldpAngularBlog</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Adding support for icons -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
  <app-root></app-root>
</body>
</html>

<!doctype html>

<head>

<title>CarbonldpAngularBlog</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

For alternate ways for adding icons, please visit Angular Material documentation.

Implement a Basic Drawer

It is time to continue building our UI. Let’s create a “Layout” component within,src/components/layout this is really easy if we use the Angular CLI

ng generate component components/layout

1	ng generate component components/layout

The previous command will generate the following files; let’s open the src/app/components/layout/layout.component.html

src/app/components/
└── layout
    ├── layout.component.html
    ├── layout.component.scss
    ├── layout.component.spec.ts
    └── layout.component.ts

src/app/components/

└── layout

├── layout.component.html

├── layout.component.scss

├── layout.component.spec.ts

└── layout.component.ts

Add the Angular Material modules in src/app/app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';

import {MatButtonModule, MatIconModule, MatSidenavModule, MatToolbarModule, MatNavList} from '@angular/material';
import {LayoutComponent} from './components/layout/layout.component';

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    MatNavList,
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatIconModule,
    MatSidenavModule,
    MatToolbarModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import {BrowserModule} from '@angular/platform-browser';

import {NgModule} from '@angular/core';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {AppRoutingModule} from './app-routing.module';

import {AppComponent} from './app.component';

import {MatButtonModule, MatIconModule, MatSidenavModule, MatToolbarModule, MatNavList} from '@angular/material';

import {LayoutComponent} from './components/layout/layout.component';

@NgModule({

declarations: [

AppComponent,

LayoutComponent,

MatNavList,

imports: [

BrowserAnimationsModule,

BrowserModule,

AppRoutingModule,

MatButtonModule,

MatIconModule,

MatSidenavModule,

MatToolbarModule,

providers: [],

bootstrap: [AppComponent],

})

export class AppModule {}

Open src/app/components/layout.component.html and paste this code:

<div class="layout-container" [class.example-is-mobile]="mobileQuery.matches">
  <mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="snav.toggle()">
      <mat-icon>menu</mat-icon>
    </button>
    <h2 class="layout-app-name">CarbonLDP / Angular Blog Engine</h2>
  </mat-toolbar>

  <mat-sidenav-container class="layout-sidenav-container"
                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">

    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
                 [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">

      <mat-nav-list>
        <div class="b-button-container">
          <a class="b-button" mat-list-item routerLink=".">
            <i class="b-button__icon material-icons">home</i>
            <span class="b-button__label">Home</span>
          </a>
        </div>

        <div class="b-button-container">
          <a class="b-button" mat-list-item routerLink=".">
            <i class="b-button__icon material-icons">note</i>
            <span class="b-button__label">Blog</span>
          </a>
        </div>
      </mat-nav-list>

    </mat-sidenav>

    <mat-sidenav-content>
      <div class="b-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi architecto asperiores assumenda deserunt
          dignissimos enim ex, facere laboriosam neque obcaecati possimus qui quia reiciendis soluta, vitae
          voluptatibus?
          Ipsam, veniam!</p>
      </div>

    </mat-sidenav-content>

  </mat-sidenav-container>
</div>

<mat-toolbar color="primary" class="example-toolbar">

<mat-icon>menu</mat-icon>

</button>

<h2 class="layout-app-name">CarbonLDP / Angular Blog Engine</h2>

</mat-toolbar>

<mat-sidenav-container class="layout-sidenav-container"

[style.marginTop.px]="mobileQuery.matches ? 56 : 0">

<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"

[fixedInViewport]="mobileQuery.matches" fixedTopGap="56">

<mat-nav-list>

</a>

</div>

</a>

</div>

</mat-nav-list>

</mat-sidenav>

<mat-sidenav-content>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi architecto asperiores assumenda deserunt

dignissimos enim ex, facere laboriosam neque obcaecati possimus qui quia reiciendis soluta, vitae

voluptatibus?

Ipsam, veniam!</p>

</div>

</mat-sidenav-content>

</mat-sidenav-container>

</div>

In addition, let’s create some styles in src/app/components/layout.component.scss

.layout-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-is-mobile .layout-toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

.layout-app-name {
  margin-left: 8px;
}

.layout-sidenav-container {
  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
     causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
  flex: 1;
}

.layout-is-mobile .layout-sidenav-container {
  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
     `<body>` to be our scrolling element for mobile layouts. */
  flex: 1 0 auto;
}

.b-button-container {

  .b-button {
    display: block;
    min-height: 34px;
    min-width: 145px;
    padding: 5px 10px;
  }

  .b-button__icon {
    margin-top: 5px;
    margin-right: 5px;
    display: block;
    float: left;
  }

  .b-button__label {
    margin-top: 10px;
    display: block;
    float: left;
  }
}

.b-content {
  padding: 20px;
}

.layout-container {

display: flex;

flex-direction: column;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.layout-is-mobile .layout-toolbar {

position: fixed;

/* Make sure the toolbar will stay on top of the content as it scrolls past. */

z-index: 2;

}

.layout-app-name {

margin-left: 8px;

}

.layout-sidenav-container {

/* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This

causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */

flex: 1;

}

.layout-is-mobile .layout-sidenav-container {

/* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the

`<body>` to be our scrolling element for mobile layouts. */

flex: 1 0 auto;

}

.b-button-container {

.b-button {

display: block;

min-height: 34px;

min-width: 145px;

padding: 5px 10px;

}

.b-button__icon {

margin-top: 5px;

margin-right: 5px;

display: block;

float: left;

}

.b-button__label {

margin-top: 10px;

display: block;

float: left;

}

.b-content {

padding: 20px;

}

And modify the src/styles.scss

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

/* You can add global styles to this file, and also import other style files */

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {

font-family: Roboto, Arial, sans-serif;

margin: 0;

}

Checkpoint: let’s see how our app is looking so far and make a commit to our Git repository.

Implement navigation routes

It is time, to start thinking in our navigation routes, for instance, we will have

alex-arriaga March 15, 2019

Configure two websites in the same instance in Liferay 7

Enterprise Development, Liferay 2 Replies

One of the most common configurations we want to apply in Liferay is to serve two or more websites with the same Liferay instance. However, configuring Liferay in the right way to serve our websites and generate the links properly is not an easy and immediate task.

This guide contains a set of steps you can follow in order to configure two websites in the same Liferay instance. We are supposing you have a regular Liferay configuration with these points:

Tomcat is serving Liferay in the port 8080
Apache is getting the HTTPS client’s requests (port 443)

Step 1. Configure Virtual Hosts in Apache

A virtual host configuration for domain-one.com (Apache)

This is an example of a virtual host configuration file compatible with Apache. This configuration needs the mod_proxy and mod_ssl enabled.

<IfModule mod_ssl.c>
	<VirtualHost _default_:443>
		# Your server name should be set here
        ServerName domain-one.com

		DocumentRoot /var/www/html

		ErrorLog ${APACHE_LOG_DIR}/error_domain-one.com.log
		CustomLog ${APACHE_LOG_DIR}/access_domain-one.com.log combined

		# We turn SSL Engine on
		SSLEngine on
        SSLProtocol -ALL +TLSv1 +TLSv1.1 +TLSv1.2
        SSLCipherSuite ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256

        # We provide the certificates
		SSLCertificateFile	/path/to/ssl/certs/domain-one.com.crt
        SSLCertificateChainFile /path/to/ssl/certs/ca.crt
		SSLCertificateKeyFile /path/to/ssl/certs/domain-one.com.key

		<FilesMatch "\.(cgi|shtml|phtml|php)$">
				SSLOptions +StdEnvVars
		</FilesMatch>

		# This allows or prevents Apache httpd from functioning as a forward proxy server. (Setting ProxyRequests to Off does not disable use of the ProxyPass directive.)
		# In a typical reverse proxy or gateway configuration, this option should be set to Off.
		ProxyRequests Off

		# We configure our mod_proxy module (including the reverse proxy)
		# This line is VERY important, since it will allow us to pass the Host: line from the incoming request to the proxied host, 
		# instead of the hostname specified in the ProxyPass line
        ProxyPreserveHost On
        ProxyTimeout 300

        # This directive allows remote servers to be mapped into the space of the local server. The local server does not act as a proxy in the conventional sense but appears to be a mirror of the remote server. 
        # The local server is often called a reverse proxy or gateway. 
        ProxyPass        /  http://192.168.1.203:8080/

		# This directive lets Apache httpd adjust the URL in the Location, Content-Location and URI headers on HTTP redirect responses. 
		# This is essential when Apache httpd is used as a reverse proxy (or gateway) to avoid bypassing the reverse proxy because of HTTP redirects on the backend servers 
		# which stay behind the reverse proxy.
        
        ProxyPassReverse /  http://192.168.1.203:8080/

	</VirtualHost>
</IfModule>

# Your server name should be set here

ServerName domain-one.com

DocumentRoot /var/www/html

ErrorLog ${APACHE_LOG_DIR}/error_domain-one.com.log

CustomLog ${APACHE_LOG_DIR}/access_domain-one.com.log combined

# We turn SSL Engine on

SSLEngine on

SSLProtocol -ALL +TLSv1 +TLSv1.1 +TLSv1.2

SSLCipherSuite ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256

# We provide the certificates

SSLCertificateFile /path/to/ssl/certs/domain-one.com.crt

SSLCertificateChainFile /path/to/ssl/certs/ca.crt

SSLCertificateKeyFile /path/to/ssl/certs/domain-one.com.key

SSLOptions +StdEnvVars

</FilesMatch>

# This allows or prevents Apache httpd from functioning as a forward proxy server. (Setting ProxyRequests to Off does not disable use of the ProxyPass directive.)

# In a typical reverse proxy or gateway configuration, this option should be set to Off.

ProxyRequests Off

# We configure our mod_proxy module (including the reverse proxy)

# This line is VERY important, since it will allow us to pass the Host: line from the incoming request to the proxied host,

# instead of the hostname specified in the ProxyPass line

ProxyPreserveHost On

ProxyTimeout 300

# This directive allows remote servers to be mapped into the space of the local server. The local server does not act as a proxy in the conventional sense but appears to be a mirror of the remote server.

# The local server is often called a reverse proxy or gateway.

ProxyPass / http://192.168.1.203:8080/

# This directive lets Apache httpd adjust the URL in the Location, Content-Location and URI headers on HTTP redirect responses.

# This is essential when Apache httpd is used as a reverse proxy (or gateway) to avoid bypassing the reverse proxy because of HTTP redirects on the backend servers

# which stay behind the reverse proxy.

ProxyPassReverse / http://192.168.1.203:8080/

</VirtualHost>

</IfModule>

A virtual host configuration for domain-two.com (Apache)

Repeat the previous configuration just replacing the “domain-one.com” configuration by “domain-two.com”.

Step 2. Configure Proxy Connector in Tomcat

Following is a fragment of the server.xml file available in a path similar to /path/to/liferay/tomcat/conf/server.xml

<?xml version='1.0' encoding='utf-8'?>
<Server port="8005" shutdown="SHUTDOWN" address="192.168.1.203">
  <!-- A "Service" is a collection of one or more "Connectors" that share
       a single "Container" Note:  A "Service" is not itself a "Container",
       so you may not define subcomponents such as "Valves" at this level.
       Documentation at /docs/config/service.html
   -->
  <Service name="Catalina">
    <!-- A "Connector" represents an endpoint by which requests are received
         and responses are returned. Documentation at :
         Java HTTP Connector: /docs/config/http.html (blocking & non-blocking)
         Java AJP  Connector: /docs/config/ajp.html
         APR (HTTP/AJP) Connector: /docs/apr.html
         Define a non-SSL/TLS HTTP/1.1 Connector on port 8080
    -->
    <Connector port="8080" address="192.168.1.203" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" URIEncoding="UTF-8"
               proxyPort="443"
               scheme="https"
              />
    </Engine>
  </Service>
</Server>

<?xml version='1.0' encoding='utf-8'?>

<!-- A "Service" is a collection of one or more "Connectors" that share

a single "Container" Note: A "Service" is not itself a "Container",

so you may not define subcomponents such as "Valves" at this level.

Documentation at /docs/config/service.html

-->

<!-- A "Connector" represents an endpoint by which requests are received

and responses are returned. Documentation at :

Java HTTP Connector: /docs/config/http.html (blocking & non-blocking)

Java AJP Connector: /docs/config/ajp.html

APR (HTTP/AJP) Connector: /docs/apr.html

Define a non-SSL/TLS HTTP/1.1 Connector on port 8080

-->

<Connector port="8080" address="192.168.1.203" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" URIEncoding="UTF-8"

proxyPort="443"

scheme="https"

</Engine>

</Service>

</Server>

The important part of the previous file is the <Connector />. Please, be aware we ARE NOT setting the proxyName which could be configured to one valid domain like domain-one.com.

Caution. Following configuration is NOT going to work since we are setting the proxyName which will modify the Host request header.

<Connector port="8080" address="192.168.1.203" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" URIEncoding="UTF-8"
               proxyPort="443"
               proxyName="domain-one.com"
               scheme="https"
              />

<Connector port="8080" address="192.168.1.203" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" URIEncoding="UTF-8"

proxyPort="443"

proxyName="domain-one.com"

scheme="https"

Correct. Now, if we remove the proxyName, our Liferay websites would be ready to keep the Host request header and generate the links as expected.

<Connector port="8080" address="192.168.1.203" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" URIEncoding="UTF-8"
               proxyPort="443"
               scheme="https"
              />

<Connector port="8080" address="192.168.1.203" protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443" URIEncoding="UTF-8"

proxyPort="443"

scheme="https"

Step 3. Configure Virtual Hosts for Public / Private Pages in Liferay

Go to Your Site > Site Settings > General > Site URL and configure your “Friendly URL”, “Public Pages” and “Private Pages”. Notice this last “Private Pages” is empty to Liferay can autogenerate the URLs.

This process needs to be repeated for both “domain-one.com”, “domain-two.com” and any other domain you want to configure in the same Liferay instance.

That’s it! From now on, your Liferay instance is going to be able to serve many sites with custom domains.

See you next time!

Best regards.

alex-arriaga March 14, 2019

¡Y sigo siendo feliz a tu lado!

Uncategorized No Reply

Hola mi amor,

Te escribo estas palabras literalmente desde el otro lado del mundo. Hoy me tocó estar en el viejo continente y mira que video he encontrado:

Fue el video de por allá de Diciembre de 2015 cuando te pedí que fueras mi esposa, hoy estamos ya rumbo a nuestro 3er. aniversario como esposos y nuestro 12vo. año de habernos conocido.

Cómo ha pasado el tiempo, tantos momentos que hemos vivido, y pido a la vida que me siga prestando muchos más años para estar a tu lado.

No necesité toda una sinfonía de música clásica para decirte lo que sentía en ese momento, y aunque bien sabes que soy un admirador de la misma, mis sentimientos son simples, sinceros, no complejos ni pretenciosos.\n

Tengo mi futuro en las manos, tengo el corazón a tus pies, tengo lo que tanto esperaba, desde que te encontré.

Si algún día tenemos hijos espero que puedan armar nuestra historia a través de todos estos escritos y sepan cuánto amé a su madre.

Nos vemos pronto mi amor. Nos vemos pronto.\n\n

alex-arriaga January 29, 2019

How to see DNS registers on Ubuntu?

Uncategorized No Reply

Use this command:

nmcli dev show | grep DNS

1	nmcli dev show \| grep DNS

alex-arriaga July 27, 2018

[SOLVED] “Could not open /dev/vmmon: No such file or directory” Error in Mac OS X

Enterprise Development 3 Replies

The problem

When trying to open a virtual machine for the very first time, after installing VMWare Fusion in a fresh installation of OS X, I am receiving the error “Could not open /dev/vmmon: No such file or directory”.

The solution

This is usually due to the security restrictions about identified developers of Mac OS X applications, to solve it just go to System Preferences > Security & Privacy and verify if VMWare is allowed to run and there is no mentioning of a blocked application.

That’s it! From now on VMWare should run smoothly.

See you next time!

Alex Arriaga

alex-arriaga July 25, 2018

How to set JAVA_HOME in Mac OS X High Sierra

Enterprise Development, Liferay 3 Replies

This post describes how to configure the JAVA_HOME environment variable required by many enterprise tools, frameworks, and CMSes. For instance, Liferay, Tomcat, etc. will use this variable to work properly.

In case you have changed your default shell (Bash) that comes with OS X out-of-the-box, please read How to set JAVA_HOME in Mac OS X High Sierra with Fish shell

Step 1. Be sure you don’t have the JAVA_HOME already set

Run this command:

echo $JAVA_HOME

1	echo $JAVA_HOME

If the output is empty, then we don’t have the variable correctly set.

Step 2. Find the Java Development Kit directory

If you don’t know where the Java Development Kit (JDK) was installed, just run:

sudo find / -name javac

1	sudo find / -name javac

The output may be similar to this:

/usr/bin/javac
/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/bin/javac
/System/Library/Frameworks/JavaVM.framework/Versions/A/Commands/javac
find: /private/var/db/ConfigurationProfiles/Store: Operation not permitted
find: /private/var/folders/y5/abbasdf/0/SafariFamily: Operation not permitted

/usr/bin/javac

/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/bin/javac

/System/Library/Frameworks/JavaVM.framework/Versions/A/Commands/javac

find: /private/var/db/ConfigurationProfiles/Store: Operation not permitted

find: /private/var/folders/y5/abbasdf/0/SafariFamily: Operation not permitted

Notice the second line, that is our JDK installation directory, so the directory we need to use is this one: /Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/

The path may vary depending on the exact version of Java you have installed

Step 3. Add the JAVA_HOME to the Bash configuration file

Let’s open the file (if don’t exist, just create it):

nano ~/.bash_profile

1	nano ~/.bash_profile

Add the JAVA_HOME variable at the end of ~/.bash_profile

export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/"

1	export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/"

Save the file ~/.bash_profile (in nano just press Control + O followed by Control + X to close the file). Finally, let’s review or configuration by typing:

echo $JAVA_HOME

1	echo $JAVA_HOME

This command should now print the correct JAVA_HOME:

/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/

1	/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/

If you don’t see your environment variable, please close all your terminal windows and re-start them so you have a “fresh” start.

Sweet, isn’t it?

See you next time.

Alex Arriaga

alex-arriaga July 25, 2018

How to set JAVA_HOME in Mac OS X High Sierra with Fish shell

Enterprise Development, Java EE, Liferay 2 Replies

This configuration is useful when you decided to change your default shell in OS X, for example in our case we have Fish shell and it will not have the JAVA_HOME set out-of-the-box.

Are you looking for the instructions about how to set the JAVA_HOME for Bash? Visit How to set JAVA_HOME in Mac OS X High Sierra

How can we test if we have configured this environment variable? Easy, just type:

echo $JAVA_HOME

1	echo $JAVA_HOME

If the output is empty, then we don’t have the variable in place.

Step 1. Find and open your configuration file

If you are using Fish shell, chances are you are also using Oh My Fish which provides infrastructure to allow you to install packages to extend and modify the look and feel of your shell. Let’s open the configuration file then:

nano ~/.config/fish/conf.d/omf.fish

1	nano ~/.config/fish/conf.d/omf.fish

The “~/” is a shortcut for accessing the home directory of your user.

Step 2. Locate your Java directory where the Java Development Kit was installed

If you don’t know where the Java Development Kit (JDK) was installed, just run:

sudo find / -name javac

1	sudo find / -name javac

The output may be similar to this:

/usr/bin/javac
/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/bin/javac
/System/Library/Frameworks/JavaVM.framework/Versions/A/Commands/javac
find: /private/var/db/ConfigurationProfiles/Store: Operation not permitted
find: /private/var/folders/y5/abbasdf/0/SafariFamily: Operation not permitted

/usr/bin/javac

/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/bin/javac

/System/Library/Frameworks/JavaVM.framework/Versions/A/Commands/javac

find: /private/var/db/ConfigurationProfiles/Store: Operation not permitted

find: /private/var/folders/y5/abbasdf/0/SafariFamily: Operation not permitted

Notice the second line, that is our JDK installation directory, so the directory we need to use is this one: /Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/

The path may vary depending on the exact version of Java you have installed

Step 3. Add the JAVA_HOME to the Oh My Fish configuration file

Let’s open the file:

nano ~/.config/fish/conf.d/omf.fish

1	nano ~/.config/fish/conf.d/omf.fish

Add the JAVA_HOME variable at the end of ~/.config/fish/conf.d/omf.fish

export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/"

1	export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/"

Save the file ~/.config/fish/conf.d/omf.fish (in nano just press Control + O followed by Control + X to close the file). Finally, let’s review or configuration by typing:

echo $JAVA_HOME

1	echo $JAVA_HOME

This command, should now print the correct JAVA_HOME:

/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/

1	/Library/Java/JavaVirtualMachines/jdk1.8.0_171.jdk/Contents/Home/

Sweet, isn’t it?

See you next time.

Alex Arriaga

What would you like to know about?

All posts by alex-arriaga

The end goal

Create the project skeleton using Angular CLI

Add Angular Material

Installation

Configure animations

Import the component modules

Including a theme

Adding Material Design icons

Implement a Basic Drawer

Implement navigation routes

Step 1. Configure Virtual Hosts in Apache

Step 2. Configure Proxy Connector in Tomcat

Step 3. Configure Virtual Hosts for Public / Private Pages in Liferay

The problem

The solution

Step 1. Be sure you don’t have the JAVA_HOME already set

Step 2. Find the Java Development Kit directory

Step 3. Add the JAVA_HOME to the Bash configuration file

Step 1. Find and open your configuration file

Step 2. Locate your Java directory where the Java Development Kit was installed

Step 3. Add the JAVA_HOME to the Oh My Fish configuration file

Join me, have fun and learn!

Tag Cloud

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Tag Cloud

Archives

Join me, have fun and learn!

Recent Posts

Archives

Tag Cloud

Recent Comments

Categories

All posts by
alex-arriaga