Skip to content
This repository has been archived by the owner on Feb 23, 2018. It is now read-only.

Project structure

Jump to bottom
Julian Motz edited this page Feb 18, 2016 · 2 revisions

The project structure depends on whether you have created a project with or without AngularJS.

Project structure with AngularJS

jmBoilerplate/
|-- src/
|   |-- app/
|   |   |-- controllers/
|   |   |-- directives/
|   |   |-- factories/
|   |   |-- filters/
|   |   |-- services/
|   |   |-- providers/
|   |   |-- app.js
|   |   |-- config.js
|   |   |-- main.js
|   |   |-- routes.js
|   |-- assets/
|   |   |-- images/
|   |   |-- fonts/
|   |-- resources/
|   |-- styles/
|       |-- _base.scss
|       |-- _functions.scss
|       |-- _mixins.scss
|       |-- _settings.scss
|       |-- _sprites.scss
|       |-- app.scss
|-- node_modules/
|-- vendor/
|-- .bowerrc
|-- .gitignore
|-- .travis.yml
|-- bower.json
|-- Gruntfile.js
|-- index.html
|-- jmBoilerplate-version
|-- package.json
|-- README.md

Project structure without AngularJS

jmBoilerplate/
|-- src/
|   |-- app/
|   |   |-- app.js
|   |   |-- main.js
|   |-- assets/
|   |   |-- images/
|   |   |-- fonts/
|   |-- resources/
|   |-- styles/
|       |-- _base.scss
|       |-- _functions.scss
|       |-- _mixins.scss
|       |-- _settings.scss
|       |-- _sprites.scss
|       |-- app.scss
|-- node_modules/
|-- vendor/
|-- .bowerrc
|-- .gitignore
|-- .travis.yml
|-- bower.json
|-- Gruntfile.js
|-- index.html
|-- jmBoilerplate-version
|-- package.json
|-- README.md

Project structure explanation

Step by step:

  • src/
    • This is where your applications source code lives
  • src/app

    • Define your business logic here. This includes controllers, routing, configuration and anything else that is JS-based. Have a look at the containing files to see how they are working.

      Note: The structure is up to you. If you want to use module-folders instead of functionality-folders that is your choice. But, for most projects using folders like:

      src/app/
|-- controllers/
|-- directives/
|-- ...

      is enough and less complicated than

      src/app/
|-- module1
    |-- controllers/
    |-- filters/
    |-- ...
|-- module2
    |-- controllers/
    |-- filters/
    |-- ...

      If you want to change this structure, just change the file location in "main.js".

  • src/assets
    • Your static assets like images and fonts live here. You can use them in the styles.
  • src/resources
    • This is optional and may be needed in some applications. Normally this includes all application based resources that are not assets, like translation-files or database files that will be used from inside the app.
  • src/styles

    • Your styling will go in here. The main file that will be compiled from the build process is "app.scss". This file includes the "_base.scss" (Note: all include files will start with an underscore. This is a SCSS convention). The "_base.scss" imports all dependencies including the settings, functions, mixins and maybe vendor css/scss. The "_sprites.scss" will be generated by the build process and is only necessary to include from the "_base.scss".

      If you are interested in the files in detail have a look into it.

  • node_modules/
    • Contains all modules that are necessary for the building process. Therefore it is only necessary for development purposes.
  • vendor/
    • Contains your vendor libraries like jQuery, RequireJS, AngularJS, ...! They will be loaded into this directory with "Bower" ($ bower install or $ bower update). Add dependencies into "bower.json"!
  • .bowerrc
    • Just an internal file to configure Bower.
  • .travis.yml
    • Travis CI configuration.
  • .gitignore
    • A list of files that should be ignored by Git.
  • bower.json
    • This file is necessary to work with Bower. Also, it contains all the metadata of your project if you want to publish and register it to the Bower database.
  • Gruntfile.js
    • The main file - containing all grunt tasks.
  • index.html
    • The applications index file. You can rename it or create multiple HTML files. All HTML files will be included in the build.
  • jmBoilerplate-version
    • This file gives you information about the installed jmBoilerplate version. If you want to update jmBoilerplate, you can check the version inside this file against the current version.
  • package.json
    • This is necessary for the build process. Also, it contains all the metadata of your project (like "bower.json"). Note:
      • All the contributors that are listed in here will be included in the banner (copyright header) in your compiled js, css and html files.
      • Also, this file can contain a list of browsers that your application supports. If so, it will show a fallback message if the user has opened your application with a deprecated or unsupported browser.
  • README.md
    • Project description
Clone this wiki locally