This guide explains how to set up the ABP Angular UI workspace, run the demo app, and prepare your environment to contribute UI changes. It assumes that you are already familiar with basic Angular and .NET development.
> Before sending a pull request for Angular UI changes, please also read the main [Contribution Guide](index.md).
You need to install SQL Server and Redis. You can install these programs without docker, but my example uses docker containers. Your computer should have Docker Engine. Then open the terminal and execute the commands one by one.
You need SQL Server and Redis. You can install these programs without Docker, but the examples below use Docker containers. Your computer should have Docker Engine running. Then open a terminal and execute the commands.
- Replace `YourStrong!Passw0rd` with a strong password that satisfies SQL Server password requirements.
- The `sqlvolume` named volume is used to persist database files.
### Redis
```cmd
```bash
docker run -p 6379:6379 -d redis
docker run -p 6379:6379 -d redis:latest
```
```
Then we are ready to download and execute the code.
After running the commands, you can use `docker ps` to verify that both containers are running.
Once the containers are ready, you can download the ABP source code and run the apps.
## Folder Structure
## Folder Structure
The app has a backend written in .net core (c#) and an angular app. It would help if you ran both of them.
The sample application has:
- A backend built with ASP.NET Core (C#).
- An Angular workspace managed by Nx.
You will run both the backend and the Angular dev app during development.
## Running the Backend App
The backend root path is `templates\app\aspnet-core`.
### 1. Configure the Connection Strings
## Running Backend App
If you are using the Dockerized SQL Server, update the connection strings to point to your Docker container. The configuration file is:
The path of the Backend app is “templates\app\aspnet-core.” If you want to work with dockerized SQL Server, you should change connection strings for running with docker. The path of the connection string is
cd templates/app/aspnet-core/src/MyCompanyName.MyProjectName.HttpApi.HostWithIds
dotnet run
```
After it starts, the backend API will be available on a localhost URL defined in the project (for example, `https://localhost:44305`, depending on your template).
## Running the Frontend (Angular Dev App)
The Angular workspace is under `npm\ng-packs`. It is an Nx workspace that contains both the dev app and the Angular UI packages.
- Dev app path: `npm\ng-packs\apps\dev-app`
- Package path: `npm\ng-packs\packages\`
The dev app uses local references to the packages under `packages`, so your library changes will be reflected immediately while the dev server is running.
### 1. Install Dependencies
From the dev app folder:
```bash
cd npm/ng-packs/apps/dev-app
yarn
# or, if you prefer npm:
# npm install
```
Choose one package manager (preferably `yarn` if that is what the repository uses) and stick with it.
### 2. Start the Dev Server
```bash
yarn start
# or:
# npm start
```
Before running the backend, you should run the Db migrator project. The DbMigrator created initial tables and values. The path of DbMigrator is `templates\app\aspnet-core\src\MyCompanyName.MyProjectName.DbMigrator`. Open a terminal in the path and execute the command `dotnet run` in terminal
This will start the Angular dev server (via Nx) and open the dev app in your browser. Ensure that the backend API is running so the dev app can connect to it.
One last step before the running the backend is installing client-side libraries. Go to `templates\app\aspnet-core`. Open a terminal in the path and execute the command `abp install-libs` in terminal
## Typical Contribution Workflow
Next step you should go to path of backend host project. The path is `templates\app\aspnet-core\src\MyCompanyName.MyProjectName.HttpApi.HostWithIds`. Open a terminal in the path and execute the command `dotnet run` in terminal
1. Start SQL Server and Redis (for example, using the Docker commands above).
2. Run DbMigrator to create and seed the database.
3. Run `abp install-libs` and start the backend HTTP API host.
4. Install dependencies and start the Angular dev app.
5. Make changes in the Angular UI packages under `npm\ng-packs\packages\`.
6. Run any relevant tests for the affected packages (for example, via Nx).
7. Commit your changes and open a pull request on GitHub, referencing the related issue.
Your backend should be running successfully
## Troubleshooting
## Running Frontend App
- **Backend cannot connect to SQL Server**
- Check that the SQL Server container is running (`docker ps`).
- Verify the connection string server/port and `SA_PASSWORD` value.
- **Angular app cannot reach the backend API**
- Confirm that the backend host is running and listening on the expected URL.
- Check the API base URL configuration in the dev app’s environment files.
- **Node or package manager version issues**
- Use an LTS version of Node.js.
- Consider using a version manager (like `nvm`) to match the version used in the project.
There is a demo app. The path of the demo app is `npm\ng-packs\apps\dev-app`. The demo app is connected to the packages with local references. Open the terminal in `npm\ng-packs\apps\dev-app` and execute `yarn` or `npm i` in terminal. After the package installed run `npm start` or `yarn start`.
## See Also
The repo uses Nx and packages connected with `local references`. The packages path is `npm\ng-packs\packages`
sumeyye
3 weeks ago