Build a NodeJS stack with TypeScript, ExpressJS, MongoDB, AngularJS

I’m writing this post to those who want to start a new Node.js project and also wants to understand how it works and connects all the elements, without using a preset stack.

Let’s star for the basics, I use the Webstorm IDE from JetBrains, it’s awesome, all the source code will be uploaded in this repo: https://github.com/Squallium/node-express-typescript, I’ll try to use git-flow and also I will deploy the project in Heroku at important milestones

Firstly we’re going to create a basic node project structure with ExpressJS framework, to do this I use the WebStorm’s wizard, but you can use express-generator.  Once it’s created and you’ve checked it’s working we’re going to deploy it in heroku. You need to install the heroku toolbelt by following this instructions heroku setup

In order to let know heroku how to run our project we need to create a Procfile in the root of our app. If you’re using WebStorm, is similar to the www file inside the bin directory. We’re going to create a new file named pre-prod-env.ts with the following content.

The Profile file will contains:

After that, we’re going to create a git repo, and also add two different remotes, one for github, and the other one for heroku.

If everything it’s correct, you should have your source code in your repo (GitHub, BitBucket…) and also you’re app up and woking in heroku opened in your default browser 🙂

I use Admin-LTE as a template for my app. Because my template engine is Jade, I’m also porting to Jade the Admin-LTE project. In order to make all this things work, we’re going to cover a few dependencies. Let’s start by installing admin-lte as a module in our project.

You can copy my views directly from my project, but if you try to run it, you’ll see an ugly website without CSS. Admin-LTE needs some external libraries like JQuery or Fon-Awesomes to work. To install those dependencies we’re going to use the nicest third-party dependencies manager, bower. Let’s star with bootstrap, first we install the bower module npm install --save bower , then we initalize the bower.json config file, with the wizard  bower init . Finally  we install bootstrap,  bower install bootstrap --save . We need to be sure that our app has access to the bower_components folder, simply add these lines in the app.js file and publish this path. 

The last thing, It’s make sure that your project will deploy its third party dependencies like the Node JS ones. We need to add this line into the “scripts” section inside the package.json file:  "postinstall": "./node_modules/bower/bin/bower install" , with this line, when you deploy your code, the npm install command will install the node and bower dependencies. The rest of the necessary bower modules are in my github repo, you can copy and paste the dependencies from the bower.json file.

Looks better now, but still not perfect. What is wrong? It’s simple, my templates now have what they need from browser, but still need some files from the admin-lte module. We need to allow the project access to the admin-lte files, adding the following line in the app.js file.

Now that we have a better look and some forms, let’s fix the routes so we can see them. In the users.ts file inside the routes folder.

As a login strategy we’re going to use the passport module. In this first stage we’re only going to make sure is working without problems. Also we’ll use mongodb for storing the login’s data, if you don’t have mongodb installed read the following instructions  Install MongoDB. Now we need to add passport as a dependency in your project and also a middleware for the sessions.

After that, we have to initialize passport inside our app.ts and also the session management.

Now we need to connect our project with the mongodb database. For the different environments configurations (test, dev, prod) I’m going to use a configuration file like the following config.ts.

And in our app.ts file, we initialize the database depending on the environment, and we need the mongoose module  npm install --save mongoose :

Once we have mongoose connected, we’re going to integrate the local login strategy using passport, and specifically we install the node module passport-local  npm install --save passport-local. First thing we need is create a model to store the data of the different login strategies. Also we’re going to cipher the passwords using bcrypt  npm install --save bcrypt-nodejs.

Now we’re going to create a file that will contain all the management of the different login strategies. Create a passport.ts file in the config folder with the following content.

And then we include it in the setup process of our app.ts this way.

Now we have to define the routes of our app. We’re going to use express.Router(). The basic GET routes are: “/”, “/login”, “/signup”, “/logout” and “/profile”. This last one use a helper function that allow us to know if the user is authenticated or not ir order to show the info.

Now if you run your app, you must be able to sign-up, login and see your profile. In the next post I’ll continue adding features to my app.

Referencias:

Construir un Stack de NodeJS con TypeScript, ExpressJS, MongoDB, AngularJS (Parte 1)

