Multiple Webapps with Docker Compose

  • Learn how to setup a custom network for your containers: container A talks to container B
  • Learn how to run multiple webapps inside Docker containers on different ports with Docker Compose

Download complete source code here

  • Create the network with $docker network create skynet
  • Run with $docker-compose up
  • Stop with $<Ctrl + C>
  • Clean up from time to time (beware, network will be deleted as well) with $docker system prune -a -f
  • access via http://localhost:8080/sample
  • access via http://localhost:8081/sample

HowTo – responsive font size with CSS

Example of responsive font size where 30px is the minimum size with the smallest viewport width of 300px and where 70px is the maximum size at the largest viewport width of 1800px.

What does ‚responsive‘ mean?.
The content will adapt to the window size. It will become larger when the window becomes larger to an extent where the maximum font-size definition is reached.
Or vice versa, it will shrink the content when the window size becomes smaller.

Your CSS file will contain:

/* Example of responsive font size where 30px is the minimum size with the smallest viewport width of 300px
and where 70px is the maximum size at the largest viewport width of 1800px: */
font-size: calc(30px + (70 - 30) * ((100vw - 300px) / (1800 - 300)));

Why not simply use „vh“ or „vw“?

font-size: 10vh;

The vh will not relate to the window size in relation. It will only take either width OR height as indication and thus mess up.
To maintain the relation, use the formula as described above.

How to fill display with CSS – determine display size

Usually, when using percentage values, CSS will always refer to the parent container (DIV).

If you want to set the size according to the overall display, the area in which the client and browser displays your content, use vh.

An example CSS class:

.myCssClass {
height: 100vh /*vh resolves to the display size, not the parent container size. It will now fill the screen 100%*/

React – Howto redirect to other component

Sometimes, for example on a login, you want to redirect the User to another page in your application.

We assume that your Application has the default address of http://localhost:3000.

In this example, the application has the path localhost:3000 and you can navigate to the news with /news.

import {Redirect} from "react-router-dom";
//... your program code goes here...

   <Redirect to='news'/>

The return statement will redirect to localhost:3000/news

How to debug a React Application in Webstorm

In Webstorm, start your application. I prefer the command line:
$ npm start

Then create a new JavaScript debug configuration:

Run – Edit configurations … add JavaScript Debug.

Choose your project path (because we are Harder IT Consulting, our nickname is HIT – C:\HIT\<application>)

Paste the URL http://localhost:3000 (or the URL you have configured your React Application to run on, 3000 is the default).

Press the DEBUG button at the top right corner with your Debug configuration selected.

How to make Virtualbox available on Windows (Forwarding)

Taken from our Archives:

Sometimes fate forces us to work with Windows.
Because Linux is so good, we get a VirtualBox to emulate it.

How can we access a webapplication via localhost:8080 from the Windows machine inside of a Webbrowser?

VirtualBox Manager -> VM-Tools -> Settings -> Network -> Port Forwarding

Name: http8080 
Protocol: TCP
HostIP: empty
Host-Port: 8080
Guest-IP: empty
Guest-Port: 8080

Name: ssh 
Protocol: TCP
Host-Port: 2222
Guest-IP: empty
Guest-Port: 22