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:
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:
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.
Top comments (1)
To render EJS templates with Webpack in 2024 can be used the modern html-bundler-webpack-plugin.
The Bundler Plugin can render various templates, including EJS, "out-of-the-box" without any additional plugins and loaders.