Posted on

Ten Landing Pages in Five Minutes

Way back in October, 2022, Florin Pop tweeted this question:

He got 400 responses in 10 hours. Some were lighthearted: “I would use HTML.” Others went into some detail about a favorite webapp development stack. I came to the party late, but I thought it would be a fun thing to try.

There were no particular requirements or specifications beyond the phrase, “landing page.” So, I felt free to make a few assumptions:

  • We don’t count the time required to install tools. We begin with all tools installed and working. This is an important point, because the process of getting the tools installed can be tedious and time-consuming. Every time there’s a new version of just about anything in your stack, everything breaks. Sometimes, even the tool installation procedure or script doesn’t work. So let’s not count that time for purposes of this exercise. That said: Even with various installation issues, the entire process only took about an hour, including all ten solutions. We’re well within the 24-hour time frame.
  • A “landing page” is just the initial HTML document that shows up when you first access a website or webapp. So, I assumed anything that can be rendered in a Web browser counts as a “landing page” for purposes of this exercise. Obviously, that would not be a good assumption if our “landing page” were meant to be the starting point of a real application; but for purposes of this exercise, any kind of “Hello, world!” thing counts.

I worked on a clean Kubuntu desktop 20.04 instance running under VMware Workstation on a Microsoft Windows 10 host. That’s a Debian-based Linux distro. I did have to install tools, but I’m not counting that time as part of the exercise.

All ten landing pages were “developed” via the command line. No text editor or IDE was used. You’re going to say I cheated or took shortcuts. I would say my approach was like baking a cake from a mix rather than from scratch. It may be a form of cheating, but the cake still tastes okay.

Okay, let’s bake!

1. Minimalist

    echo 'Landed!' > lander.html 
    firefox lander.html 

To view:


2. React

    npx create-react-app lander 
    cd lander 
    npm start 

To view:


3. Angular

    git clone angular
    cd angular
    npm intall
    npm start

To view:


4. Vue

    npm init vue@latest
    (enter project name 'vue' when prompted)
    cd vue
    npm install
    npm run dev 

To view:


5. PHP

    git clone php
    cd php
    php -S localhost:8080

To view:


6. Django

    git clone 
    cd minimal-django
    python3 runserver 

To view:


7. Rails

    gem install rails
    rails new railslanding
    cd railslanding
    rails server

To view:


8. Sinatra

    gem install sinatra
    gem install thin
    mkdir sinatra
    cd sinatra
    echo "require 'sinatra'" > lander.rb
    echo "get '/' do" >> lander.rb
    echo '  Landed!"' >> lander.rb
    echo 'end' >> lander.rb 
    ruby lander.rb

To view:


9. SpringBoot

    git clone 
    cd gs-spring-boot/complete
    ./gradlew bootRun 

To view:


10. .NET Core

    dotnet new web --name lander 
    dotnet run

To view:


Nothing useful there. Just fun and games.

11. A lagniappe, baked from scratch

I guess if you were really keen to bake the cake from scratch, you could write something like this:

    while true; do { echo -ne "HTTP/1.0 200 OK\nContent-Length: $(wc -c<bashland.html)\n\n"; cat bashland.html; } | nc -l -p 8080 ; done

That’s a bash one-liner that functions as a simple Web server. It’s based on one of the numerous examples you can find online (although none of them worked on my system without some tweaking). Even if you bake from scratch, you need a recipe the first time – or at least you need to watch a video about baking a cake. This server can’t do anything except render the landing page – and that’s all that was required for this exercise. We’re taking the YAGNI principle to an extreme.

Don’t forget the icing:

    echo '<!DOCTYPE html><html><body><h1>Landing page served by bash</h1></body></html>' > bashland.html

To view:


…and you get all this fun output:

    GET / HTTP/1.1
    Host: localhost:8080
    User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:103.0) Gecko/20100101 Firefox/103.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
    Accept-Language: en-US,en;q=0.5
    Accept-Encoding: gzip, deflate, br
    Connection: keep-alive
    Upgrade-Insecure-Requests: 1
    Sec-Fetch-Dest: document
    Sec-Fetch-Mode: navigate
    Sec-Fetch-Site: none
    Sec-Fetch-User: ?1