Getting Started with the Books Template!
Tags: takeshape, react, netlify, graphql
Published: 2019-08-14 22:41:53

###Let’s take a look at using TakeShape to create a [webpage for your books](https://shape-books.takeshapesampleproject.com/) in a few quick steps. This template can be used to showcase anything you’d like, from recipes 🍲 to movie reviews 🎥 to pictures of your adorable pupper 🐶.###

1. Signup for an account at app.takeshape.io/signup. With TakeShape’s G-Suite integration, this process can be easy as 2 clicks.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tp277dd3qfnsulu2adao.png)

2. There are many templates to help you out with the design of the webpage, and we’ll get to all of them soon. For this example, let’s click on “Shape Books.” Then we can name our project, and click “Create Project.”
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/p9hpdfn9mcl4g897ltdi.png)

3. If we head to the navigation bar on the left, we can click on “Posts” and explore the book posts already integrated with the template. You can also add more posts by clicking “New Post” in the top right.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/s938n0ok4fdivo12qfqm.png)

4. We can also explore the pictures, videos, and other assets by clicking on the “Asset Library” at the top of the navigation bar. We can upload more assets by simply dragging from the desktop, or clicking “Upload” in the top right.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gi989y6mat0z4pgti1u9.png)

5. We have a good looking site, so let’s let the world see it. TakeShape can deploy your site to Amazon S3, Google Cloud Storage, FTP, and Netlify. For this example, we will deploy to [Netlify](https://www.netlify.com/) using one-click integration. Let’s navigate to the drop-down at your project name in the top left → “Static Site” → “New Static Site” in the top right. Here we can link our TakeShape project to Netlify.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9ddxq0gfef0h3i0vkz0n.png)

6. Here’s what it looks like when linked to Netlify.
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ijhy9uirzxqi4u72hxpm.png)

7. Now let’s hit “Save” and Publish!
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ombcqe6564xigpclcxhq.png)

8. Check out your awesome Site!
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/x1royz2x0n7xozm6ode6.png)

9. Now that the template is up and running, it’s time to customize. Let’s clone the Github repository so we can personalize it!
    ```
    git clone https://github.com/takeshape/takeshape-samples.git takeshape-samples && cd takeshape-samples/shape-books
    ```


10. To install all dependencies, lets run `npm install`. Double check your Node version `node -v` and make sure you are using `v10.16.2`.



11. Run `npx tsg init` and follow the command prompts to set up communication between your local environment and TakeShape.



12. Run `npm start` to start the server. It will run on http://localhost:5000 by default.



13. Now we can make plenty of customizations to make use of this template. I want to add the name of who recommends each book. We can easily mockup how this will look in the `book.html` file. The changes can be seen in the local site immediately!
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ts2e9uzmzuog1y2b8h0s.png)

14. Run npx tsg deploy  to deploy your changes to the site hosted on Netlify.



15. Navigate to the website and check out your updates live!
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fd0ldmn9ne0ssgz9h04i.png)

In these few steps, we got a TakeShape website up 🆙and running 🏃‍♀️and we made changes that can be viewed live on the site. From here, the possibilities are endless ♾. We’d love to see the websites you all create from this template! 🤩