Skip to main content

Getting Started

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.

info

The code that we cover in this section can also be found in our GitHub examples repository. Also, if you'd like to see the complete and final code of the application we're building, check out the full-example folder.

Full Stack Application Scaffold#

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.

GraphQL API#

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:

Cloud Infrastructure Resources
(click to enlarge)

Note that we will expand this infrastructure with a couple of additional resources, in the following sections of this tutorial.

React Application#

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:

Cloud Infrastructure Resources
(click to enlarge)

Running the Scaffold#

In our terminal of choice, from our project root, let's run the following command:

yarn webiny scaffold

Running this command should give us the following list of available scaffolds:

Scaffolds List
(click to enlarge)

Once we've selected the Full Stack Application scaffold from the list, we'll get presented with the the following three questions:

  1. the name of the new full stack application
  2. the description of the new full stack application
  3. 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:

Full Stack Application - Full Output
(click to enlarge)

As we can see, the scaffold created the GraphQL API inside the pinterest-clone/api, and the React application inside the pinterest-clone/app folder.

pinterest-clone
โ”œโ”€โ”€ api # GraphQL API project application folder.
โ”‚ย ย  โ”œโ”€โ”€ code # Application code.
โ”‚ย ย  โ”‚ย ย  โ””โ”€โ”€ graphql # GraphQL API application code.
โ”‚ย ย  โ”œโ”€โ”€ pulumi # Cloud infrastructure code.
โ”‚ย ย  โ””โ”€โ”€ webiny.application.ts # Project application's manifest file.
โ”‚
โ””โ”€โ”€ app # React application project application folder.
โ”œโ”€โ”€ code # React application code.
โ”œโ”€โ”€ pulumi # Cloud infrastructure code.
โ””โ”€โ”€ webiny.application.ts # Project application's manifest file.

Note that these folders are just project application folders. The actual application code will be located in pinterest-clone/api/code/graphql and pinterest-clone/app/code folders.

info

Project application folders can be easily recognized because they always contain the webiny.application.ts manifest file. In our case, these are pinterest-clone/api/webiny.application.ts and pinterest-clone/app/webiny.application.ts.

Also, take note of the pinterest-clone/api/pulumi and 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.

Using the Watch Command#

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.

GraphQL API#

The following command will start a new watch session on our GraphQL API application code:

yarn webiny watch pinterest-clone/api --env dev
Misplaced GraphQL API URL?

Running the 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.

React Application#

The following command will start a new watch session on our React application code:

yarn webiny watch pinterest-clone/app --env dev
tip

Once started, by default, the React application should be locally accessible via http://localhost:3001.

No Continuous Deployment Needed#

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.

Why the --env Argument?#

Note that we need to specify the environment via the --env flag, even when watching the React application. This is because the watch and 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.

Final Result#

The following screenshot shows the two webiny watch commands run side-by-side in two separate terminal sessions:

Watching GraphQL API and React Application
(click to enlarge)

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.

FAQ#

Which database is used in the generated GraphQL API application code?#

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.

Do I need to deploy the created React application in order to continue development?#

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.

Last updated on by Adrian Smijulj