Different aspects of the boilerplate can be modified by changing the code and settings files in the configuration folder:
This is the model for the user object type in the GraphQL schema. Additional fields can be added depending the requirements of the project. Here is an example with the minimum set of fields:
export default class User
{
constructor( fields )
{
this.id = fields.id;
this.User_AccountName = fields.User_AccountName;
this.User_AccountPassword = fields.User_AccountPassword;
this.User_DisplayName = fields.User_DisplayName;
this.User_ProfilePhoto = fields.User_ProfilePhoto;
this.User_Email = fields.User_Email;
this.User_AuthToken = fields.User_AuthToken;
}
}
File generated by running build-units, containing all mutations in all units. It has contents similar to:
/* @flow */
// ...
import Ensayo_add from '../../units/urb-example-ensayo/graphql/mutation/Ensayo_add'
import Ensayo_delete from '../../units/urb-example-ensayo/graphql/mutation/Ensayo_delete'
import Ensayo_update from '../../units/urb-example-ensayo/graphql/mutation/Ensayo_update'
// ...
export default {
// ...
Ensayo_add,
Ensayo_delete,
Ensayo_update,
// ...
}
File generated by running build-units, used to initialize the object manager and the persisters. The format is similar to:
/* @flow */
// ...
import i19 from '../../units/urb-example-ensayo/graphql/model/Ensayo'
// ...
export default true
File generated by running build-units. Imports and re-exports all the fields that will be available on the Viewer (root) object from all the units that exhibit such fields. Here is an example with two modules - Ensayo and Translaticiarum:
/* @flow */
// ...
import Ensayo_ViewerFields from '../../units/urb-example-ensayo/graphql/type/_ViewerFields'
import Translaticiarum_ViewerFields from '../../units/urb-example-translaticiarum/graphql/type/_ViewerFields'
// ...
export default {
// ...
...Ensayo_ViewerFields,
...Translaticiarum_ViewerFields,
// ...
}
Human readable representation of the schema. Generated by build-schema, should not be edited manually.
Schema in JSON format. Must exist for build-schema to run, but is re-generated by it. Generated by build-schema, should not be edited manually.
Prototype of the .env file copied into \.env in setup-local script. The use of the environment variables is described in Boilerplate Environment Variables Configuration.
Value of the the anonymous user authentication token 2. It is best when it is a large random value. Example:
export default const AnonymousUserToken2 = 'abcdefghxyz'
Extensions for the authentication code used by the login. The function receives as a parameter the express router, which, in this function, can be extended with additional routes. Example:
export default function( auth )
{
// ...
auth.get( '/facebook', passport.authenticate( 'facebook') )
auth.get(
'/facebook/return',
passport.authenticate( 'facebook', { failureRedirect: '/login' } ),
uponAuthenticationSuccess
)
// ...
}
Configured the default chrome helmet set on the chrome. Returns a helmet object, for instance:
<Helmet
title="Universal Relay Boilerplate"
meta={ [
{ name : "description", content: "Boilerplate + examples for React Native" },
] }
/>
Defines the right icon displayed in the title bar. In many cases it is convenient to use it for user log in and account management, however it could be something else too.
import AppBar_Auth from '../../../units/urb-account-management/webapp/components/AppBar_Auth.jsx'
export default AppBar_Auth
Settings for customizing the chrome. Example:
export const NavMenuTitle = "Home"
export const MainScreenTitle = "Universal Relay Boilerplate"
Defines a footer shown at the bottom of every page in the application.
Initial screen displayed when the application is open.
Defines the navigation menu on the left. Returns a selectable list, for instance:
<SelectableList
value={ this.props.value }
onChange={ this.props.onChange }
>
<ListItem
primaryText="To Do"
primaryTogglesNestedList={true}
nestedItems={ [
<ListItem primaryText="All" value="/ToDos" />,
<ListItem primaryText="Active" value="/ToDos/active" />,
<ListItem primaryText="Completed" value="/ToDos/completed" />,
] }
/>
</SelectableList>
The component has to be wrapped in a relay container. It can be used to retrieve information like, for instance, if a user is logged in:
class NavMenu extends React.Component
{
render( )
{
let nestedItems_Misc = [
<ListItem primaryText="Home" value="/" />,
];
if( ! this.props.Viewer.User_IsAnonymous )
{
nestedItems_Misc.push( <ListItem primaryText="User Profile" value="/User" /> )
nestedItems_Misc.push( <ListItem primaryText="Force Login" value="/ForceLogin" /> )
}
// ...
}
}
export default Relay.createContainer( NavMenu, {
fragments: {
Viewer: () => Relay.QL`
fragment on Viewer {
User_IsAnonymous,
}
`,
},
} )
Exports the Material-UI theme for the application, for instance:
import muiTheme from '../../webapp/mui-themes/grayBlue'
export default muiTheme;