WHAT YOU’LL LEARN
- how to use the Full Stack Application scaffold to start building a new custom application in no time
Can I use this?
In order to follow this tutorial, you must use Webiny version 5.14.0 or greater.
The best way to start building a new custom application would be to use the Full Stack Application scaffold, which will automatically generate all of the fundamental application pieces for us. This includes the following.
A new GraphQL API created within a new project application in our Webiny project (more information below). Once deployed, we will use the Extend GraphQL API scaffold to extend it, meaning, create new GraphQL types, queries, and mutations.
Speaking of deployment, note that we'll need to deploy the newly created GraphQL API before jumping to React application development, simply because the React application relies on it. This is also something the Full Stack Application scaffold will warn us about, and will offer to do it for us.
In order to host the GraphQL API, these are the cloud infrastructure resources that will get deployed:
Note that we will expand this infrastructure with a couple of additional resources, in the following sections of this tutorial.
A new React application created within a new project application in our Webiny project (more information below). Here, we won't be relying on any existing scaffolds. Instead, in order to recreate the original Pinterest application's user interface, we'll simply use our existing React and Sass knowledge. And, as mentioned, we'll also use the Ant Design React library, which will make the whole process a bit faster.
Note that, for development purposes, except having the GraphQL API deployed, we don't need to perform any additional deployments. Frontend application development, or, in our case, React application development, can still be performed locally, on the developer's machine. You only deploy it when you need to have it online.
In order to host the React application, these are the cloud infrastructure resources that will get deployed:
In our terminal of choice, from our project root, let's run the following command:
Running this command should give us the following list of available scaffolds:
Once we've selected the Full Stack Application scaffold from the list, we'll get presented with the the following three questions:
- the name of the new full stack application
- the description of the new full stack application
- the path in which the new full stack application will be created
For the name, we'll go with Pinterest Clone. For description and path, we'll go with the provided defaults, where the path will automatically be set to pinterest-clone.
Once we've answered all of the questions, after a quick confirmation step, scaffolding will start. Once the process has been completed, we'll also be asked about whether we want to include a simple GraphQL API example in the created application code. For now, we can go with no here.
Furthermore, we'll also be asked about whether we want to immediately deploy the newly created GraphQL API. Here, it's recommended we go with yes, and that's what we'll do.
Ultimately, we should end up with the following output in our terminal:
Also, take note of the
pinterest-clone/app/pulumi folders. This is where the cloud infrastructure code lives, and by default, it contains the definitions of all of the necessary resources that are needed in order for our application to run properly.
In the following sections, we'll be doing a couple of additions and modifications here, so stay tuned.
Once the scaffolding process has been completed, it's time to start building our application.
In order to do that effectively, we will need the
webiny watch command, which ensures all of our application and cloud infrastructure code changes are detected, compiled, and automatically deployed into the cloud, when required.
Since two separate project applications were created in the scaffolding process, we'll need to run two separate
webiny watch commands.
The following command will start a new watch session on our GraphQL API application code:
Misplaced GraphQL API URL?
yarn webiny output pinterest-clone/api --env dev command from your project root will display all of the values that were exported from your cloud infrastructure code. That includes GraphQL API URL, Amazon DynamoDB table name, and more.
The following command will start a new watch session on our React application code:
Once started, by default, the React application should be locally accessible via http://localhost:3001.
In contrast to GraphQL API development, where the application code needs to be redeployed into the cloud as we're making changes to it, React application can be developed locally. Meaning, once the watch command is run, no automatic deployments will be performed.
Note that we need to specify the environment via the
--env flag, even when watching the React application. This is because the
build scripts need to pick up some of the values exported from GraphQL API's cloud infrastructure code, for a specific environment. For example, in order to interact with the GraphQL API, the React application needs to know its URL. Since we could potentially have our GraphQL API deployed into several environments, we need to specify it.
The following screenshot shows the two
webiny watch commands run side-by-side in two separate terminal sessions:
Once the two watch sessions have been started, we can start building our application. In the next section, we'll start by extending the GraphQL API with a basic set of CRUD GraphQL query and mutation operations.
The generated GraphQL API application code relies exclusively on Amazon DynamoDB for storing and retrieving data. Of course, you're certainly free to bring your own databases and import different database clients, if need be. In essence, this will require you to remove the Amazon DynamoDB table definition in the cloud infrastructure code, and integrate the preferred database and a database client in your application code.
No. As mentioned above, frontend application development can still be performed locally, on the developer's machine. You only deploy the application when you need to have it online.