POD structure in Ember

Every developer wants to develop an application with a clean and well-structured code. let’s have a look at, How you can manage your ember app with well structure. Basically, front end languages such as react, Angular, Ember by default provides project structure based on the type of files.

Let’s take a look at the default project structure of front-end applications. Once you create a new app using CLI(command line interface), seems the project structure of your app to be like app/directory (type of file). You can see the normal structure of your Ember app in the below image.

What if you are working on a giant project and it has so many features? As per the normal structure, you need to create a file based on its type and need to manage it for your feature. Let’s say you want to implement a login feature on your app, you need to create a file login route on routes directory, login template on the template directory, login controller on controller directory, am I right? You can manage those files by creating feature-wise directories using POD.

Ember-POD

Ember pod provides a project structure, which is totally different from the default project structure. You have everything in grouped by feature instead of having a long list of type-based directory and files. You can see the difference in the below image.

Let’s set up POD

I am assuming that you have installed the latest version of Ember CLI, if not then you can install it by using this guide.

• If you want to convert your default project structure to pods. You can configure pod in the .ember-cli file.

  .ember-cli 

  { 
     "usePods": true 
  }

• If you want to implement only selected features as pod structure, you can create pods directory by appending --pod on your resource generate command.

  $ ember g resource --pod 
  
  $ ember g login --pod

  • --pod option generates your files on pod structure, as per the below example.

    

• By default, we have a single directory with the name app, where all directories resides. If you do not specify the directory for generating pod, it will generate by default in the app directory. You can specify it by setting podModulePrefix in the environment.js file for specify generated pod directories.

  config/environment.js 

  let ENV = { 
    modulePrefix: 'pod' 
    environment, 
    podModulePrefix: 'pod/pods', 
    rootURL: '/', 
    locationType: 'auto' 
  };

  • By this configuration pod directories will be generated in pods directory.
• By default ember provide pod blueprint structure for listed ember Apis,
  • component
  • controller
  • model
  • Route
  • template

Refactor your pod directory.

• If you want to change your pod directory login to Login, that should be easy when you used pod. You just need to fire below command for refactoring(rename) the directory.

  $ cd app 
  $ mv login Login 
   
  And make change manually, login to Login in the router.js file.

Conclusion

Pod helps developers to write well-structured and clean code, they also can manage easily by using pod. I hope this is helpful to you.

For professional paid support, you may contact us at [email protected] .