Create SPA: React + Typescript + Parcel

I was about to start yet another personal project, it consists of a SPA (Single Page Application) for a travel journal.

Some time ago I tried Parcel, I really loved how simple it was to create a simple project, from scratch, using Typescript + React stack. I've decided to create this template or base project, so next time I want to create a new SPA with my favorite frontend stack, I will only have to git clone https://github.com/carlosvin/react-typescript-parcel-template.git.

Quick start

Development server

git clone https://github.com/carlosvin/react-typescript-parcel-template.git
cd react-typescript-parcel-template
yarn install
yarn start

Last yarn start command will: - start a development server at http://localhost:1234 with hot module replacement - build automatically development javascript files with source maps

Basically each time you save a file, you will see automatically the result at http://localhost:1234 without refreshing the page.

Build production bundle

yarn build

Parcel's default optimizations will be applied to generated files.

Files are saved at dist folder. Inside dist folder there is also a file with information about bundle content sizes: dist/report.html.

Step by step project creation

In this section I will describe how I created this project.

Firstly, create package.json with yarn init command.

yarn init

Add required dependencies

Add react dependencies.

yarn add @types/react @types/react-dom react react-dom

Previous command modifies package.json file adding dependencies section and will also install React packages in node_modules folder.

{
  "name": "project_name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@types/react": "^16.7.18",
    "@types/react-dom": "^16.0.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

Add Typescript compiler as development dependency.

yarn add --dev typescript

We also need Parcel bundler.

yarn add --dev parcel-bundler

I've added a non-required dependency, it is a plugin to generate a report of generated bundle contents (the parcel version of webpack-bundle-analyzer).

yarn add --dev parcel-plugin-bundle-visualiser

Create application source code

First we create the React application in src/index.tsx file.

import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.PureComponent {
    render() {
        return <h1>Hello world!</h1>;
    }
}

ReactDOM.render(
    <App />,
    document.getElementById("app")
);

Parcel can take index.html file as entry file and it figures out how to build the application. We create src/index.html as follows.

<html>
  <body>
    <div id="app"></div>
    <script src="./index.tsx"></script>
  </body>
</html>

We need div tag for React to inject the DOM elements. The script declaration is used by Parcel to find entry point to build.

I've added the commands:

  • build: Check "Build production bundle" section.
  • start: Check "Development server" section.
    "scripts": {
        "start": "parcel src/index.html",
        "build": "parcel build src/index.html"
    }

Then to it is really easy to:

  • run development server: yarn start
  • generate a production bundle: yarn build

Add scripts to run Parcel

There is another approach described in Parcel documentation that consists of installing Parcel globally.

I've opted for more isolated approach that affects only project you are working on, you just install Parcel as devDependency. There is a tiny drawback, you can't just run parcel index.html, because it is not installed in your system, but in node_modules.

There is a simple way to run any binary installed in node_modules, you can just run npx parcel index.html.

I like more to define build steps in package.json file, so you can have well defined commands to build your project.

Configure Typescript (optional)

Create a tsconfig.json file.

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    }
}

With this configuration, Typescript compiler will:

  • Generate files in dist folder.
  • Generate source maps.
  • Will not allow to declare any type, for example following declaration is not allowed: const elements: any;
  • Generated module code will be CommonJs.
  • Generated code will be ECMAScript 5 compliant.
  • Support JSX in .tsx files, in this case React type.

Custom Maven Plugin: Override default build lifecycle

I explained in previous article Example how to create custom Maven Plugin which overrides site lifecycle.

I have created another example to demonstrate how to override default Maven build lifecycle. Default build lifecycle is used to construct your software project, for example, it is executed when you run mvn install in jar type project.

You can find source code example at https://github.com/carlosvin/lifecycle-maven-plugin.

Hint

I've also created an archetype so you can easily create and play with the example.

Create example project just by running following command:

mvn archetype:generate -DarchetypeGroupId=com.github.carlosvin.archetype -DartifactId=lifecycle-maven-plugin-archetype -DarchetypeVersion=0.6

Example how to create custom Maven Plugin

