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.

Read more…

Filesystem in C++17

Multi-Domain Docker Containers

Use case

We have several server applications in the same development environment, each application is bundled in a Docker container, e.g: "Container A" and "Container B".

With Docker those applications have the same IP address. One way to differentiate and access to an specific application is exposing different ports.

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

Containers exposing the same IP address and different ports

But that solution is a little bit confusing, does 8080 mean we are accessing to "application A"?

It would be simpler and easier to remind something like:

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

Accessing applications by domain name

Get that extra semantic value is much simpler than I thought at the beginning and you will see below.

Read more…

Rust web frameworks comparison

I'm doing some experiments with Rust because it is a language that promises to be as fast as C/C++, but safer in regards to memory management. Essentially, it doesn't allow the developer to do "bad things" with the memory like: forgetting release the memory that is not going to be used anymore or release memory if the developer is not the owner. In such scenarios, Rust won't compile.

Just for learning I've started a small project that offers a REST API, so I've started looking for frameworks to ease/speed up the development. I've found a Rust web frameworks comparison: https://github.com/flosse/rust-web-framework-comparison

Convert files formats: Windows to Unix

If you are developing from a Windows environment to a Unix target environment, most likely you have had this issue: You install source files in Windows format in your Unix environment.

There is a way quite simple to convert all your files from Windows to Unix format:

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

I got it, of course, form http://stackoverflow.com/questions/11929461/how-can-i-run-dos2unix-on-an-entire-directory

REST URLs

Software Maintenance

Few days ago at work, I had to fulfill a document where I had to select a type of software maintenance that I was going to apply.

The fact was I had only two choices, it seemed me very weird because during my degree I studied 3 or 4 kinds of software maintenance.

Today I have found my Software Engineering class notes, then the types of Software Maintenance sorted descending by percentage of time spent:

Perfective: Activities to improve or add new functionalities required by the user.
Adaptative: Activities to adapt the system to technological environment changes (hardware or software).
Corrective: Fix defects in hardware or software detected by user running the production system.
Preventive: Activities to ease the future system maintenance.