{"id":2369,"date":"2022-01-26T13:10:35","date_gmt":"2022-01-26T13:10:35","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2369"},"modified":"2022-01-26T13:10:35","modified_gmt":"2022-01-26T13:10:35","slug":"cloudflare-pages-tutorial-deploying-a-react-app-via-github","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2369","title":{"rendered":"Cloudflare Pages tutorial: Deploying a React app via GitHub"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

React is an ultra-popular frontend library for building user interfaces. As the output is HTML, CSS, and JavaScript, it can be hosted on multiple services<\/a> like Github pages or Netlify, to name a few.<\/p>\n\n\n\n\n\n\n\n

Recently, Cloudflare Pages has become generally available<\/a>, which makes it another great service on which to host your React app. Cloudflare Pages is secure, fast, and highly scalable.<\/p>\n\n\n\n

In this step-by-step tutorial, we will host a demo React app setup on Cloudflare Pages. Let\u2019s get going.<\/p>\n\n\n\n

Why Cloudflare Pages?<\/h2>\n\n\n\n

Of course, React (or any other static output) can be hosted on at least half a dozen services for free. Why should we go for Cloudflare Pages?<\/p>\n\n\n\n

In addition to the regular features like preview deployments and Github integration, Cloudflare Pages has custom domains, redirects, and unlimited bandwidth, all for free. All of these features at zero dollars a month, and we get a fast network, security with free SSL, and amazing scalability.<\/p>\n\n\n\n

\"Screenshot<\/figure><\/div>\n\n\n\n

Prerequisites<\/h2>\n\n\n\n

Before we jump into the code below, here are some prerequisites:<\/p>\n\n\n\n

  1. Previous knowledge of JavaScript and React<\/li>
  2. Previous knowledge of npm and npx<\/li>
  3. Node.js and npm\/yarn working on your environment of choice<\/li>
  4. Previous knowledge of Git, and a working Github account<\/li>
  5. A Cloudflare account, for which you can sign up<\/a> for free<\/li><\/ol>\n\n\n\n

    Time to get cracking.<\/p>\n\n\n\n

    Set up a React app with Create React App<\/h2>\n\n\n\n

    As the first step of this guide, we will set up React with Create React App<\/a> (CRA). If you don\u2019t have CRA installed you can do so with npm install -g create-react-app<\/code>. To initiate a React app boilerplate with CRA we will execute the following command:<\/p>\n\n\n\n

    bash\nnpx create-react-app react-cloudflare-pages<\/pre>\n\n\n\n
    This will set up the whole React boilerplate for us. As soon as it runs, we will see an output like the one below:<\/a><\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    It will take a couple of minutes to download and set up the React boilerplate and finish up with the output as follows:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    As instructed in the image above, to check if our React app is working we can run:<\/p>\n\n\n\n
    bash\ncd react-cloudflare-pages\nyarn start<\/pre>\n\n\n\n
    It will run the development server, and you can runhttps:\/\/localhost:3000<\/a><\/code> in your default browser to show an output like so:<\/p>\n\n\n\n
    \"Default<\/figure><\/div>\n\n\n\n
    Congrats! Our React boilerplate with CRA is working.<\/p>\n\n\n\n
    Next up, we will push this basic code to Github and later change it to get a list of users from a mock API, and show some of its fields.<\/p>\n\n\n\n
    Push the boilerplate code to Github<\/h2>\n\n\n\n
    To push our basic React boilerplate, we will create a new Github repository as follows:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    It is ok to keep it public and empty. Scroll to the bottom of the page and click the Create Repository<\/strong> button. We will see a page similar to the below:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    Next, copy the SSH URL to the Github repository, which in my case was git@github.com:geshan\/react-cloudflare-pages.git<\/code>, and add it as a remote running the following command in our project root to push the code:<\/p>\n\n\n\n
    bash\ngit remote add origin git@github.com:geshan\/react-cloudflare-pages.git\ngit push origin master<\/pre>\n\n\n\n
    It will look something like the following:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    Consequently, we will update the code to call the mock API and list some of the user details. If you want, you can create a new Git branch to do the following changes, but I will leave that up to you.<\/p>\n\n\n\n
    Update the boilerplate to call a mock API<\/h2>\n\n\n\n
    Our React boilerplate is up and running, and it has been pushed to GitHub too. Now, we will change the code to call a mock list of 10 users and show some fields in our React app.<\/p>\n\n\n\n
    To do this we will change the src\/App.js<\/code> to look like this below:<\/p>\n\n\n\n
    js\nimport {Component} from 'react';\nimport Users from '.\/components\/users';\n\nclass App extends Component {\n  state = {\n    users: []\n  };\n\n  componentDidMount() {\n    fetch('https:\/\/jsonplaceholder.typicode.com\/users')\n      .then(res => res.json())\n      .then((data) => {\n        this.setState({ users: data })\n      })\n      .catch(console.log)\n  }\n\n  render() {\n    return (\n      <Users users={this.state.users} \/>\n    )\n  }\n}\n\nexport default App;<\/pre>\n\n\n\n
    Note that we have removed the unnecessary CSS file and logo.<\/p>\n\n\n\n
    Time to dive a bit deeper into what the code is doing. First, we are importing Component<\/code> from React, then importing another component called users<\/code>, which we will write next.<\/p>\n\n\n\n
    Then in the App<\/code> class that extends the React component, we are introducing a state with the users<\/code> array. When the component mounts, we fetch a list of 10 users from our mock API \u2013 http:\/\/jsonplaceholder.typicode.com\/users<\/a><\/code> \u2013 and set it in the users<\/code> of the state<\/code>. In case of an error, we log it.<\/p>\n\n\n\n
    For the final step in the main App<\/code> component, we render the Users<\/code> component which we will write up next.<\/p>\n\n\n\n
    As we use the users<\/code> component above, we will create a new file src\/components\/users.js<\/code> that will contain the following:<\/p>\n\n\n\n
    js\nconst Users = ({ users }) => {\n  return (\n    <div className=\"users\">\n      <center><h1>Application Users<\/h1><\/center>\n      {Array.isArray(users) && users.map((user) => (\n        <div className=\"user\" key={user.id}>\n          <div className=\"user-details\">\n            <h2 className=\"user-name\">{user.name}<\/h2>\n            <h3 className=\"user-email\">{user.email}<\/h3>\n            <h4 className=\"user-company\">Company: {user.company.name}<\/h4>\n            <hr\/>\n          <\/div>\n        <\/div>\n      ))}\n    <\/div>\n  )\n};\n\nexport default Users<\/pre>\n\n\n\n
    Let\u2019s look at how this file works. It is a very simple component that relies on the users being passed in as an array. We check if it is an array and loop through the users. Then we print out the user\u2019s name, email, and user\u2019s company name.<\/p>\n\n\n\n
    If we want, we can delete the unnecessary files after this change with the following command:<\/p>\n\n\n\n
    bash\nrm -rf src\/App.css src\/logo.svg src\/App.test.js<\/pre>\n\n\n\n
    After that we can run yarn start<\/code> and see the following output:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    Hurray! The mock API is being called properly and we see the user\u2019s name, email, and company name rendering correctly. After this, we will push our code change to GitHub and wire it up with Cloudflare Pages. If you want to look at what files have changed you can have a look at this pull request<\/a>.<\/p>\n\n\n\n
    Push the app to Github<\/h2>\n\n\n\n
    To push our changes to the master branch we will run the following commands on the project root:<\/p>\n\n\n\n
    bash\ngit add .\ngit add -u #because we have deleted files\ngit commit -m \"Call the mock users API\"\ngit push origin master # if you are in a different branch push that and open a PR<\/pre>\n\n\n\n
    After the push, you should see the changes reflected in your Github repository as well. Now it\u2019s time to get a Cloudflare Pages URL for our React app.<\/p>\n\n\n\n
    Log in to Cloudflare Pages<\/h2>\n\n\n\n
    To connect your React app with Cloudflare pages, create a Cloudflare account if you haven\u2019t done so already. Then, log in to Cloudflare and click Pages<\/strong> on the right:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    We will see a page similar to below:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    Click on Connect Github account<\/strong>. We will be redirected to Github where we can configure the accounts and repositories we want CloudFlare to access:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    Click on the account into which you pushed the above React app (it will probably be your personal account) and choose the right repository to connect to:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    It is better to give access to the required repository only. After giving access we will be redirected to Cloudflare Pages where were can deploy the React app, select the repository, and click Begin Setup<\/strong> as below:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    Next, we will configure the main branch as master:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    Scroll below on that page to configure the build settings as follows:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    I had to update npm build<\/code> with yarn build<\/code> in the build command field because CRA uses yarn in place of npm.<\/p>\n\n\n\n
    Then click Save and Deploy<\/strong>. If all goes well, the project will be created and start to deploy as seen below:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    After a couple of minutes, the build should be done, and if we click the title of the project react-cloudflare-pages<\/strong> we will see a page like below:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    If we click the link below Deployment,<\/strong> which is a pages.dev<\/code> URL, we should be able to see our React app deployed on Cloudflare Pages as follows:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    As seen above, it is an HTTPS Cloudflare Pages URL on pages.dev<\/code>.<\/p>\n\n\n\n
    Preview deployment in action<\/h2>\n\n\n\n
    For us to see how previewing deployment works, I am going to change the Company<\/code> label to Company Name<\/code> on line 10 of src\/components\/users.js<\/code>.<\/p>\n\n\n\n
    We will push it in a branch called preview-deployment<\/code>, which will give us a preview on Github when we open a pull request. After it is built successfully on Cloudflare Pages, it will give us a unique link to the changes as a comment, which can be seen here:<\/p>\n\n\n\n
    \"Screenshot<\/figure><\/div>\n\n\n\n
    This is a very neat feature to see the changes on a fully functioning URL.<\/p>\n\n\n\n
    Next steps<\/h2>\n\n\n\n
    We can easily configure a custom domain for our React app on Cloudflare Pages, which is free as well. In addition, redirects<\/a> and access control<\/a> for the preview deployments can also be configured. I will leave it up to you to explore them.<\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    As we have seen in this step-by-step tutorial, Cloudflare Pages is easy to set up for your React app or any other frontend framework. There is no need to configure a build process on something like Github actions or another CI system.<\/p>\n\n\n\n
    Connect your Github repo with Cloudflare Pages, and use the build command once as each pull request automatically gets a preview deployment URL. Exploit the power of Cloudflare Pages for free and make your websites fly.<\/p>\n\n\n\n
    Full visibility into production React apps<\/h2>\n\n\n\n
    Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you\u2019re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket<\/a>. <\/a><\/a><\/p>\n\n\n\n
    LogRocket<\/a> is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting with metrics like client CPU load, client memory usage, and more.<\/p>\n\n\n\n
    The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.<\/p>\n\n\n\n
    Modernize how you debug your React apps \u2014 start monitoring for free<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Introduction React is an ultra-popular frontend library for building user interfaces. As the output is HTML, CSS, and JavaScript, it can be hosted on multiple services like Github pages or Netlify, to name a few.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[196],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2369"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2369"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2369\/revisions"}],"predecessor-version":[{"id":2370,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2369\/revisions\/2370"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}