Este post va dirigido a aquellos que quieran comenzar un proyecto en NodeJS y quiera entender como funcionan y se conectan todos los elementos entre sí, sin utilizar un Stack ya predefinido.

Empezamos por lo básico, yo utilizo el IDE Webstorm de JetBrains y todo el código de post estará alojado en este repositorio https://github.com/Squallium/node-express-typescript, utilizo git flow o lo intento 🙂 y además iré desplegando en heroku el proyecto a medida que llegue a lo que considere puntos de inflexión o cosas que deberíamos probar 🙂

En primer lugar vamos a crear una estructura básica de un proyecto de NodeJS con ExpressJS para ello yo en mi caso utilizo el wizard de de WebStorm, si no es vuestro caso podéis utilizar express-generator. Una vez creado y comprobado que arranca vamos a desplegarlo en heroku. Debéis tener instalado heroku toolbelt si no es así podeís instalarlo siguiendo las instrucciones de la pagina de heroku setup

Para que heroku pueda arrancar nuestro proyecto debemos crear en la raiz del mismo un fichero Procfile que inicie  la aplicación. Si estas usando WebStorm, este fragmento de código esta en la carpeta bin un fichero llamado www. Nosotros vamos a crear uno a parte que llamaremos pre-prod-env.jsy que tendrá el siguiente contenido.

El fichero Profile tendrá el siguiente contenido.

Una vez hecho esto, nos colocamos en la carpeta del proyecto, vamos a crear un repositorio de git, añadirle nuestro remoto (en mi caso de github) y luego desplegarlo en heroku.

Después de esta ristra de código, deberíamos por un lado tener en nuestro repositorio subido a (GitHub, BitBucket…) y nuestra aplicación subida a heroku y abierta en el navegador 🙂

Voy a utilizar Admin-LTE como template para la aplicación. Como mi motor de templates es Jade, además estoy portando a Jade el Admin-LTE. Para ello vamos a necesitar un buen numero de modulos y librerías externas.  En primer lugar vamos a instalar admin-lte como modulo de nuestro proyecto de node.

Podéis copiar directamente las vistas de mi proyecto, pero si intentáis arrancar solo veréis una web sin css un poco fea. Admin-LTE precisa de una serie de librerías como JQuery o Font-Awesomes. Para instalar estas dependencias vamos a utilizar bower, que es un bonito gestor de dependencias.  Vamos a empezar con bootstrap, para instalarlo primero instalamos bower  npm install --save bower , incializamos el fichero de configuración bower.json con el wizard  bower init . Una vez inicializado, instalamos bootstrap  bower install bootstrap --save  y nos aseguramos de que nuestra app tiene acceso a los modulos instalados por bower publicando dicha ruta, para ello añadimos lo siguiente en nuestro app.ts 

Por último, para que al desplegar nuestra app junto con las dependencias de node se instalen también las de bower, añadimos lo siguiente en la sección de “scripts” del fichero package.json:  "postinstall": "./node_modules/bower/bin/bower install" , de esta forma cuando despleguemos nuestro código en un servidor, al hacer npm install también nos instalará estas dependenciasEl resto de módulos necesarios podéis mirarlos en el fichero bower.json del repositorio.

Ya tiene un poco de mejor aspecto, aún asi aun esta fea fea. ¿Qué le falta?. Pues muy sencillo, mis templates tiene lo que necesitan de bower, pero aún así necesita ficheros de nuestro modulo admin-lte. Para que tengan acceso vamos a tener que añadir una linea mas al fichero app.js, junto a la anterior.

Ahora que tiene mejor aspecto y algunos formularios vamos a arreglar las routes, para que podamos verlos. En el fichero users.ts dentro de routes.

A continuación como estrategia de login vamos a utilizar passport. En esta primera parte nos conformaremos con que no de error :-). Vamos a utilizar mongodb para almacenar los datos de login, para instalar mongodb en tu máquina sigue las siguientes instrucciones Install MongoDB. Las distintas estrategias de login las llevaremos a cabo utilizando el paquete passport. Vamos a añadirlos a la lista de dependencias. En primer lugar necesitamos un middleware para las sesiones. Es necesario para utilizar passport.

A continuación inicializamos dentro de nuestra app de express la gestión de sesiones.

