Question: Where to place the front-end javascript files?

Question

Where to place the front-end javascript files?

Answers 3
Added at 2016-12-30 17:12
Tags
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.

Answers
nr: #1 dodano: 2016-12-30 17:12

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.

nr: #2 dodano: 2016-12-30 19:12

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.

nr: #3 dodano: 2016-12-30 19:12

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.

Source Show
◀ Wstecz