Maven has lots of plugins to assist you in project construction, testing, packaging and deployment. For example if you want to compile C++ code instead of Java, you can use native-maven-plugin . But what if you need something more specific? Then you can create a custom Maven plugin.

I will explain how to create a simple custom maven plugin to generate static blog site from Markdown files. I know we can already do that with maven-site-plugin since version 3.3, I will just use it for learning purposes.

You can find whole source code example at https://github.com/carlosvin/blog-maven-plugin.

Leer más…

Sistema de Ficheros en C++17

Contenedores Docker multi-dominio

Caso de Uso

Tenemos varias aplicaciones servidoras a la vez en un mismo entorno de desarrollo, cada una encapsulada en un contenedor, llamémosles de ahora en adelante "Contenedor A" y "Contenedor B".

Utilizando docker estas aplicaciones tienen la misma dirección IP en nuestra máquina, una forma de distinguirlas es cambiando el puerto que exponen.

/galleries/docker-multidomain/ip.thumbnail.png

Aplicaciones exponiendo la misma dirección IP utilizando diferentes puertos para diferenciar las aplicaciones

Pero esto es un poco confuso, ¿8080 sigfica que accedemos a las "aplicación A" y 8081 significa "aplicación B"?

Sería mucho más sencillo de recordar algo así:

/galleries/docker-multidomain/domain.thumbnail.png

Diferenciando aplicaciones por nombre de dominio

Obtener este valor semántico extra es más sencillo de lo que parece.

Leer más…

Comparación frameworks REST para RUST

Estoy empezando a hacer mis primeros pinitos con Rust, es un lenguage de programación que promete ser tan rápido como C/C++, pero más seguro en cuanto a la gestión de memoria ser refiere. Básicamente, no permite al programador hacer "cosas malas" con la memoria como: olvidarse de liberar la memoria que no se va a utilizar o liberar memoria que no es tuya. En estos casos, Rust simplemente no compilará.

Para aprender he pensado en hacer algún pequeño proyecto, tengo algunas ideas, pero todas pasan por ofrecer una API REST, así que me he puesto a buscar frameworks que me faciliten esta tarea y me he llevado una grata sorpresa al encontrar una muy buena comparativa con el estado de los frameworks REST para Rust, a continuación os dejo el enlace:

https://github.com/flosse/rust-web-framework-comparison

Convertir archivos en formato Windows a formato Unix

Si alguna vez has programado desde un entorno Windows para entornos Unix, seguramente habrás tenido este problema: Los archivos que instalas en tu entorno Unix tienen formato Windows.

Hay un forma bastante sencilla de convertir todos los archivos que tienes en un directorio de formato Windows a Unix.

find . -type f -print0 | xargs -0 dos2unix

Lo he sacado, como no, de http://stackoverflow.com/questions/11929461/how-can-i-run-dos2unix-on-an-entire-directory

Creando REST URLs

Las primeras veces que me puse a diseñar una API REST cometí unos cuantos errores, por supuesto. A continuación os voy a contar algunos de los errores que cometí y lo que he entendido hasta hoy sobre la construcción de URLs REST con ejemplos.

Leer más…

Mantenimiento de Software

Hace unos días en el trabajo tuve que rellenar un documento en el que debía indicar el tipo de mantenimiento que debía hacer y sólo tenía dos opciones: correctivo y adaptativo. Esto me extrañó, porque el cambio que yo quería hacer no terminaba de encajar en ninguno de los dos tipos.

Haciendo memoria sobre lo que había dado en mi primera asignatura de Ingeniería del Software, conseguí recordar tres tipos, pero me parecía que me faltaba un tipo.

Hoy por casualidad he encontrado mis apuntes de Ingeniería del Software y estos son los tipos de mantenimiento ordenados de más a menos porcentaje de tiempo dedicado.

Perfectivo: Actividades para mejorar o añadir nuevas funcionalidades requeridas por el usuario.
Adaptativo: Actividades para adaptar el sistema a los cambios en su entorno tecnológico (Hardware o software).
Correctivo: Corregir defectos en el hardware o software detectados por el usuario durante la explotación del sistema.
Preventivo: Actividades para facilitar el mantenimiento del futuro sistema.