WHAT YOU’LL LEARN
- how to quickly create a functional app Admin area app
Before you start this tutorial, make sure that you have Webiny installed and to read our Introduction tutorial.
The UI scaffold is our boilerplate React application that works out of the box without you needing to actually write any code. It will enable you to create, update and delete the data via the form and to list and view it. In this article we will go through the process of generating the code.
The command you will run is
yarn webiny scaffold, and you run it from the project root.
You will get a set of simple questions to answer and, in the end, a React application package will be generated.
Also note that in this tutorial we will use
CarManufacturer as our data model name.
Run the scaffold command and follow the questions. Select the
Admin Area package option and let's go through all the questions in detail:
This is the name of your API data model, so type it in.
As mentioned before, we will use
CarManufacturer in this tutorial.
The GraphQL queries, mutations, responses, and variable names in the code will use this value in singular and plural, kebab-case, camel-case or some other form.
The name value is also used to create both the defaults for the package location and the package name.
The initial data model has 3 fields (
isNice) to show you how to structure your data model.
Validation of the data model name allows only a-z and A-Z. You can name your model all lowercase or all uppercase. It is up to you - but try to keep it in pascal-case.
A full location of the package, where the package files will be generated, from the root of the project.
The value given in the previous question is used to create the default package location.
We think it is best to organize your packages in
packages directory, so by default it is set into that directory, but you can type whatever location you want.
To learn more about Webiny's project organization, checkout this article.
The default value is
packages/car-manufacturers/admin-app. Notice that the data model name
CarManufacturer is in plural and kebab-cased.
The package name that you will reference to in the code.
As in the location step, the value from the first question is used to create the default package name.
The default value is
@car-manufacturers/admin-app as we like scoping packages. You can set it to what ever you want, providing it is passing the validation.
Generated code contains:
src/views/graphql.tswith GraphQL queries and mutations for the data model.
src/views/CarManufacturers.tsxwith a React component that renders both the list view and the form.
src/views/CarManufacturersDataList.tsxwith a React component that lists existing data models via the GraphQL queries.
src/views/CarManufacturerForm.tsxwhich utilizes our
@webiny/formpackage to display and populate the form.
RoutePlugindefinition to add the route in the admin area.
AdminMenuPlugindefinition to display the menu in the admin area.
src/types.tswith interfaces for entry items and data list props.
src/index.tswith exports of the plugins to be used in the admin app.
In the main admin app file you need to import your package and include it in the plugin registration array.
Let's say you want to add a new field named
country to identify where is the Car manufacturer located.
You would add a new Cell component with Bind and Input components to the existing form, something like this:
You need to change GraphQL as well, for example we will add it into mutation for creating the entry:
You need to make changes in other mutations and queries as well.
After you have the
country field, you want to be able to sort by it. You would add it to the sorters in the data list component:
If you want to add some new menu in the Admin area, check out the
You can make a copy of that file, name it
myMenu.tsx and import it into the
If you want your created menu to load some route, check out the
Also, you can copy that file and change what you require. Remember to import it into the
When you make changes to the code, make sure you run
yarn webiny ws run build --folder=packages/car-manufacturers/admin-app to actually compile your code for the deployment.
You can even have a watcher running for your code with
yarn webiny ws run watch --folder=packages/car-manufacturers/admin-app.
Of course, the
folder value is your package location.
Unlike the API, you can run the React application locally:
yarn start --env=YOUR_ENVIRONMENT
This will start the local build of the Admin app. Also, it will automatically rebuild and refresh when it detects changes in the code.
To use the generated React application online, you must deploy it. To deploy, use the command:
Now you have the functional UI in the admin area to create, update, delete, and list the CarManufacturers.