How to structure and the order of actions of a Front-End Project?

1

Hello everyone!
I’m sure there is not a real rule about this, but I’m looking for ideas on the best way to structure my Front-End projects. Also, I’m looking for an order that I should follow when I start building to avoid problems.
I want to build a simple rule to follow to create all my fend projects, just to build the habit of doing it.

Considerations:
Simple front-end project, no using libraries/frameworks like React, Vue, Angular, etc. I’ll use Node with Gulp.
The basics are: HTML, CSS (preprocessor SASS), images and JavaScript.

Folder structure:
What would be the best folder structure? I’m doing this:

/project
    /node_modules
    /source
        /css (sass)
        /js
        /img
        index.html (It is ok to be here or inside the root of the project?)
    /dist
        /css (output css)
        /js
        /img
       index.html (output)
.gitignore
package-lock.json
package.json

Is that ok?

Build order:
Now, the order of steps to create my project. The idea is just to have a checklist for me to follow, and one that I don’t end up having problems with my project later. Also, consider that I’ll be using GitHub for my repository.

  1. Create my local folder structure
    1.1 Create a new branch if it’s an existing project
  2. npm init
  3. Install Gulp
  4. Install Gulp Packages
  5. Add gitignore
  6. First Commit

Have fun :rocket:

Would that be a good step order to follow?

Thanks in advance :grinning:

2

Looking good.

I would leave source/index.html where it currently is, because in the end it is only a placeholder for your output build at dist/index.html.

So if you would decide to write your markup in pug (e.g. index.pug) or something else instead of vanilla html, you would have to fiddle around with it.

If you want to be even more generic, you could add a folder for your markup in source, e.g. source/markup, where you put your markup.
Currently, let’s say you want to build a second page about.html, there wouldn’t be a concise separation between css, js, img and your markup in the source folder.

1 Like
3

Got it! :+1:
Makes sense to leave the index there, as you told.

Haven’t thought about the markup folder before. It looks like a good idea to follow it.
For the project I’m creating now, I’ll not do it since I’m sure it will have only a single markup file, but for others, makes more sense to follow this way. Will indeed make a better separation for the markup.

Thanks for the help! :grinning: