Differences

This shows you the differences between two versions of the page.

--- tutorial:dev:creating_a_development_environment [2019/08/01 12:01]
kotynekv [5. Frontend development environment] Restoring deleted link to Atom tutorial
+++ tutorial:dev:creating_a_development_environment [2024/01/09 08:25] (current)
koulaj
@@ Line 1: / Line 1: @@
 ====== Creating a development environment ======
-This text is intended as a tutorial for CzechIdM developers with the goal to set up IDE, build CzechIdM in it and run the system. If you prefer quick glance at the code or need to start quickly, you can use [[tutorial:dev:quick_start_with_devstack|]].
+This text is intended as a tutorial for CzechIdM developers with the goal to set up IDE, build CzechIdM in it and run the system. If you prefer quick glance at the code or need to start quickly, you can use [[.:quick_start_with_devstack|]].
 ====== 1. Install Java and Maven ======
@@ Line 7: / Line 7: @@
 First install JDK and Maven:
-Download Java 1.8 Oracle JDK (or OpenJDK), minor version **at least 101** (it's necessary due to the certificate of Nexus repository, which uses Let's encrypt and its support was added in version 101). The guide was tested for jdk1.8.0_131.
+Download and install Java 11 OpenJDK (Java 21 OpenJDK for CzechIdM 13.1.0+).
 Install Maven from your system packages, at least version 3.1 is required.
 <code bash>
 yum install maven
 mvn -v
 </code>
 Note: If you installed Java separately from your system libraries, you should set the correct Java home for Maven in the file ".mavenrc", which you will create in your home directory. You put there the full path to your JDK:
 <code>
 export JAVA_HOME=/path/to/installed/jdk/
 </code>
 This way Maven will always use this JDK.
@@ Line 27: / Line 32: @@
 <code bash>
 git clone https://github.com/bcvsolutions/CzechIdMng.git
 </code>
 Check branch:
 <code bash>
 git branch
 </code>
@@ Line 39: / Line 46: @@
 <code bash>
 git checkout -b develop origin/develop
 </code>
@@ Line 45: / Line 53: @@
 <code bash>
 git checkout -b personal/YourName/feature_or_bugfix-name_of_your_branch
 </code>
@@ Line 54: / Line 63: @@
 Install necessary packages:
 <code bash>
 yum install postgresql postgresql-server postgresql-init
 </code>
 Fedora 25 packages:
 <code bash>
 dnf install postgresql-server postgresql-contrib
+</code>
+Ubuntu 22.04 LTS packages:
+<code bash>
+apt install postgresql postgresql-contrib
 </code>
 First run of the service:
 <code bash>
 systemctl start postgresql.service
 </code>
-If the following error occurs: "Job for postgresql.service failed. See 'systemctl status postgresql.service' and 'journalctl -xn' for details."
+If the following error occurs: "Job for postgresql.service failed. See 'systemctl status postgresql.service' and 'journalctl -xn' for details." Try initializing the PostgreSQL first and start the database again:
-Try initializing the PostgreSQL first and start the database again:
 <code bash>
 postgresql-setup --initdb --unit postgresql
 </code>
 Set automatic start of the service when starting OS:
 <code bash>
 systemctl enable postgresql.service
 </code>
 Set the configuration file for the database to accept login and password (change METHOD from ident to md5)
 <code>
 vim /var/lib/pgsql/data/pg_hba.conf
+in Ubuntu it is:
+vim /etc/postgresql/14/main/pg_hba.conf
+in Windows it is:
+<Postgress Install Dir>/Data/pg_hba.conf
 # TYPE  DATABASE        USER            ADDRESS                 METHOD
@@ Line 92: / Line 123: @@
 # IPv6 local connections:
 host         all                  all                ::1/128                     md5
 </code>
 Restart the service to load the changes:
 <code>
 systemctl restart postgresql.service
 </code>
-Create the database:
+Create the database with name:
-(Make sure you have installed and allowed en_US locale in your OS)
+  * Version 10 - bcv\_idm\_10
+  * Below version 10 - bcv\_idm\_storage
+  * (Make sure you have installed and allowed en_US locale in your OS)
 <code>
 su postgres -c psql postgres
 CREATE USER idmadmin PASSWORD 'idmadmin';
-CREATE DATABASE "bcv_idm_storage" WITH OWNER idmadmin ENCODING 'UTF8' LC_COLLATE = 'en_US.UTF-8' LC_CTYPE = 'en_US.UTF-8' template template0;
+CREATE DATABASE "bcv_idm_10" WITH OWNER idmadmin ENCODING 'UTF8' LC_COLLATE = 'en_US.UTF-8' LC_CTYPE = 'en_US.UTF-8' template template0;
 </code>
@@ Line 112: / Line 150: @@
 The tutorial is different for each IDE. Select one and continue with a certain tutorial below:
-  * [[devel:documentation:quickstart:dev:ide:eclipse|Eclipse]]
+  * [[:devel:documentation:quickstart:dev:ide:eclipse|]]
-  * [[devel:documentation:quickstart:dev:ide:idea|IDEA]]
+  * [[:devel:documentation:quickstart:dev:ide:idea|]]
 In the IDE start the Tomcat server with CzechIdM deployed.
@@ Line 119: / Line 157: @@
 In browser access [[http://localhost:8080/idm-backend/api/v1/status|http://localhost:8080/idm-backend/api/v1/status]] to check whether the backend is running. Following text should be displayed:
-> CzechIdM API is running
+> CzechIdM API is running  > \\ > If you can see this message, API is running
->
-> If you can see this message, API is running
 ====== 5. Frontend development environment ======
-<note important>**BEWARE!!!** Please use these [[https://github.com/bcvsolutions/CzechIdMng/tree/develop/Realization/frontend|instructions]]</note>
+<note important>**BEWARE!!!**  Please use these [[https://github.com/bcvsolutions/CzechIdMng/tree/develop/Realization/frontend|instructions]]</note>
 ===== Select IDE for frontend environment =====
 You can use any text editor or JavaScript IDE. We recommend to use ATOM
-  * See [[devel:documentation:quickstart:dev:ide:atom|ATOM tutorial]]
+  * See [[:devel:documentation:quickstart:dev:ide:atom|ATOM tutorial]]
 ====== 6. Run backend and frontend together ======
@@ Line 143: / Line 180: @@
 cd CzechIdM/Realization/frontend/czechidm-app
 gulp
 </code>
-A new browser window or tab will open with [[https://localhost:3000]] automatically (this could take some time).
+A new browser window or tab will open with [[https://localhost:3000|https://localhost:3000]] automatically (this could take some time).
 The frontend is fully started after you see in following line in log:
@@ Line 151: / Line 189: @@
 <code bash>
 [BS] 1 file changed (app.js)
 </code>
 After the application is running, log in:
   * username: admin
   * password: admin
-<note tip>If the app shows error with permission, log out</note>
+<note tip>If the app shows error with permission, log out</note> <note tip>To use CzechIdM in more windows or tabs for development purposes go to [[http://localhost:3001/|http://localhost:3001/]] to **BrowserSync**  administration and then go to **SyncOptions**  and disable everything except **CodeSync**</note>
-<note tip>To use CzechIdM in more windows or tabs for development purposes go to [[http://localhost:3001/]] to **BrowserSync** administration and then go to **SyncOptions** and disable everything except **CodeSync**</note>
 Congratulations! Your CzechIdM development environment is ready to use.
 ====== Common development errors & tips ======
@@ Line 168: / Line 206: @@
 If Tomcat server fails to start, try following:
-  * Increase the timeout for Tomcat server Start (see [[devel:dev:quickstart:ide:eclipse#install_tomcat|Install Tomcat]])
+  * Increase the timeout for Tomcat server Start (see [[:devel:dev:quickstart:ide:eclipse#install_tomcat|Install Tomcat]])
   * Check that PostgreSQL server is running.
 <code bash>
 systemctl status postgresql.service
 </code>
-  * Check that PostgreSQL database exists and the user can connect: Use the credentials filled in ''idm-app/src/main/resources/application-dev.properties'' and try to connect to the PostgreSQL database written in the datasource URL. E.g. for this setup:
+  * Check that PostgreSQL database exists and the user can connect: Use the credentials filled in ''idm-app/src/main/resources/application-dev.properties''  and try to connect to the PostgreSQL database written in the datasource URL. E.g. for this setup:
 <code>
 spring.datasource.url=jdbc:postgresql://localhost:5432/bcv_idm_storage
 spring.datasource.username=idmadmin
 spring.datasource.password=idmadmin
 </code>
 use the following command and type the password when asked for it.
 <code bash>
 psql -h 127.0.0.1 -U idmadmin bcv_idm_storage
 </code>
   * Check that you can read from the tables of the database. As in the previous point, connect to the PostgreSQL database and try to select data from any of the IdM tables. If you have insufficient access rights, check the owner and grants for the schema "public". If the user idmadmin is not an owner, there must be GRANT on schema public to the user idmadmin or to "public".
   * Check the error message in the server output console.
@@ Line 188: / Line 236: @@
 ==== Common error messages ====
-''Initialization of bean failed; nested exception is org.flywaydb.core.api.FlywayException: Validate failed: Migration checksum mismatch for migration 7.07.004'' means that your database was already used for some other version of CzechIdM (you can check used Flyway versions in the tables idm\_schema\_version\_xxx). This can happen if you switch to some older development branch. The easiest solution for the **developer** (you will lose all your prepared data in IdM!) is to drop the database (''DROP DATABASE bcv\_idm\_storage'') and create it again (see the part ''CREATE DATABASE'' of [[#install_postgresql|Install PostgreSQL]]). Or you can create a different database and set its name to the ''application-dev.properties'' temporarily.
+''Initialization of bean failed; nested exception is org.flywaydb.core.api.FlywayException: Validate failed: Migration checksum mismatch for migration 7.07.004''  means that your database was already used for some other version of CzechIdM (you can check used Flyway versions in the tables idm\_schema\_version\_xxx). This can happen if you switch to some older development branch. The easiest solution for the **developer**  (you will lose all your prepared data in IdM!) is to drop the database (''DROP DATABASE bcv\_idm\_storage'') and create it again (see the part ''CREATE DATABASE''  of [[#install_postgresql|Install PostgreSQL]]). Or you can create a different database and set its name to the ''application-dev.properties''  temporarily.
-''Initialization of bean failed; nested exception is org.flywaydb.core.api.FlywayException: Found more than one migration with version 7.07.004'' means literally that there is a duplicity in Flyway scripts versions. This has to be fixed by the authors of the scripts by renaming one of the script that use the same version. The log will tell you where to find the duplicity:
+''Initialization of bean failed; nested exception is org.flywaydb.core.api.FlywayException: Found more than one migration with version 7.07.004''  means literally that there is a duplicity in Flyway scripts versions. This has to be fixed by the authors of the scripts by renaming one of the script that use the same version. The log will tell you where to find the duplicity:
 <code>
 Offenders:
 -> ... idm-core-impl-7.7.0-SNAPSHOT.jar!/eu/bcvsolutions/idm/core/sql/postgresql/V7_07_004__automatic-role.sql (SQL)
 -> ... idm-core-impl-7.7.0-SNAPSHOT.jar!/eu/bcvsolutions/idm/core/sql/postgresql/V7_07_004__add-index-template-name.sql (SQL)
 </code>
 Just increase the version in the name of one of the scripts, clean & build the project again.
 === Could not create Vfs.Dir from url ===
 **This isn't error just warning**. You may don't interest about this warning. Warning is only when you start local development environment and you configuration for ic connectors path isn't correctly setup. Dont worry about this warning.
@@ Line 207: / Line 258: @@
 org.reflections.ReflectionsException: could not create Vfs.Dir from url, no matching UrlType was found [file:/usr/lib/jvm/java-8-openjdk-amd64/jre/lib/ext/libatk-wrapper.so]
 either use fromURL(final URL url, final List<UrlType> urlTypes) or use the static setDefaultURLTypes(final List<UrlType> urlTypes) or addDefaultURLTypes(UrlType urlType) with your specialized UrlType.
 </code>
+===== Frontend build fails =====
+==== Out of memory ====
+If your gulp build fails with the following error:
+<code>
+[INFO] [18:43:00] Starting 'browserify'...
+[INFO] [18:45:30] Finished 'browserify' after 2.5 min
+[INFO] [18:45:30] Finished 'build' after 3.12 min
+[INFO]
+[INFO] <--- Last few GCs --->
+[INFO]
+[INFO] 192087 ms: Scavenge 1282.6 (1434.8) -> 1282.1 (1434.8) MB, 3.8 / 0 ms (+ 3.8 ms in 9 steps since last GC) [allocation failure].
+[INFO] 192095 ms: Scavenge 1282.6 (1434.8) -> 1282.2 (1434.8) MB, 3.6 / 0 ms (+ 3.3 ms in 8 steps since last GC) [allocation failure].
+[INFO] 192102 ms: Scavenge 1282.6 (1434.8) -> 1282.1 (1434.8) MB, 3.7 / 0 ms (+ 2.9 ms in 7 steps since last GC) [allocation failure].
+[INFO]
+[INFO]
+[INFO] <--- JS stacktrace --->
+[INFO] Cannot get stack trace in GC.
+[ERROR] FATAL ERROR: Scavenger: semi-space copy
+[ERROR] Allocation failed - process out of memory
+[ERROR] 1: node::Abort() [gulp]
+</code>
+Try following:
+  * Go to ''Realization/frontend/czechidm-app/''  and delete ''node\_modules''. Then start the build again (''npm install''  etc.)
+  * If you build BE+FE of a project together, check the ''pom.xml''  of the app module - the configuration properties ''nodeVersion''  and ''npmVersion''. They should be the same as the product currently supports (check the [[https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/backend/app/pom.xml|app module of the product]]):
+<code>
+                        <execution>
+                                <id>install node and npm</id>
+                                <goals>
+                                    <goal>install-node-and-npm</goal>
+                                </goals>
+                                <phase>generate-resources</phase>
+                                <configuration>
+                                    <nodeVersion>v10.15.3</nodeVersion>
+                                    <npmVersion>6.4.1</npmVersion>
+                                </configuration>
+                        </execution>
+</code>
+  * try adding ''\–max\_old\_space\_size=4096''  to the ''gulp''  command. Or if you build BE+FE together by app module, try adding it in the pom.xml of the app:
+<code>
+                                                         <execution>
+                                                                <id>gulp build</id>
+                                                                <goals>
+                                                                        <goal>gulp</goal>
+                                                                </goals>
+                                                                <phase>generate-resources</phase>
+                                                                <configuration>
+                                                                        <arguments>build -p ${frontend.profile} -s ${frontend.stage} --max_old_space_size=4096</arguments>
+                                                                        <workingDirectory>../../frontend/czechidm-app</workingDirectory>
+                                                                        <installDirectory>target</installDirectory>
+                                                                </configuration>
+                                                        </execution>
+</code>
+==== Wrong layout and NPM version ====
+If your frontend looks like this: [[https://redmine.czechidm.com/issues/1752|https://redmine.czechidm.com/issues/1752]], check following:
+  * there is package-lock.json file in the frontend app module and it looks like this: [[https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/frontend/czechidm-app/package-lock.json|https://github.com/bcvsolutions/CzechIdMng/blob/develop/Realization/frontend/czechidm-app/package-lock.json]]
+  * NPM version which you use when building frontend (or FE+BE) is at least 6.
+<code>
+npm -v
+.4.1
+</code>