Vamos a conectar nuestro proyecto con una base de datos mongodb. Para la configuración de los distintos entornos de base de datos (test, dev, producción) voy a utilizar un fichero de configuración. Creamos un fichero config.ts con el siguiente contenido:

Y en nuestro fichero de app.js inicializamos la base de datos en función del entorno, necesitamos instalar el modulo de mongoose npm install --save mongoose :

Una vez conectado mongoose, vamos a integrar un login local utilizando passport, para ello instalamos el modulo passport-local  npm install --save passport-local. Lo primero que vamos a hacer es crear un modelo para almacenar los datos de las distintas estrategias de login, utilizaremos bcrypt para cifrar las constraseñas  npm install --save bcrypt-nodejs.

Ahora vamos a crear una clase que se encargue de gestionar todas nuestras estrategias de login. Crearemos un fichero passport.ts en la carpeta config con el siguiente contenido.

Y lo incluiremos en el proceso de setup de nuestra app.ts de la siguiente manera.

Una vez hecho esto, tenemos que definir las rutas de nuestra aplicación. Utilizando express.Router(). Las rutas básicas GET son las siguientes: “/”, “/login”, “/signup”, “/logout” y por último “/profile”, esta última se ayuda de una función que nos permite saber si el usuario esta autenticado para darle paso.

Ahora si arrancas la aplicación, deberías ser capaz de darte de alta, logearte y ver tu perfile. En el próximo post seguiré añadiendo funcionalidad a nuestra aplicación web.

Referencias:

Install Python 3 coexisting with Python 2 in Linux

In this post I’m going to explain how to install Python 3 coexisting with Python 2 in Linux (Kubuntu 13.10 in my case). First step is install some dependencies.

After that, download from the website and uncompress the latest version of Python 3 in a folder of your choice.

Inside the uncompressed folder, we’re going to compile and install Python 3 with the following commands:

To make sure about the correct installation execute the following command  /opt/python3.3/bin/python3 and you must get something like that:

Also you should have brand new commands like python3  and python3.3. For the Python 3 modules management we’re going to install pip, but for Python 3 :-). Happily there is a debian package for that, use the following command  sudo apt-get install python3-pip to install it.

Finally we’re going to create a virtual environment of Python 3. There is two ways to do that. The first one, the hard way is specifing the python path that you want to use.

The second one, needs a previous installation of the virutalenv module using pip3  sudo pip3 install virtualenv . After you have installed it, to create Python 2 virtual environment you’ll must use virtualenv-2.7 and to create Python 3 virtual environment virtualenv-3.3. Enter the following command to get your Python 3 virtual environment.

Once you’ve created and set your Python 3 virtual environment, you’ll be able to install new modules using the pip command (inside our Python 3 virtual environment pip command is the same as pip-3.3). Let’s test it by installing the django module with  pip install django. After that, run the Python 3 console and write down the following instructions:

I hope it helps you!

Instalar Python 3 en Linux coexistiendo con Python 2

En este post voy a explicar como instalar Python 3 en Linux coexistiendo con Python 2. El primer paso es instalar las dependencias necesarias.

A continuación vamos a descargar de la web oficial y a descomprimir la ultima versión de Python 3 disponible en una carpeta a nuestra elección.

Nos situamos en dentro de la carpeta descomprimida y nos disponemos a compilar e instalar Python 3.

Finalmente para comprobar que todo ha ido bien ejecutamos  /opt/python3.3/bin/python3 y tenemos que obtener algo parecido a lo siguiente:

Además también tendrás nuevos comandos que podrás utilizar: python3python3.3. Para la gestión de módulos en Python3 vamos a instalar pip, pero para Python 3. Afortunadamente hay una paquete de Debian que nos resuelve esto, utiliza el siguiente comando para instalarlo  sudo apt-get install python3-pip.

Finalmente vamos a crear un entorno virtual de Python 3. Existen dos formas de llevar esto a cabo. La primera, la difícil, es especificando la ruta de la versión de Python que queremos virtualizar.

La segunda, más fácil, necesita que primero instalemos el modulo virtualenv utilizando pip3  sudo pip3 install virtualenv . Una vez este instalado, para crear entornos virtuales de Python 2 tendremos que usar virtualenv-2.7 y para crearlos de Python 3 virtualenv-3.3. Creemos uno de Python 3:

