In this tutorial, you will set up a simple portfolio website to showcase your projects and your blogs using pure React, Webiny Headless CMS, and Apollo GraphQL. After setting up your portfolio website, you will be able to focus all of your creativity on the content for blogs and projects.
These are the features of the Portfolio Website:
- 2 Content types: Blogs, Projects
- 6 Created blogs
- 6 Created projects
- Apollo Client to fetch the content models data
- Responsive design using Material UI React Components
- Front-end deployment with Vercel
Here is what we'll build:
Or, you can Watch the live demo.
- A Webiny Project
First of all, make sure you follow the prerequisites to create a Webiny project.
When setting up a new Webiny project, there are currently two project templates you can choose,
cms template. Both include the Headless CMS app by default.
1.1 Webiny Headless CMS project
To create a Webiny Headless CMS project, run the following command:
Learn more about the Webiny project structure.
1.2 Setup database connection
Follow this guide to set up your database connection.
1.3 API Deployment
We need to deploy a
local API environment for our backend project to use for local development by running this command:
For more information on the deployment, read through Webiny documentation for Deployment.
The deployment will take around 5-15 minutes depending on your internet connection and the AWS region.
1.4 Start the
The admin app is the administration system for your project; it contains everything you need to manage your content, users, settings, etc.
Start the admin app by moving to the
apps/admin folder and running the command below.
Create your admin user by filling the form as shown in the image below.
When creating a Webiny project with the CMS template, the security application will be part of the Headless CMS project. To learn more about what Webiny offers regarding the ready-made serverless applications, check out the Webiny Websites.
Learn more about the Webiny Headless CMS features
After we create our admin user account, we will be redirected to the admin view which contains information regarding Webiny Documentation, Code examples, and our Community links.
To create the content models click on the
New Content Model or open the menu on the right-left corner.
1.5 Creating the content models for Blogs, Projects, and Categories
Now that we have the backend application set up, we will continue to create the content models for Blogs, and Projects.
Click on the
+ green button to create the
Blogs Content Model.
These are the fields we will use for our Blogs:
SAVE button on the right corner. Go back and create
Projects content model.
These are the fields we will use for our
1.6 Filling the data for the content models
Here you will create your creative content for Blogs, by filling all the input fields that we created in the above step.
You will follow the same process to create content for your project’s content models.
1.7 Access Token
Now that we have our data created, we can go ahead and check the
API information of our
backend project. We have all of the URLs we need to continue building our project. The one we need for now is the Headless CMS - Content Delivery API
cms/read/production, where Webiny exposes a GraphQL Playground you can use to easily test and debug your API calls.
Open the Content Delivery API which ends with the
/cms/read/production. Now, let’s write some queries to read our Blog content.
To be able to read our data, you need to create an
Access Token in your backend project. Go ahead at the
Settings menu and create an access token. Then copy and paste it to the HTTP HEADERS for the Authorization in the GraphQL Playground. Check out the image below.
Learn more about the Webiny Access Tokens.
Now that we are getting our data, it’s time to start building the
We will create a
create-react-project front-end application. On top of that, we will use the Material-UI framework. The React component library, based on Google Material Design, allows us a fast and easy usage of stylized web components.
First, let's start by creating a react application from scratch by running this command:
One of the advantages of using TypeScript is that Type errors will show up in the same console as the building one. You'll have to fix these type errors to continue development or build the project. For advanced configuration, see here.
Now, you will install all the necessary libraries you need to build your Portfolio website. Run the below command to install the packages for Material-UI and Apollo GraphQL.
2.1 Front-end structure
You are ready to start building the frontend components for your Portfolio website. The project will have a simple structure when it comes to the components and pages.
Let’s create the
components folder and add the first react component to our project, the
We created the project using the TypeScript template. When importing modules, there will be an error shown, such as:
Could not find a declaration file for module [...]. As a quick fix, add the following line to your
2.2 Front-end components
Navbar, we will use the
Link, and other material components to fill the
Let's start with importing what we need:
Next, we will add the
makeStyles (hook generator) and
withStyles (HOC) that allows you to create multiple styles rules per style sheet. Learn more about Overriding styles classes in material-UI.
Let's add the styles:
Now, we will create the
Let's see what we did here.
We added the
Navigation Drawer component that provides access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon. In our case, we have it permanently on-screen.
Navigation Drawer, we used the
List component, a continuous group of vertical text or image indexes.
List, we created an array with values of pages we will navigate to. To navigate those values, we will use the
Link from the
Next, we are using the
InfoIcon as an example of an icon in each of the
Let's test this component on the react project. To see the difference, we have to make some changes in the
Let's import the
Navigation component, and the
If you didn't start already the server, run the
npm run start or yarn start to see the changes.
This is our first version of the
Navigation Drawer. Now let's add the
The purpose of creating an
Icons component is to have the opportunity to add dynamic items on our
icons.tsx file in the
components folder, and add the following snippet:
To use this component, we have to make a small change in our
Let's see how it looks below.
As you can see, now we have three different Navigation Drawer items, but before moving on to creating the pages, there is another essential component we will start, which is the
Card component. It will be used on both the Blogs page and the Projects page.
The Material-UI components we will use to create the Card component are the
card.tsx file in the
components folder and add the snippet below.
starterCard function will be used in both the
Projects pages. The Card component already has the data we need from the Content Models. Each of our Content Models has these fields:
We will get back to this component after we create all of the
Before jumping on the pages, Material-UI gives you the opportunity to customize Material-UI with your theme. You can change the colors, the typography and much more. If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application.
Below you will find the
theme.tsx code snippet. Create the
theme.tsx in the
src folder and add the code below.
pages folder in the
src folder. The Material-UI components we will use for the pages are:
The styles components:
Let's start with the home page. Create a
home.tsx file in the
pages folder, and add the code from the snippet below.
You can use this component as a Welcoming page to your Portfolio Website.
about.tsx file in the
pages folder and add the code snippet below.
Check out other Material-UI components to add more views in your pages.
Blogs page, we will use the
Grid Material-UI component to show the Blogs cards. Create a
blogs.tsx file and add the below code snippet.
A couple of things are happening in the above snippet so let's go through them.
Blogs page will showcase the blogs you will create with the Content Models in the Webiny Headless CMS. We are using the
useQuery hook for executing queries in Apollo. We will execute the
GET_BLOGS query that we will create in step
For the view, we are using the
Grid component that creates a visual consistency between layouts. Material Design's responsive UI is based on a 12-column grid layout. Find out more about Grid component.
Projects component (Challenge)
projects.tsx file in the
pages folder, and as a challenge, go ahead and create the component yourself. This component is almost the same as the
Webiny's Community is a welcoming one for any questions you might have :) Join us here: https://www.webiny.com/slack
Yay 🎉, You achieved to create the pages you need for your Portfolio website.
We will create another file that will manage the pages for routes, create an
index.tsx file in the
pages folder. The file is self-explanatory as you go through it:
2.4 Fetching Content Models - Apollo Client
Now that we have all the dependencies we need let's initialize an
ApolloClient instance. In the
src folder create an
apolloClient folder, and inside this folder create an
Go through the code snippet below, and follow the comments to understand the connection parts.
Now that we have the
Apollo Client set up. We will write queries to read our content models' data. Go ahead and create a file in the
apolloClient name it
There is one more thing that we need to set up, so all of these changes can work together. As you may already notice, we didn't connect the pages to the React Router.
Let's go at the
App.tsx file where we imported the
Navigation Component in the beginning.
App.tsx file by following the changes below:
The new changes are based on different routes we provide in the array in the
Switch component. Then we call the
MyPages component that holds all the pages we created.
Let's see what happened in our Portfolio website.
To be able to show the blogs and projects, we need to do some small adjustments.
Let's open the
index.tsx file in the
src folder. To make the Apollo Client work, we need to connect it to React with the
index.js, let's wrap our React app with an
ApolloProvider. Beside the Apollo Client, in this file, we will connect our React app with the Material-UI theme that we created earlier.
Let's see the changes regarding the theme we provided:
Now the colors have been changed 😊
On the root of your front-end project, create a
.env file. This file will hold the API and the access token we will use to query our content models. Refresh the information by visiting the
Access Token section.
Let's test it now 🚀
Yay 🎉, you created a Portfolio Website with React, Webiny, and Apollo.
2.7 Front-end Deployment
One more detail on the completion of the Portfolio is having the project online to share with potential employees, recruiters, or friends. 😊
- Sign up at https://vercel.com
- Install the Vercel CLI
- Run 'vercel' in the project directory
Once you sign up, now we go back to our frontend project. Navigate to your frontend project directory.
Run the following command:
This command will install the vercel CLI into your local machine.
Next, we will sign in into Vercel through the CLI. Run the command:
As soon as you run this command, you will enter your email address, that is associated with the account provider you used to sign in into Vercel.
After this step, you will receive a confirmation email to your email address from Vercel. You will need to confirm your email, so you can continue with other steps.
The confirmation email will look like below.
This confirmation will login you into the Vercel.
Go back to your terminal, and see if everything is resolved regarding the login.
Next, run this command:
By running the command, you will get different questions, you can leave all the default answers and hit enter. After around 30 seconds, you will get a link which is accessible online, and that is your project 🎉
When making changes to your application, you can run:
to re-deploy for the latest changes.
🎉🎉 Congratulations! You've built a Portfolio website with the coolest tech stack!
You learned Webiny Headless CMS; now you are one command away from creating different Webiny Projects. You set up your React Portfolio website using Material-UI, one of the best UI frameworks out there. You connected the Apollo Client with your React application to query your content models data from the Headless CMS.
Are you interested to build more serverless applications? Webiny provides you with tools on building websites, apps and APIs that scale to millions of users and run on top of serverless infrastructure like AWS Lambda.
Webiny has a very welcoming Community! If you have any questions, join us here