March 2019 – Alex Arriaga

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

What would you like to know about?

Alex Arriaga

Monthly Archives:
March 2019

Build a blog with Carbon LDP and Angular – Part 1

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

Configure two websites in the same instance in Liferay 7

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

¡Y sigo siendo feliz a tu lado!

Join me, have fun and learn!

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Archives

Join me, have fun and learn!

Recent Posts

Archives

Recent Comments

Categories

What would you like to know about?

Monthly Archives: March 2019

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

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

Monthly Archives:
March 2019