Beagle v1.7 is no longer actively maintained. The documented version you are viewing may contain deprecated functionality. For up-to-date documentation, see the latest version .
To create a Beagle’s project for, check out if have installed the following programs:
You must have Visual Studio Code to start your project. In case you don’t have installed it yet, you can find more information about it.
After the installation, follow the steps according to framework you chose:
Step 1: Open the terminal and use the command below:
ng new caseAngular
Wait until the CLI finishes to create the project.
Step 2: Go to the cd caseAngular
generated project’s folder, add Beagle Angular to your repository with one of the commands below, according to your package manager:
npm install --save @zup-it/beagle-angular
yarn add @zup-it/beagle-angular
Now, wait for the installation.
Step 3: Type one of these commands and press enter:
yarn beagle init
npx beagle init
On the question ‘Would you like to use yarn or npm?’, type the option you chose to use as a manager. For example, if you chose yarn
, then type yarn
and press enter.
On the question ‘Path to the beagle module (press enter to use default)', type which module path you’re using for Beagle. Considering the project was just created, and there aren’t any modules, press enter without informing anything.
On the question ‘Path to the module with the components to use with beagle (press enter to use default)', type which module path will be used for Beagle. Considering the project was just created, and there aren’t any modules, press enter without informing anything.
On the question ‘What’s the base url of the backend providing your beagle JSONs? (press enter to use default)', type which will be the backend’s basis URL that will be used to rescue the JSONs. Here, we’ll use mockyio, so type https://www.mocky.io/v2/
and press enter. Then wait until the configuration finishes:
beagle-components.module.ts
andbeagle.module.ts
.Step 1: Open the terminal and use the command below:
npx create-react-app case-react --template typescript
yarn create react-app case-react --template typescript
Step 2: Access the cd case-react
project’s file and add Beagle React to your repository. On your terminal, type:
npm install --save @zup-it/beagle-react
or
yarn add @zup-it/beagle-react
And wait until the installation finishes.
Now it’s time to configure Beagle’s files inside your application, following these instructions:
Open the app.module.ts
file and import Beagle’s module that was just generated:
...
import { Beagle } from './beagle.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Beagle
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Open the beagle.module.ts file and put the baseUrl
path
import { BeagleModule } from '@zup-it/beagle-angular'
// import all the components you wish to use with Beagle.
@BeagleModule({
baseUrl: 'http://localhost:4200/assets',
module: {
path: './beagle-components.module',
name: 'BeagleComponentsModule',
},
components: {
// Associate every beagle component to your angular component.
},
})
export class Beagle {}
On the /src
path, create another folder named beagle and, inside it, create a new file calledbeagle-service.ts
. Its structure should be similar to the image below:
Now, open the beagle-service.ts
created file and copy this code:
import { createBeagleUIService } from '@zup-it/beagle-react'
export default createBeagleUIService({
baseUrl: "",
components: {}
})
Now you need a JSON to render the components. Usually, this call is made by an external server that would return the JSON, but for this example we’ll use a local file that will be created for this test:
On your angular project, navigate to the src/assets
folder and create a new file named payload.json
. Insert this new file on the JSON
content below.
On your react project, navigate to the /public
folder and create a new file named payload.json
. Insert on the new file the JSON
content below:
{
"_beagleComponent_":"beagle:screenComponent",
"child":{
"_beagleComponent_":"beagle:container",
"children":[
{
"_beagleComponent_":"beagle:text",
"text":"Hello Beagle!",
"style":{
"cornerRadius":{},
"size":{},
"margin":{
"top":{
"value":16,
"type":"REAL"
}
},
"flex":{
"alignSelf":"CENTER"
}
}
},
{
"_beagleComponent_":"beagle:text",
"text":"Beagle is a cross-platform framework which provides usage of the Server-Driven UI concept, natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code.",
"_beagleComponent_":"beagle:text",
"style":{
"cornerRadius":{},
"size":{},
"margin":{
"left":{
"value":16,
"type":"REAL"
},
"top":{
"value":20,
"type":"REAL"
},
"right":{
"value":16,
"type":"REAL"
}
},
"flex":{}
}
}
]
}
}
Now it’s necessary to add on your application the local where the components will be rendered through JSON. The Beagle’s library provides a component with this functionality: beagle remote view
. To configure this component, follow these steps:
Open the app.component.html
file and replace all the content with this code:
<beagle-remote-view route="/payload.json"></beagle-remote-view>
route
in the code above states which route will be loaded. The URL specified here is relative to the baseUrl
declared in the configuration.
The parameter route
is only valid for versions 1.3 and above. For previous versions, you should use loadParams
instead. loadParams
is an object and the equivalent to this configuration would be { path: ‘/payload.json’ }.
Open the App.tsx
file where the JSON
will be rendered and change it until it looks like the example below:
import React from 'react';
import './App.css';
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';
function App() {
return (
<BeagleProvider value={BeagleService}>
<BeagleRemoteView route={'/payload.json'} />
</BeagleProvider>
);
}
export default App;
On this step, you will see where the layout defined with payload.json
file should be rendered. Here, there are two components provided by Beagle:
<BeagleProvider>
: Receives the value
propriety as the beagle-service
created on the previous step and that contains the initials configurations.
<BeagleRemoteView>
: Receives theroute
propriety that’s the path for our JSON file. Notice here that we add ' / ‘ because this value will be associated to a definedbaseUrl
onbeagle-service.ts
file.
route
in the BeagleRemoteView
is only valid for versions 1.3.0 and above. For earlier versions, please, use path
instead.
Once you have finished the project’s basic configuration, now you have to run one of the commands below to initialize your application:
If you use npm:
npm run serve
If you use yarn:
yarn serve
If you use npm:
npm run start
If you use yarn:
yarn start
After you finish these commands, access your application’s address on your navigator. If a screen with components would be rendered, that means that’s correctly working.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.