Revitalizing an Outdated Website with EJS and Webpack in 2023
Tags: javascript, ejs, webpack, casestudy
Published: 2023-04-23 16:42:50

---
title: Revitalizing an Outdated Website with EJS and Webpack in 2023
published: true
description: Discover how one developer breathed new life into an outdated website using EJS and Webpack, and learn how this approach can help modernize your own legacy projects 
tags: #javascript #EJS #Webpack #casestudy
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8v3wtuck43wuqcodll7.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-04-23 15:40 +0000
---

I recently migrated my website from a plain HTML solution to an EJS solution, and it was a great experience. Instead of building the entire website from scratch using a modern FE framework, I opted for a simpler solution that would be easier to maintain and not over-engineered.

In the past, I've often gone with an un-optimized solution of using Next.js and React to create websites because it's a setup that I'm familiar with. However, I've found that this approach can lead to unnecessary complexity.

I started by adding EJS to parts of the website in separate templates, particularly for repeating parts such as projects and services. The list data was read from separate JS files, which made it easy to update and maintain the content.

To bundle the code, I used Webpack. It was straightforward to set up, and it helped me optimize the code, manage dependencies, and provide hot-reloading capabilities.

Since the old website was more than 5 years old, the Bootstrap and jQuery libraries were out of date. Instead of trying to adapt the website to new versions that have npm packages, I opted for Tailwind for style. Tailwind provided me with a more modern and flexible styling solution that was easier to use and customize.

While my experience using EJS templates and Webpack to build my website was overall positive, I did run into a few challenges along the way. I had to find workarounds to ensure that my code was functioning correctly.

One challenge I faced during the development process was that I was unable to get the `ejs-loader` to work properly with Webpack 5. As a workaround, I decided to use the `template-ejs-loader` instead, since it seemed to offer similar functionality based on the documentation. However, I discovered that the `template-ejs-loader` and `ejs-loader` have different approaches to including external data.

To get around this issue, I found that the best way to load data when using the `template-ejs-loader` was to use the **require** statement in my code. This was something I would have known if I hadn't assumed that the `ejs-loader` and `template-ejs-loader` were the same thing. By being more thorough in my research and testing, I was able to overcome this challenge and continue building my website.

Another issue I encountered was that the Webpack dev server would not hot-reload when I made changes to my EJS templates unless I added the following line to the `watchFiles` configuration in my `webpack.config.js` file:

```javascript
watchFiles: ["./src/**/*.{ejs,js,jsx,ts,tsx}"]
```
I also had trouble with the Tailwind configuration file, which would not include CSS correctly unless I added the following line to the content configuration in my `tailwind.config.js` file:

```javascript
content: ["./src/**/*.{ejs,js,jsx,ts,tsx}"]
```

Finally, one issue that I was not able to resolve was that required files in EJS templates were not updating until I restarted the server. If anyone has any advice on how to fix this issue, I would appreciate it.

Despite these challenges, I'm happy with the solution I've built using EJS templates and Webpack. It's fast, efficient, and easy to maintain, and it provides a great user experience. I hope that my experience can help others who are looking for a simple and effective solution for building static websites.