After you finish the installation, you need to configure the React project to use Beagle. To do this, just follow the steps:
Run one of the commands below to generate the files that will be used by the Beagle library. You can run the command according to your package manager (yarn or npm):
**yarn
yarn beagle init
**npm
npx beagle init
Then Beagle will return a question.
Do you want to replace the “app.tsx” content with the Beagle configuration? (y or n)?
If you type “y” the project app.tsx
will be replaced by one with the Beagle configuration, if you type “n” it won’t be replaced and a this configuration will have to be done manually.
At the end of this process, a new file called beagle-service.ts will be generated in your project:
or a better experience you could create your JSON outputsthrough a BFF. You will find how to configure a BFF here. This example uses a JSON that is available in the URL http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/welcome:
{
"_beagleComponent_": "beagle:container",
"children": [
{
"_beagleComponent_":"beagle:text",
"text":"Hello Beagle"
},
{
"_beagleComponent_":"beagle:text",
"style":{
"padding":{
"top":{
"value":10,
"type": "REAL"
}
}
},
"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"
}
]
}
container
and text
.After creating your JSON, its structure should look like the following image:
Now open the created file beagle-service.ts
and check if the code is the same as the one below:
import { createBeagleUIService } from '@zup-it/beagle-react'
export default createBeagleUIService({
baseUrl: "http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/",
components: {}
})
At this point in the configuration we can define the baseUrl of the external Beagle server. At this point we can define the Beagle server external baseUrl.
Now you need to specify the location where the components will be rendered in your application. For this, the Beagle library provides BeagleRemoteView and BeagleProvider.
Open the file of the component you want to render the layout and change it to look like the following example, in the route add the path relative to the remote JSON: / welcome.
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={'/welcome'} />
</BeagleProvider>
);
}
export default App;
<BeagleProvider>
: Provides the beagle-service
configuration file created in the previous step. This is specified in the value
property;<BeagleRemoteView>
: Renders the layout defined by the JSON specified at the route
property.baseUrl
set at the beagle-service.ts
fileroute
in the BeagleRemoteView
is only valid for versions 1.3 or higher. For previous versions, please use path.
To test your configuration, you need to start your application running one of the commands below :
yarn start
npm run start
After that, access: localhost:3000. And you will see the following screen:
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.