ReactJS frontend that interacts with the Bodhi backend services
$ git clone https://github.com/bodhiproject/bodhi-ui.git
$ cd bodhi-ui
$ yarn
$ yarn upgrade // this is important
$ npm install
To run the development server, run the corresponding run script and the API will point to the remote server with the correct port. After compilation, it will show success commands & automatically redirect to the browser. Any code changes will be observed and will hot reload.
// Accepted Flags
--localwallet // Change compatibility for tx signing with a local wallet program, eg. Qtum Wallet
// Mainnet chain
$ yarn start:mainnet
// Testnet chain
$ yarn start:testnet
// Regtest chain - very fast block mining, can also mine blocks with API call
$ yarn start:regtest
To run the development server and point to a localhost server, run the following:
// Testnet chain on localhost
$ cd bodhi-server
$ npm run testnet:local // Runs local testnet bodhi-server
$ cd bodhi-ui
$ yarn start:local // Points to local testnet server
To create an optimized production build of the app, you need to run a build command in you terminal at app root. Use the build command specific to the chain you want to point to. The build output files will be in /build
.
// Accepted Flags
--chain= // Sets the chain env variables. One of: mainnet, testnet, regtest
--localwallet // Change compatibility for tx signing with a local wallet program, eg. Qtum Wallet
--output= // Sets the output folder of the build files
// Mainnet chain
$ yarn build --chain=mainnet
// Testnet chain
$ yarn build --chain=testnet
// Regtest chain - very fast block mining, can also mine blocks with API call
$ yarn build --chain=regtest
To create all production versions of the UI on the remote server, run /scripts/build-server-ui.sh
. It will create deploy it to /var/www/bodhi/...
and Nginx will handle the serving of the static app.
$ npm run lint:fix // get sweet link checking and fixing
$ npm run lint // to see whats wrong
react-intl
is used for localization.
- Try to use FormattedMessage whenever possible.
id
should match the id in the JSON file with all the strings.- Put the default text inside
defaultMessage
. - Dynamic variables can be declared in the
values
property.
<FormattedMessage
id='app.greeting'
description='Greeting to welcome the user to the app'
defaultMessage='Hello, {name}!'
values={{
name: 'Eric'
}}
/>
- For use with inline strings like string templates.
- Define messages at the top of the file using
defineMessages
.
const messages = defineMessages({
greeting: {
id: 'app.greeting',
defaultMessage: 'Hello, {name}!',
},
});
const localizedMessage = this.props.intl.formatMessage(messages.greeting, { { name: 'Eric' }});
// localizedMessage = 'Hello, Eric!'
- Run
npm run build:langs
- Update the newly translated strings in the corresponding language file. The language file is in
./src/languageProvider/locales
.