In my recent project, I created an application that manages products using Express.js web application framework and EJS template engine. The objective of the project was to develop a web-based application for adding products and displaying them on a homepage and shop page. In this article, the basic functionalities of the project are discussed which includes the creation of the Express.js server, the uploading of files with Multer and the display of the product data with EJS Templates.
The project was started with the creation of an app.js server. To set up the Express application, I made an app.js file. In this server, the port 3000 is used while serving static files located in the public folder where stylesheets and images are included. When creating an app using Express I defined EJS as the template engine and set the directory for the views as views. The routes for managing product and for displaying them were built in different files to enhance the organization of the project.
File Uploads with Multer
One of the important characteristics of this system is the function for uploading product images. For file uploads, I used Multer, a middleware for handling file that are in the ‘multipart/form-data’. The Multer package was set up to store the uploaded files in the public/images folder and name it using the current time. This makes it possible that no two images will have the same name, making it difficult to overwrite the files.
Here in routes/admin.js, I configured the Multer middleware allowing files upload in the /add-product route. The form for submitting the addition of a product has input fields for the title, price, description, and image of the product. Multer is used to handle the image file and the path of the image is written to the database (or in this case an array in memory) for later use.
Managing Product Data
The product data is stored as an easily accessible in memory array in the products.js controller. The postAddProduct function deals with the submitted forms by mapping product details from the request body and file from Multer. The product is then inserted as a new element in the products array. It can also change the target page after adding a product, for example, accepting the user to the home page.
To display the products, I created a views in shop.ejs. The shop.ejs template renders a list of different products including their title, price, description, and the image. This view utilizes data from the res.locals.products which is passed to it from the middleware in app.js.
Challenges and Solutions
One of the issues faced was how to correctly display paths of the product data such as images paths. This, I eradicated by making a point that the products array was within the reach of both the admin and the shop routs. Another obstacle was how one should address the issue of file uploads the correct way. In the Multer setup, I properly set the filters leading to the acceptance of image files only.
Conclusion
This project explains in detail a practical use of Express.js and EJS in the development of a product management system. It emphasizes file upload with Multer and the utilization of the EJS templating engine for interactive content presentation. The system let the users add and view the products let alone the navigation structure, which forms the strong base for further development as well as refinement.