import React from "react";
import ReactDOM from "react-dom";
import { createClient } from "contentful";
import "./styles.css";

// create the SDK client with the needed credentials
// which you can get in the web app
const client = createClient({
  space: "...",
  accessToken: "..."
});

function Portfolio() { /* … */ }

class App extends React.Component {
  constructor() {
    super();
    this.state = { isLoading: true, portfolio: null };
    // fetch the entry of your portfolio entry type
    client
      .getEntries({
        content_type: "portfolio"
      })
      .then(({ items }) => {
        this.setState({ isLoading: false, portfolio: items[0] });
      });
  }

render() {
    return this.state.isLoading ? (
      <div>Loading</div>
    ) : (
      <div className="App">
        <Portfolio {...this.state.portfolio.fields} />
      </div>
    );
  }
}
~~~{% endraw %}

[When you look at the code above](https://codesandbox.io/s/5wxvp413zl), one of my favorite things is that you can connect content entries with your frontend component quite easily ({% raw %}`<Portfolio {...this.state.portfolio.fields} />`).  This connection makes Contentful [a perfect fit for component-driven applications and sites](https://www.contentful.com/blog/2017/10/11/love-letter-to-component-ready-cms/?utm_campaign=deploy-cloud-codesandbox&utm_medium=referral&utm_source=devto&utm_content=deploy-cloud-codesandbox&utm_term=).

### Netlify – the few-clicks static deployment tool
Now, you have the code editable and connected to Github in CodeSandbox, and you can edit the content that powers the application via Contentful. The last step is to deploy this application somewhere. 

[Netlify](https://www.netlify.com/) is a relatively new service out there that specializes in static deployments. The cool thing about Netlify is that they also allow you to define build scripts - they’re your CI service and host, so to say. 

To deploy a site to Netlify you can start by importing a specific GitHub repository:

![Deploy a site by importing a specific GitHub repository](//images.ctfassets.net/fo9twyrwpveg/5k48xcI4xO8KcYmwEwqMYc/5008a772edae369b530bc6b30965929b/image_6.png)

Your next steps are to define a build command and public directory in which the static files will be present. In the case of *create-react-app*, the build command is {% raw %}`npm run build`{% endraw %} and the published directory will be {% raw %}`build`{% endraw %}. After submitting these two configurations, your first deploy will get up and running, and you’ll get a unique subdomain on netlify.com. 

One less obvious thing after importing a GitHub repository in Netlify is that this process also defines webhooks on GitHub. Now every time you push new code to GitHub, Netlify will automatically redeploy your site. Magic? Magic!

![Webhooks to automatically redeploy your site](//images.ctfassets.net/fo9twyrwpveg/JrUjqEneesI2S8YgomK6O/d5cd2a5d6f77ec80b542a66782c2096b/image_7.png)

### Usage of webhooks to connect all the pieces

For this portfolio demo site, there is no additional webhook configuration needed because the React application fetches that data right from the browser. Client-side only applications have the significant downside that they show a loading spinner initially until they fetched all needed API data though. A more performant way to do it is to statically pre-render React on the server and then do something that is called [hydration](https://reactjs.org/docs/react-dom.html#hydrate) when the client-side React code kicks in.

The static pre-render approach means that you would have to rerender the generated HTML files and deploy them whenever your friend updates her portfolio data in Contentful, too. An additional webhook notifying Netlify has to be configured in Contentful in that case.

![image 8](//images.ctfassets.net/fo9twyrwpveg/jPkoNvQOEoW4Ae286OG20/1c285c2794cc523aea5edcef70eefb6b/image_8.jpg)

With a little bit more of webhook configuration, you can then set up a complete deployment pipeline without any local installation and configuration shipping static sites without loading spinners.

### Use the power of web services to not reinvent the wheel

In conclusion, I’m amazed how much the web development field has changed. [Serverless technologies change the way we work](https://www.contentful.com/blog/2018/04/05/graphql-and-serverless-where-cloud-computing-is-heading/?utm_campaign=deploy-cloud-codesandbox&utm_medium=referral&utm_source=devto&utm_content=deploy-cloud-codesandbox&utm_term=) and we no longer have to worry about all the tiny pieces that might be needed in a project. For running Node.js projects we can use [Zeit](https://zeit.co/), for authentication [Auth0](https://auth0.com/), and for a performant search experience [Algolia](https://www.algolia.com/).

![The power of different web services as building blocks for your site](//images.ctfassets.net/fo9twyrwpveg/qWbrjftQbuSsq64Q6wq62/354b97dfc1c04876db1907283427c896/image_9.png)

Webhooks and serverless functions give me the possibility to connect all these services and write quick connectors in the cloud in an easy and speedy manner. That’s very exciting because I can now focus on building things rather than setting things up and... **I can even create and deploy websites on my friend's computer while we’re sitting on his balcony.**