Creating a Project Structure for Front-end Development

Frontend
1

Hey everyone, I’m a bit confused about a project structure I came across. It’s different from what I’m used to with Angular2. The setup uses jQuery and has folders like ‘app’ and ‘dist’, with various config files.

I’m wondering what tools are typically used to set up this kind of structure. How would I go about creating a new project like this from scratch?

Here’s a rough outline of what I’m seeing:

my-project/
  app/
    js/
    sass/
  dist/
    assets/
    index.html
  bower.json
  gulpfile.js
  package.json
  server.js
  vendor.json
  webpack.config.js

Any tips or explanations would be super helpful! I’m eager to learn about different front-end setups.

2

This project structure appears to be utilizing a modern front-end development workflow. The ‘app’ directory likely contains your source files, while ‘dist’ is for the compiled and optimized output. Gulp and Webpack are key tools here, handling tasks like compilation, minification, and bundling.

To create a similar setup from scratch, you’d start by initializing a new project with npm. Then, install necessary dependencies like Gulp, Webpack, and any preprocessors you need. Configure Gulp tasks in gulpfile.js for processes like Sass compilation and file copying. Use webpack.config.js to set up your JavaScript bundling.

The bower.json and vendor.json files suggest management of third-party libraries, though nowadays npm is more commonly used for this purpose. The server.js file implies a custom development server, which could be useful for API mocking or serving your built files locally.

3

ooh, that structure looks interesting! have u tried using yeoman or create-react-app? they can set up project skeletons 4 u. but im curious, whats ur experience with webpack? it seems to be popular for bundling nowadays. maybe we could brainstorm some ideas for ur project setup?

4

Yo, that setup looks pretty sweet! i’ve seen similar stuff before. gulpfile.js is prob handling build tasks, webpack.config.js for bundling js. the app folder is where u code, dist is for the final product. npm init and install gulp + webpack to start. dont 4get to add some sass loaders too!