How I structured my first Express App

Fazlul Kabir — Sun, 07 Nov 2021 13:14:27 +0000

I’m pretty much a beginner dev, working for 2years as a developer. During this period most of the time, I’ve used PHP as backend but recently my company assigned me to a project in which I had to use Node(Express) as backend. So here’s the story about my first MERN stack app.

TLDR

Some background story

During this short period of my career, I got the opportunity to work with several technologies. As I’m working as a Full-Stack dev so previously I had hands-on experience with Laravel, React, Vue, Mysql other related techs. I was very excited when my company assigned me to a MERN stack app. That was a huge transition. I took that as a challenge and decided that I’d prepare myself for larger apps built with the MERN stack. So that’s why even the purpose of the app is simple but the structure is not. Basically, this is a custom Shopify app that will maintain shipping service(carrier service) including tons of conditions for a Shopify store.

Let’s Dive into it

It’s true that my project structure is pretty much inspired by Laravel because I’m familiar with that & I love the structure. So my project has two main directories “backend” & “frontend”. In the backend directory lies the express app & in the frontend directory lies the react app. The reason for this is I wanted to reduce the deployment complexity. So for the frontend Webpack is used to compile the react app & export it to a single file which I later include as a script in the backend(in an ejs file). Yes, pretty much what Laravel-mix does. The weird thing is project has one package.json file which holds both frontend and backend dependencies.

The Backend Directory

In the root of the backend directory, there are two files one is index.js which is responsible for serving the app to a specific port & connecting to MongoDB, Redis etc. another one is app.js which is responsible for booting the express app, top-level middlewares, including the route files etc.

Subdirectories in backend

I think most of the things are self-explanatory so I won’t discuss them all. In the config directory, I’ve got a few config files that hold configuration variables, next the controllers directory have 3 subdirectories that are responsible for responding to different kind of requests. I hate to write business logic at the controller level, so I’ve got service classes in the services directory, where lies all the business logic. The views directory holds ejs files which will be responded to web routes. Also one of the ejs files is responsible to serve the compiled react app.

Next, I wanna say what I’m missing from Laravel, which is the Laravel job queue. So I managed to find almost something similar named bull for node.js but I want more features like retrying the jobs, scheduling them etc. which I couldn’t find. I would be grateful if someone can suggest something.

The Frontend Directory

The frontend directory is pretty simple it has an entry point which holds the root react component. There are 3 subdirectories named components, Helpers, sass. The components directory holds pages level components in pages sub dir & other reusable components in utils sub dir. Next, the Helpers directory contains some helper functions & classes & the sass directory holds sass files for styling.

The frontend is later compiled via the Webpack, babel and exported to the public/assets directory. Which I later include in an ejs file.

Final Thoughts

If any experienced developer reads this post first reaction will be “your package.json must be messed up”. Yeah, I know that, but within that short period of time, it was the most practical approach I found for faster development & easy deployment.

Oh, I forgot to mention that this is my first tech blog post. So please pardon my lack of knowledge & experience. And I’d be very much grateful if I could have some suggestions about how things could be done in a better way. Also, I’m still looking for a job-queue package which is similar to Laravel so, suggestions are appreciated.

About Me

Fazlul Kabir — Sat, 06 Nov 2021 10:47:35 +0000

About Me

Hey, I’m Fazlul Kabir. Currently working as “Full-Stack Developer” at “Aiva Labs Inc.”.

I’ve been working in the software engineering field for over 2 years. I’ve got excellent knowledge of web technologies like PHP, Laravel, Javascript, Node.js, Express, React, Vue.js, Inertia.js, JQuery, MYSQL, MongoDB, HTML, CSS, Sass. I have experience in developing custom and dynamic web applications. I have strong knowledge about OOP, MVC framework, SOLID & DRY principles & also on RESTful API development.

I love building things. While hard engineering problems are often intrinsically fun to tackle, I’m most attracted to solving real customer problems with a business justification.

Work Experience

Full-Stack Developer at Aiva Labs Inc. (03/2021-Present)
Jr. Laravel Web Apps Developer at ITCLAN BD (03/2020–03/2021)
Jr. Software Engineer at NEXTGEN IT LTD (09/2019–02/2020)

Technologies I consider as my skill

PHP
Laravel
Javascript
Node.js
React
Vue.js
jQuery
Inertia.js
MySql
MongoDB
HTML
CSS
Sass
VCS(Git)
REST API
GraphQL
Shopify(App Development)

Field of Interest

System design & architect
Server load balancing
Database Optimization
CI/CD
AI(ML)

Education

BSc. Engineering in Computer Science and Telecommunication Engineering, Noakhali Science and Technology University, Noakhali, Bangladesh
HSC in Science, Comilla Victoria Govt. College, Comilla, Bangladesh
SSC in Science, Comilla Zilla School, Comilla, Bangladesh

Other Activities

Competitive Programming (Stopstalk profile: fazlul_kabir)
Former General Secretary, CSTE Club (2018–2019), NSTU

Forem: Fazlul Kabir

How I structured my first Express App

Some background story

Let’s Dive into it

Final Thoughts

About Me

About Me

Work Experience

Technologies I consider as my skill

Field of Interest

Education

Other Activities

Find Me Here