Una vez creado y seleccionado, podremos instalar nuevos modulos usando el comando pippip-3.3. Vamos a probar que todo funciona instalando django pip install django , arrancamos la consola de Python 3 y escribimos el siguiente código:

 

Scraping website using Python, Selenium, Lxml and PhantomJS

In this post I’m going to show a basic example of scraping website using Python with the headless browser PhantomJS. In other words, I’m going to automatize the extraction information process from a website using a browser that doesn’t have/need an user interface.

  • The easiest way to work with Python is using virtual environments with virtualenv. In Linux (Debian in my case) insert the following commands to install it.

    Now, go to a directory of your choice, then you must create and set the new virtual environment with the following commands.
  • First test. We need a couple of dependencies for doing the scraping, selenium and lxml. To do that, type down the following commands  pip install selenium and  pip install lxml inside of our virtual environment. If you have problems installing lxml is because you need some dependencies. So you need to erase the virtual environment that you have just created.

    After that you must install the following dependencies, they’re necessaries for compile the lxml module.

    Once you’ve installed it, create again the virtual environment like we did before, and inside of it execute the installation of lxml. If everything going well you should see something like  Successfully installed lxml . Now we are going to test the following code:

    Save it into a file named “test1.py” and execute it inside the virutal environment venv with  python test1.py, you must get the following exit:
  • Second test. Firstly we are going to install PhantomJS following the instructions in phantomjs.org, we create a folder for it and execute

    Now we’re going to modify the source code of the previous example by changing the instantiation of the browser. Firefox() by PhantomJS(). Beside I’ve specified a dimension for the window browser. If the website have a responsive desing maybe you are interest only in some data for one resolution.

    Save the source code into a file “test2.py” and execute it inside the virtual environment with the following command  python test2.py and you must get the same exit but without open a window browser.

 

References

Web scraping con Python, Selenium, Lxml y PhantomJS

En este post voy a montar un ejemplo básico de web scraping con Python utilizando el navegador headless PhantomJS. En otras palabras voy a automatizar la extracción de información de una pagina web utilizando un navegador  que no tiene/necesita interfaz de usuario.

  • La forma mas cómoda de trabajar con Python es haciendo uso de los entornos virtuales utilizando el virtualenv. Para instalar todo esto en Linux (en mi caso Debian) hacemos:

    A continuación nos vamos a una carpeta a nuestra elección y ahí creamos y seleccionamos el entorno virtual utilizando los siguientes comandos.
  • Primer Test. Para realizar el scraping necesitamos instalar una serie de dependencias por un lado  selenium y por otro lxml. Para ello ejecutamos  pip install selenium y  pip install lxml dentro de nuestro entorno virtual. Si tenéis problemas instalando lxml es porque como a mí, os faltan dependencias. Por lo que tendreís que borrar el virtualenv que acabamos de crear

    Y a continuación instalar las siguientes dependencias necesarias para compilar el modulo lxml.

    Una vez instalado esto, volvéis a crear el virtualenv como hemos hecho antes, y dentro de él ejecutáis de nuevo la instalación de lxml. Si todo ha ido bien deberías ver al final algo como  Successfully installed lxml . Una vez realizado esto vamos a probar el siguiente código:

    Si lo guardamos en un fichero “test1.py” y lo ejecutamos dentro del virtualenv venv con  python test1.py  obtenemos la salida:
  • Segundo Test. Primero vamos a instalar PhantomJS siguiendo las instrucciones de phantomjs.org, en una carpeta a nuestra elección ejecutamos

    Una vez hecho esto nuestro código solo va a cambiar en la instanciación del browser. Además he especificado una una dimensión para la ventana del mismo por si tuviéramos que obtener datos para un tamaño concreto de ventana en el caso de que la información cambiase en función del mismo debido a un diseño responsive.

    Guardamos el código en un fichero “test2.py” y lo ejecutamos dentro de nuestro virtualenv con  python test2.py y obtendremos la misma salida pero no se nos abrirá ningún navegador.

 

Referencias

Setup Cocos2dx environment in Linux for Android (Part 2)

