Single-page application development guide using Angular and CodeIgniter frameworks part 1

Last updated

Recently, I started working on a new single-page web application using Angular and PHP frameworks. I am using Angular framework for the middle layer, PHP CodeIgnitor framework for creating back-end API, and Python unittest framework for testing the back-end API.

Creating a single-page application is not easy. You need to invest extra effort into testing all sides; front-end Angular code, back-end API, and user interface testing using the Selenium framework.

After choosing the right frameworks, I guide my team members on how we can start working on the application, and then I thought about why I should not create a project guide for it. This way, I could share it with others, and they can also get benefits from it.

Having spent more than 14 years in software development, I know the importance of the project guide. It not only helps my team members but can also benefit freshers.

I will cover many topics in this guide, and it will span multiple blogs. After finishing the guide, I will convert it into PDF format. And you could download and learn from it.

Recently, I closed a deal with a new client, and his project requirements were suitable for single-page application development. After our initial communication, the client gave us full rights to choose the technology stack. Now, we were free to design the application architecture.

And after reviewing all the sides and project’s features, I choose the following frameworks stack;

  1. PHP CodeIgnitor framework for creating back-end API. It has a small memory footprint and has all required features built within the libraries. Also, we can easily extend it by incorporating custom business logic.
  2. Python unittest framework for creating API test cases. I love Python language as it has a simple syntax and results in faster development. Also, I don’t have any concerns about speed and performance for API testing.
  3. Angular middle layer framework for creating thin API clients. It is one of the best Javascript frameworks for creating a single-page application. And it has all libraries included in its toolchain.
  4. Karma framework for testing the custom Angular components and services. It is the default testing framework in the Angular tools.
  5. Selenium testing framework for system integration testing from the user point of view.
  6. Bootstrap front-end framework for creating a user interface for the application. It is a well-known framework and has Angular libraries. And therefore, it is easy to integrate without investing time in creating custom libraries.

That’s all about the technology stack. You can see how different frameworks are integrated and work together to produce highly testable Angular applications.

My development environment

The following is the detail of my development environment. And you could set up your machine accordingly, or you could install all other required programs.

  1. Ubuntu 20.04
  2. PHP7.3 or above.
  3. Python3.4 or above.
  4. NeoVim editor for PHP and Python development.
  5. Visual Studio code editor for Angular development.
  6. Mysql5.7 database

You may use any other code editor. I have been using Vim for a long time, and I feel very comfortable using it. But I also found, the Visual studio code editor is very suitable for Angular and Typescript development.

Be noted, these are tools, and they vary depending on your choice and preferences.

Set up PHP CodeIgnitor framework

It is super easy to set up the CodeIgnitor framework. You need to download it from its website. And unzip it in your preferred directory.

In my development environment, I created the project directory in the home folder and a soft link for accessing it through port 80.

And here is my directory structure;

home > projects > client_name > project_name

and in the project_name directory, I have the following structure;

> docs

> source

> site – All Angular development goes here.

> api – CodeIgnitor framework unzipped here.

And I created a soft link using the following commands.

ln -s “/home/projects/client_name/project_name/source/api api

ln -s “/home/projects/client_name/project_name/site site

These create two soft links for accessing back-end API and front site using the HTTP protocol.

Set up Angular framework

Once again, setting up the Angular framework is super easy. And you could install it using npm package manager.

The angular site has a guide to set up the local environment.

You only need to remember two commands for most of your development works;

ng serve – for launching default server. It opens the browser on default port – 4200 – and starts watching any change in the source directory. Then it rebuilds the application if there are any significant changes.

ng build – for building the application and creating different Javascript files. Then you can transfer these files to set up any other testing environments; testing, staging, UAT.

That’s all for now. You can start setting up your development environment while I create another set of designs for the application.