Developing software: Project folder structure.

Oh, bureaucracy! What tedious and boring! OK, that’s all over now. It’s time for some action. Besides documentation, one of the worst thing to do is starting to develop. Where should I start? Web app or mobile app? Frontend or backend? How should I organize all folders and source code files? What…? Where…? How…? Don’t panic!

I’m going to start with the web application. As I said previously we are going to develop a modern, full-stack web application so the MEAN stack should be our choice. For that, and first of all, we need to have Node.js installed in our computers.

I’ve been thinking that what a beginner needs is a clear, concise, step by step, and without so much verbosity tutorial easy to follow, so I’m going to get to the point. This time I’ll write the post as it was a recipe.

First of all, a brief description about what we want to do: create the project structure, including all the appropriate files and directories to start coding our web application.

So, here we have our main ingredients:

Now, the configuration step by step.:

  1. Install MongoDB. We are going to use the community version. You can download it from here. We can manage our MongoDB database using Robomongo. We just have to follow the steps provided by the official documentation. It’s quite simple.
  2. We need Git installed in our computer in order to work with node, so let’s install Git before node.
  3. Install Node.js. Installation is as simpler as installing MongoDB, just download the binaries and install them.
  4. Install Yeoman. We should use npm, a package manager provided by Node.js. Using a terminal or a command line tool type the following:

npm install -g yo

  • This command will install Yeoman globally (-g option) which means we will be able to use it as a command line tool. You can find a lot of useful JavaScript packages using npm tool.
  • In conclusion, npm allows us to install JavaScript libraries or pieces of code to reuse them in our application. This mean that npm will download JavaScript files in our project folder (specifically in a folder called node_modules) that we can include later in our HTML files (don’t forget that we are developing a web application).
  • Basically, Yeoman will generate all files and folders needed in our project through different generators in any language such as Python, Java, C# and of course, Web. Those generator are essentially plugins that we can install to generate our project. Yeoman rely on three tools to improve our productivy when we build a web application: yo, it will generate the code; a build tool such as Gulp or Grunt, and a package manager like npm or Bower.
  1. There are some Yeoman generators designed to create MEAN stack projects, such as meanjs, ng-fullstack or angular-fullstack. The first one is not as complete as I’d like since it doesn’t allow us to choose to install what Angular version, or build tool, or package manager, or any other useful JavaScript tools such as TypeScript. The second one it seems like it doesn’t work properly, it has some issues during the installation with npm, and the last throws some installation errors too. Besides, they generate a lot of boilerplate code, and maybe they could be so confused for the fist time. Despise all of that I think I’m going to choose ng-fullstack. I will fix all possible bugs and I will explain what each file does later, as we need them. But first, let’s install the choosen generator.

npm install -g generator-gn-fullstack

  • Once the generator is complete installed, we need to launch the command to start the process to configure our application using this generator. We need to open a command line tool inside the directore where we are going to create our web application:

yo ng-fullstack

  • Now, the generator will ask us about the configuration of our application as the image below shows:

blog001installyogenerator

  • What is the name of your app? We set the name of our application.
  • What is your username? Our username.
  • What is your email (used in your package.json)? Our email address.
  • Which stack do you want? Options:
  • – fullstack,
  • – client,
  • – server.
  • We are going to choose fullstack.
  • Which Git repository hosting service are you using? Options:
  • -Github,
  • -Bitbucket,
  • -Gitlab.
  • Choose one, select the one that you would most prefer to work with.
  • Which framework do you want to use in the client side? Options:
  • – ng1 (Angular v1.x),
  • – ng2 (Angular v2.x),
  • – aurelia1 (aureliajs),
  • – vue2 (vuejs).
  • I’m going to use ng2 that represent Angular v2.x.
  • Which CSS pre-processor do you want to use?
  • – none,
  • less,
  • sass.
  • I’d prefer SASS.
  • What language do you want in the server side?
  • – node,
  • go.
  • Obviously, Node.
  • Which framework do you want to use in server side?
  • express,
  • koa.
  • Express, of course.
  • Which transpiler do you want to use in server side?
  • – node,
  • babel,
  • TypeScript.
  • I like TypeScript, and Google likes it too.
  • Is it going to be a secure app (HTTP/2)? Yes or not. My app is simple, so No at least for now.
  • Do you want to keep tests in a different folder? Yes or not. I think I am an extremely tidy person, so YES.
  • Do you want to use a different static server? Such as NGINX, Apache, IIS, etc Yes or not. NOT.
  • Do you want the TODO boilerplate? Yes or not. It’s up to you. I’ve selected NO. The reason is simple: if we choose yes, the generator will create a lot of code that maybe you don’t understand yet.

Great! Now we have a complete folder structure for our web application, including the frontend and the backend in the same folder. Our folder should look like the following picture:

blog002webprojectstructure

As we’ve seen, it is quite simple to start a new project even if we don’t know anything about the tools we need to develop our project, so we don’t have to worry about them for the moment.

Let’s see the newly created folders. I think the names are quite intuitive, but here we have an explanation:

  • client: This folder will contain all the code for our front-end or client side development (it means our Angular development, styles, icons, etc).
  • server. This will be our structure to build our server in Node.js and Express.
  • node_modules. This path is generated by npm to install all our dependencies. I’ll talk in future post about dependencies and how to configure them.
  • tasks. We are going to use a tool called Gulp, that it is a build system, so the files involved with Gulp will go here.
  • test. All our test, for client and server side will be here. We will use Jasmine and Karma to develop our unit test and Protractor for our end to end test.

Soon I will explain in detail all the files we need for our project, but it will be in future posts. There are a lot of links provided in the post, so you can take a look in the meanwhile to know more about the different tools, languages, and so forth.

Advertisements

One thought on “Developing software: Project folder structure.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s