Explain Codes LogoExplain Codes Logo

Deploying just HTML, CSS webpage to Tomcat

html
deployment
static-site-generation
tomcat
Nikita BarsukovbyNikita BarsukovΒ·Feb 4, 2025
⚑TLDR
The ABCs of **deploying** static HTML/CSS to **Tomcat**:
1. Use **index.html** as your homepage.
2. Include a `WEB-INF` directory for Tomcat's eyeballs πŸ‘€ (server's recognition).  
3. **Package everything into a WAR** (Web Archive). 
4. Put this WAR in **Tomcat's webapps** like a present 🎁 under a Christmas tree πŸŽ„.

Shell commands:
```bash
jar -cvf MyApp.war *      # Create WAR, not to be confused with instant water πŸ’§.
cp MyApp.war /path/to/tomcat/webapps/  # Deliver your present 🎁!

Tomcat brings the party πŸŽ‰ on startup or with a new WAR arrival.

Step by step deployment

Deploying an HTML/CSS based static website to a Tomcat server is as easy as sliding a hot knife through butter. It just needs a little organization of your files and a README.txt for the server to understand what to do.

Organizing your content

Create a new directory within the webapps directory of your Tomcat installation, and throw your party invitations (index.html and associated CSS files) into it:

mkdir /path/to/tomcat/webapps/MyPartySite # Create party directory πŸŽˆπŸŽ‰

Crafting HTML magic

Make sure your main HTML file is named index.html, because Tomcat is a little conventional and looks for this file by default when it's time to party.

πŸ“ MyPartySite β”œβ”€β”€ πŸ“„ index.html (Your dynamite πŸ’£) └── 🎨 style.css (Your confetti 🎊)

WAR is peace... for deployment

Although a WAR file isn't always necessary for smaller parties, if your party size grows (meaning if you have more complex configurations in your site), package them all into a neat little present, a WAR!

jar -cvf MyPartySite.war * # All your ducks πŸ¦†πŸ¦†πŸ¦† in a row!

Then, deliver the present to Tomcat:

cp MyPartySite.war /path/to/tomcat/webapps/ # Santa Claus πŸŽ… has arrived!

Special party instructions

If your party has a special theme or dress code, or in other words, custom configurations like MIME type mapping, error pages, etc., include these configurations within a WEB-INF/web.xml file.

Party time!

Now, just start the Tomcat party engine, and your party is live at localhost:8080/MyPartySite! Don't forget to let others know (replace localhost with your server's host name if the party is happening on a remote system).

Avoiding party faux pas

By making sure about a few things, you can avoid classic party missteps:

  • Where the party at?: Not at 404 Not Found Lane! Ensure that your folder and file names are correct and visible under your server's nose.
  • New clothes, who dis?: If you have updated your party look, remember to freshen up the web browser cache or hit Ctrl+F5 to make sure others notice your attire.
  • Ahem, boss on board: Ensure a META-INF/context.xml file is present if you have packaged a WAR. This is like having your boss at the partyβ€”necessary for smooth sailing!

DJ or no DJ?

While Tomcat, aka your librarian, is a master of handling Java Servlets and JSP pages, it’s also good at managing simpler parties with a quieter atmosphere (like serving static websites). However, if there’s only going to be a quiet pistachio party (pure static content), a simple nginx or an Apache HTTP Server could be a better party host.

Catering to everyone

You want to make sure everyone feels welcome and comfortable at your party. So for more complex websites, a.k.a parties with fancy hors d'oeuvres (like HTTPS, URL rewriting, or custom error handling):

  • Use SSL with Tomcat, to take the β€œsecure” in HTTPS seriously.
  • Use web.xml or Tomcat’s RewriteValve if you want to rearrange some furniture (friendly URLs) midway through the party.
  • Make sure your error pages are like a soft cushion, soothing any mishaps (better user experience if errors occur).