Getting Started with SuiteCRM 8 Development

I’m getting quite comfortable developing in SuiteCRM 7 and really enjoy it.

The time has come to venture into SuiteCRM 8. I have read over the Developer Guide and it’s really new to me. I didn’t go to school for software development so I really need to learn this stuff buy understanding it and then trial and error (and a lot of guidance from you in this forum). So looking for some “big picture” advice to get started and just to clarify in my head how it all works. If anyone can help guide me I’m sure I’m not the only one with these questions:

  1. Do I need to create the development deveopment environment and push back and forth or is this just “best practice”

  2. Do I need to yarn build for any changes to take effect? Or only front end changes? (ie do I need to do this for things like before_save hooks and other backend type stuff?)

  3. Once I build the dev how do I access it in my browser for testing? What’s the URL?

So big picture (as I think I understand it), I run the commands to create the dev environment, make changes to the dev… will they be immediately visible in the dev, or do I need to rebuild the dev for them to take effect? Or is that what the --watch does, automatically adds changes to the build?

So then, if lets say my assumptions are correct and dev is the way I want it, I need to run the yarn command to push them to production?

(sorry I know this sounds simplistic, but that’s where I’m starting from)

Hi Paul

Before moving to v8, just a question about v7 - are you using an IDE already? if you’re still missing out on the joys of XDebug and stepping through the code, calmly looking at call stacks and watched variables… then that’s what I would recommend that you learn first.

That knowledge would also be valuable for the move to v8.

About your questions:

  1. You mean git push/pull? Not necessary, but yes, quite useful
  2. yarn is for front-end changes only (Angular). Many other things won’t require those rebuilds, things like logic hooks, metadata changes, etc. Note that this build is quite resource-hungry (RAM!)
  3. This is independent of v7 / v8, it’s just how you set up your web server (I’m talking about your main web server like Apache, not the built-in ng web server, which is optional).
1 Like

Thanks @pgr, The docs say that you have to install a dev package to get started. I’m kind of confused about this, I had in my mind after reading it that it would create a separate “dev” installation where you would make changes and then push them to production. Maybe my terminology isn’t right, but I guess the dev is properly called the “extension”?

This is what I’m talking about…

yarn run build-dev:defaultExt

The dev package is just a normal SuiteCRM installation with an added “dist” directory:

The dist folder is the master folder containing all the essential files and subfolders which are hosted on the server. It contains transpiled code of Angular apps in JS, HTML and CSS files. This folder gets created itself when run ng build comand.

So it’s basically a way of saving you from having to build the whole thing (since you will be building it).

A different issue is the Symfony environment, defined by APP_ENV setting in .env. This can be prod, dev or qa. You can do dev work with prod environment, no problem, but if choose dev you get extra debugging info (along with a slower build and execution).

Ok thanks @pgr the light bulb is starting to light up!

Thank you pstevens for this post, it’s gonna help me understand about 8.x versions.

1 Like

Hey @pstevens,

The above was a good reference from @chris001 and @pgr

The following sections from the docs might help to understand what the dev package is:

Where to get it | source: Developer guide getting started

1.1 (recommended) Setting up using the development package

  1. Download the dev package from github, e.g.: SuiteCRM-8.3.0-dev.zip , see the dev package in the Latest GitHub Release
  2. Install SuiteCRM using the Downloading & Installing guide from the admin section
  3. Setup the frontend extension using the Getting started with frontend extension development

What it is | source: Getting started with frontend extension development

1.1 Development package

This package is meant to help in the development of frontend extensions.

The only difference between the base package and the dev package, is that the dev package includes the dist folder.

Including the dist folder should remove the need to rebuild the core frontend code.

Please have a look at the Developer Install Guide you want to rebuild the full core frontend.

My understanding

  1. With the dev you do not need to run the following (as it already includes the code generated by the following commands):

    • yarn build:common
    • yarn build:core
    • yarn build:shell
  2. Therefore, from a front-end (angular) perspective, with the dev package the only thing you need to run is:

    • yarn install (just need to run once, to fetch dependencies)
    • yarn run build-dev:defaultExt or (yarn run build:defaultExt for prod build mode)

So after doing a change you just need to run. Assuming you are adding your changes to the defaultExt folder:

  • yarn run build-dev:defaultExt

OR you can add a watch, which will automatically rebuild on file changes:

  • yarn run build-dev:defaultExt --watch
2 Likes

Ok thanks everyone, I think I understand enough to try out a dev install. That’s next weekends project!