Where to place the front-end javascript files?

Question

I am developing an express based web application and I started following the application skeleton built by express-generator.

Next, I added to my project webpack to bundle the client side assets.

Now I am not sure where to place the front-end javascript files, if in a /src or /app folder?

In truth, I am in a dilemma between, app.js, /lib, /src and /app folders.

1. According to express-generator, it creates an app.js file as the main entry and thus it looks a little bit strange to have an app folder with same name of the entry point app.js.

2. webpack usage manual suggests a /src folder to place javascript files. But I think /src should not be exclusively for front-end javascripts and on the other hand, I would not like to mix both server and front-end javascript files in same folder.

3. Moreover, the Accepted Answer to the question Folder structure for a Node.js project, contradicts the previous point because it states:

/src contains all your server-side specific CoffeeScript files

So, I think that maybe /src is not the better option to place front-end javscript files and according to the Accepted answer to the question Node.js project naming conventions for files & folders I would follow the proposed structure:

  /app - front-end javascript files
  /bin - helper scripts
  /lib - back-end express files

But is it ok to have a folder /app and a file app.js with same name? Furthermore, /app is related with front-end and app.js with back-end.

Answer 1

I would suggest you to just rename your main file from app.js to index.js and keep the structure proposed in Node.js project naming conventions for files & folders:

  /app - front-end javascript files
  /bin - helper scripts
  /lib - back-end express files

Thus, there is no more misleading between /app folder related to front-end and the index.js, which is the back-end entry point.

Answer 2

I think public folder is rather common in web projects.

Since it's the destination of the generated bundle, i think you can name it more explicitly webApp or whatever you want. I think it's your call and there is no rigid/best practice here. Go with something you and your team are comfortable with.

Answer 3

There isn't really a "required" structure for web apps, as Abdellah stated, it's usually best to just go with what you and your colleagues are comfortable with. However, because Node.js has a built in framework, you should probably use that. The move that makes the most sense to me is to rename the app.js file, and use the structure you stated.