Hi again! If you’ve been able to accomplish the first one, and you’re aim to continue, thi is the second part. In this part, we’re going to run the TestCpp project of Cocos2dx in Android. It’s going to be shorter process than the previous one.

Before we start with the Android part, I want you to try to make a debug against the HelloCpp project in eclipse. In Debian I had a problem. My eclipse said “Error while launching command: gdb –version”. After a while I realized that I hadn’t installed it, http://www.gnu.org/software/gdb/ and it’s necessary for debugging, so sudo apt-get install gdb.

Let’s start with Android. We have to define a couple of enviroment variables inside our eclipse. The first one, COCOS2DX must be defined in Eclipse->Preferences->General->Workspace->Linked Resources. Click in the New button and set the variable to the path of the uncompress folder of Cocos2dx, in my case /home/borja/Programas/cocos2d-x-2.1.4.

The second one, NDK_ROOT, must be defined in Eclipse->Preferences->C/C++->Build->Environment. Click in Add and set the variable value to the path of the uncompress folder of NDK, in my case /home/borja/Programas/android-ndk-r8e.

If you’re compiling the TestCpp project with the last version of Android like me, maybe the NDK shows this error android-ndk-r8e/build/core/add-application.mk:128: Android NDK: WARNING: APP_PLATFORM android-14 is larger than android:minSdkVersion 8 in ./AndroidManifest.xml. You can work around it by modify the file add_application.mk in the line 128, changing  $(call __ndk_warning by $(call __ndk_info.

Now, try to compile the TestCpp project, you should get an output console like this, but a little much longer :-).

Once the building process has finished, launch the app normally in an Android device, and everything should work well.

SC20130717-214505

Thanks for read this. The new group of post that I’m going to write, will be about setup a continuous integration environment in general and for Android particulary.

See you soon!

Instalar el entorno de desarrollo de Cocos2dx en Linux para Android (Parte 2)

Hola de nuevo, si fuiste capaz de acabar la primera parte y aun tienes ánimos para seguir, aquí esta la segunda. En esta vamos a montar la app TestCpp de Cocos2dx para Android. Será mucho mas cortito que el anterior.

Pero primero vamos a hacer un debug del HelloCpp. No por nada, sino porque a mi en mi Debian me falla el debug XD. Recibo el siguiente error: Error while launching command: gdb –version. Y después de un rato me he percatado de que literalmente no tengo instalado, http://www.gnu.org/software/gdb/ y al parecer es necesario para hacer debug XD, tan fácil como:  sudo apt-get install gdb

Para compilar en Android lo primero es definir un par de variables de entorno dentro de nuestro Eclipse. La primera COCOS2DX la definimos en Eclipse->Preferences->General->Workspace->Linked Resources hacemos click en el botón New y apuntamos la variable al directorio raiz donde hemos descomprimido Cocos2dx.

La segunda variable que vamos a definir apunta a ruta donde hemos descomprimido nuestro NDK, NDK_ROOT y la vamos a definir en Eclipse->Preferences->C/C++->Build->Environment. Hacemos click en Add y especificamos como valor la carpeta donde descomprimimos el NDK.

Si como yo estáis compilando el proyecto TestCpp con la última versión de Android, puede que el NDK os de el siguiente error android-ndk-r8e/build/core/add-application.mk:128: Android NDK: WARNING: APP_PLATFORM android-14 is larger than android:minSdkVersion 8 in ./AndroidManifest.xml, este error lo podemos saltar modificando el fichero add-application.mk y en la linea 128 como se indica, cambiando $(call __ndk_warning por $(call __ndk_info.

Hecho esto, trata de compilar el proyecto TestCpp, obtendrás una salida por consola parecida a esta pero mucho mas larga :-).

Una vez terminado el proceso de compilación, arrancamos la app normalmente y todo debería funcionar correctamente.

SC20130717-214505

Gracias por aguantar hasta el final, en la nueva serie de post que voy a escribir, explicaré como montar un sistema de integración continua en general y para Android en particular.

¡Hasta pronto!

Install libwebsockets library in Linux

Like the post’s title says, I’m going to explain how I installed the libwebsockets in my Linux distribution. I needed it for one of the Cocos2dx‘s libraries (the extension library). At first, by mistake, I thought that this library didn’t exist, but finally I found it, libwebsockets project.

Let’s download the last version wget http://git.warmcat.com/cgi-bin/cgit/libwebsockets/snapshot/libwebsockets-1.22-chrome26-firefox18.tar.gz  and uncompress it tar -xzvf libwebsockets-1.22-chrome26-firefox18.tar.gz . The installation instructions are in the INSTALL file. The first thing you have to do is check that you have already installed the autoconf package http://www.gnu.org/software/autoconf/. I don’t even known about its existence till I tried to install the libwebsockets today :-). Just type down in your terminal  sudo apt-get install autoconf. After that, launch the autogen.sh script ./autogen.sh. The first time I launched it in my laptop, Debian required to me the GNU Libtool package, if this is your case, just sudo apt-get install libtool.

Finally the steps described in the library for the correct installation are:

That will install the library in your system. In my case in the /usr/local/lib directory. If this is your case too, I recomend create a symbolic links in the /usr/lib/ directory for avoiding problems with Eclipse when you’ll try to use the library as “shared library”

 

References

Setup Cocos2dx environment in Linux for Android (Part 1)

In this post I’m going to explain the steps for installing the Cocos2dx environment in Linux for working with Eclipse and Android. We travel from basics to compile and execute the examples HelloCpp in Linux and TestCpp in Android. I’m assuming you have knowledge of Android, C++, Linux and you have already installed  and configured Eclipse with Android.  I’ve included some paths in my .bashrc file. I’m going to use them during this post, with this I can make some things easyly, for example, I can access to my android adb from any terminal. In order to do this, open a terminal in your home directory, and with your favourite editor modify the .bashrc file, nano .bashrc, and add the following lines:

Now for making the change effective we have to execute the following command: source .bashrc. The first thing that we’re going to do is install the eclipse plugin for C/C++, the Eclipse CDT Plugin, we have two different ways for doing that. The first one, is looking for it in the Eclipse Marketplace via Help > Eclipse Marketplace..”, the second one is using the update site: http://download.eclipse.org/tools/cdt/releases/juno. After this, we’re going to download the last version of Cocos2dx from the official site (http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download), in our case the version 2.1.4, and the last version of the Android NDK (http://developer.android.com/tools/sdk/ndk/index.html), unzip both files in a directory of our choice, in my case the “Programas” directory.

Now we have to define a few environment variables by editing the .bashrc file again nano .bashrc.

Again, for making the change effective we have to execute the following command: source .bashrc. You must be sure that you have installed the Java JDK because we’re going to need it later. If you don’t have it installed, use the command sudo apt-get install openjdk-6-jdk. If you have already installed a Java JRE, check your version with java -version, in my case I had the 6, so I installed the correspondednt JDK.

Now the fun part begins. We’re going to install the necesary dependences to use Cocos2dx. If you have not installed it yet, you’ll have to install the build essentials and the ia32-libs packages, check my previous post. Now we launch the scrpit “make-all-linux-project.sh”, in the root directory of the Cocos2dx uncompressed files:  sudo bash make-all-linux-project.sh. When the process finished, we’ll check if everything went ok, so we have to go to the  “cocos2d-x-2.1.4/samples/Cpp/HelloCpp/proj.linux/bin/release”  directory and execute the HelloCpp: ./HelloCpp. If you see a window with the Cocos2dx logo and the “Hello World” text, we can proudly follow with the next step.

Now starts the hard part. Let’s make all this work in eclipse in order to develop more comfortably. The first thing that we’re going to do is import all the necessary project for working with Coco2dx in Linux and Android. To do this right-click on the Project Explorer of the C/C++ perspective of Eclipse, then, click “Import…> General > Existing Projects into Workspace”. Right-click on “Browse” and choose the Cocos2dx root directory. Once we get the complete list, right-click on “Deselect All” and from the list we select the following projects only:

  • libBox2D – (proj.linux)
  • libChipmunk – (proj.linux)
  • libcocos2d – (proj.linux)
  • libcocos2dx – (android/java)
  • libCocosDenshion – (proj.linux)
  • libExtension . (proj.linux)
  • HelloCpp – (proj.linux)
  • TestCpp – (proj.android)

It seems a pretty obvious list, but took me a good while to figure out which projects I needed. But what really was a real waste of time was my ignorance about the CDT plugin. I have a 64bits Linux distribution, because of this when I compiled the projects by command line I didn’t get any errors. But when I used eclipse, all projects had problems with the dependencies. After reviewing all the compilation scripts used by the “make-all-linux-project.sh” and putting one by one all the correct dependencies to compile the projects in eclipse, I found out that every C++ project had a 64bits configuration ready to be used in eclipse, it could be selected in the project properties. I show you in these images the steps to follow, if your operating system is 64-bit based.

Main Menu Home Logo

Let’s build the projects in the  previous list order, and I’ll explain the details that we found along the process.

  • We build libBox2D without problems.
  • We build libChipmunk without problems.
  • In the libcocos2d library we found the first little issue, there is a dependency error with an static library, libxml2.a. This problem has a quick solution. In the project properties C/C++ Build > Settings. In GCC C++ Compiler > Includes and GCC C Compiler > Includes remove the following library dependence: ../../../cocos2dx/platform/third_party/linux/libxml2. And in GCC C++ Linker > Miscellaneous remove ../../../cocos2dx/platform/third_party/linux/libraries/lib64/libxml2.a. I’ve already make a pull request fixing that https://github.com/cocos2d/cocos2d-x/pull/3019.
  • In the libCocosDenshion library something strange happend, after fixing al the dependencies, when you try to build the eclipse project you get a nevereding error list like “…multiple definition of…” related with the classes SimpleAudioEngineFMOD.cpp and SimpleAudioEngineOpenAL.cpp. However, by command line it works perfectly, that’s because in the Makefile choose one file or another for build process according of the dependecies that you have already installed . I guess there’s a more elegant way to do this, but I don’t know how to make condicional linked files with the CDT plugin so I simply remove one of the files. I decided to keep SimpleAudioEngineFMOD.cpp, but if you decide to keep the SimpleAudioEngineOpenAL.cpp and eclipse fails building for some dependencies issues (that was my case in Debian) you must install:
  • In the libextension project we found a few issues too :-). At this point, I recognize that these problems are new from the last version 2.1.4. There is a new WebSocket entity that needs a non existing library “libwebsockets.h”.

    Errata (06/07/2013)
    <ERROR>And again… Why is it working perfectly building it by command line?, you know that, don’t you?, it’s because this entity is not included as source in the Makefile :-). So we’re going to remove both files WebSocket.h and WebSocket.cpp from the project explorer in eclipse.</ERROR>
    There is a way to install the “libwebsockets” library :-), and the reason why it’s working perfectly by command line is because this entity is not included as source in the Makefile. For installing this library follow the steps in my new post. I don’t explain that in this post because a think is long enough 🙂

  • But it’s not good enough!! :-), eclipse not found SimpleAudioEngine.h, that’s easy, I know the answer!, just access to the project properties, C/C++ Build > Settings and in the section GCC C++ Compiler > Includes add ../../../CocosDenshion/include. I’ve done the corresponding pull request https://github.com/cocos2d/cocos2d-x/pull/3034
  • And.. finally THE ROCK… I mean, we get to the HelloCpp project, and after build it we get the following errors:

    In the previous Cocos2dx versions I didn’t get these errors, because of this I did some research for a while. After more than an hour I realize a few things. The first one, this two elements are defined in ccFPSImages.h and ccFPSImages.c. The second one, building the project by command line it worked perfectly, of course, bacause are included in the Makefile. The last one, building the project by eclipse it didn’t work bacause the generated libcocos2d.so library didn’t cotains this two elements.
    This error was fixed adding this two files to the “Linked Resources” list in the project properties inside the “Resources” option. I didn’t found the way to do this using the eclipse interface so I edited the .project file directly adding the following lines into the <linkedResources> section. Here is the corresponding pull request: https://github.com/cocos2d/cocos2d-x/pull/3035

    Now the last attempt. Refresh, clean and build the libcocos2d project, do the same thing to the HelloCpp project, and if everything is ok, and you’re not about to surrender, you can execute the project a see a window like this:

Well, I think that’s enough for the first part of the tutorial :-). In the second one, we are going to  run the TestCpp Android project in a real device. Thanks for reading this long post.