Build A Blog Site With React, Redux Firebase And MaterializeCSS (Part 13)

<h1>Repository <h4>React <p dir="auto"><span><a href="https://github.com/facebook/react" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/facebook/react <h4>Material-ui <p dir="auto"><span><a href="https://github.com/mui-org/material-ui" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/mui-org/material-ui <h4>My Github Address <p dir="auto"><span><a href="https://github.com/pckurdu" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu <h4>This Project Github Address <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-13" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-13 <h1>What Will I Learn? <ul> <li>You will learn how to write firestore security codes. <li>You will learn to setup the cloud function and hosting in the application. <li>You will learn how to create a cloud function. <li>You will learn https functions in cloud function. <li>You will learn onRequest() function in cloud function. <li>You will learn send method in cloud function <h1>Requirements <ul> <li>text editor (I used visual studio code editor) <li>Basic javascript information <li>Basic react information <h1>Difficulty <ul> <li>Basic <h1>Tutorial Contents <p dir="auto">In this tutorial we will learn how to do security rules in firestore and see how to create cloud function in application. You will be able to see how to install cloud functions and how to create the first cloud function. <p dir="auto">You can view the topics in the following sections: <ul> <li>Firebase-Firestore Security Rules <li>Setting The App For Cloud Function <li>Create The First Cloud Function <p dir="auto">Let’s start and enjoy <h3>1- Firebase-Firestore Security Rules <p dir="auto">In this section we will learn how to define security rules on firestore. <p dir="auto">We have created the database in test mode while activating firestore on firebase. This process is not a secure process and anyone who knows the address of our database can perform read and write operations in the database. In order not to be exposed to external attacks, we must establish security rules in firestore. <p dir="auto">To change the security rules, we must go to the firestore section in the firebase and open the Rules tab. We can add rules to firestore with this tab.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmYXuGQL6oVPabt2rM45djxnZPDxgirbusLeAZsLRsPvxX/react1.gif" alt="react1.gif" /><br /> <br /> <pre><code>{ //all document match /{document=**} { allow read, write;// read and write authority } <p dir="auto"><br /><br /> When the firestore is created with the test mode, all documents in the firestore are authorized to read and write on all users. We added users and projects colections to firestore. We must define the safety rule in these two collections so that only the authorized users can access the documents in the collection. <p dir="auto">Let's start with the <code>projects collection. <p dir="auto">We require only authorized users to access each project document within the projects collection. We can check the user's request with <code>request.auth. If <code>request.auth.uid is present the user is authenticate and can read and write in project documents. Then we can give the user the ability to read and write very easily. <pre><code>match /projects/{project}{ allow read,write: if request.auth.uid!=null } <p dir="auto"><br /><br /> The picture below will help you to write the code above correctly.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmUMca1TKv5fd69y8ugiHdVnhvMvdPjiWnockC7N7fhgwi/react1.png" alt="react1.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmUMca1TKv5fd69y8ugiHdVnhvMvdPjiWnockC7N7fhgwi/react1.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmUMca1TKv5fd69y8ugiHdVnhvMvdPjiWnockC7N7fhgwi/react1.png 2x" /><br /> <br /><br /> Thus we only authorize users to log on read and write project documents on firestore. <p dir="auto">Let's give permission to create permission in the <code>users collection, we will give read permission only to users who login and we will give the write permission only the specific user. <p dir="auto">We must use the userId parameter when matching in the collection to create a specific user. <pre><code>match /users/{userId}{ allow create allow read: if request.auth.uid!=null allow write: if request.auth.uid==userId } <p dir="auto"><br /><br /> Again the picture below will help you to write the code above correctly.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmX1UD8XMTq5DGsayK11WTUYjJccHV1BQv2qKjpesmSJkG/react2.png" alt="react2.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmX1UD8XMTq5DGsayK11WTUYjJccHV1BQv2qKjpesmSJkG/react2.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmX1UD8XMTq5DGsayK11WTUYjJccHV1BQv2qKjpesmSJkG/react2.png 2x" /><br /> <br /><br /> So we made the firestore safer. In order for the security rules we write to work properly, we must delete the read and write permissions on all documents and publish the changes we make. If we do not publish the changes we make, the rules will not work.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmTa9LsNrCoVrQt8FMrRBjvQH5HrCnVsMB9zitUTuMSyMH/react2.gif" alt="react2.gif" /><br /> <br /> <h3>2- Setting The App For Cloud Function <p dir="auto">Now that we have defined the firestore security rules, we can now create a cloud function for the notification. <p dir="auto">In this section we will learn how to setup the cloud functions. Let's start with what cloud functions do. <p dir="auto">With its cloud functions structure, firebase allows us to create a trigger in a cloud environment. In other words, we are producing functions in internet environment and these functions can work in internet environment. <p dir="auto">We need <code>firebase-tools packages to install cloud functions. So that we can open the project we created in our own terminal, and functions,hosting etc. can be done with the terminal. <pre><code>npm install -g firebase-tools <p dir="auto"><br /><br /> After installing firebase-tools globally, we have to login to firebase so we can choose the firebase project where we will create cloud functions. <pre><code>firebase login <p dir="auto"><br /><br /> After writing this code, firebase will open a screen where you can login. After typing the user name and password, you are logged in. <p dir="auto">We can start the installation with <code>firebase init code. <p dir="auto">We must say yes to the first question because we are ready to move forward. <p dir="auto">In the second question we are asked to choose which features of firebase to use. We will use them for functions and hosting.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmVrJTAj2JxfUXSSHvB9YnNNRwgryqeXTp5My7uhK3yKsV/react3.png" alt="react3.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmVrJTAj2JxfUXSSHvB9YnNNRwgryqeXTp5My7uhK3yKsV/react3.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmVrJTAj2JxfUXSSHvB9YnNNRwgryqeXTp5My7uhK3yKsV/react3.png 2x" /><br /> <br /><br /> In the third question, we are asked which project to use. We choose <code>react-redux-firebase-49b2f because our project is it.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQf9k7hZ4BLmiP66jTYPsDbeuuYvMto9V6msmvCg4QUKi/react4.png" alt="react4.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQf9k7hZ4BLmiP66jTYPsDbeuuYvMto9V6msmvCg4QUKi/react4.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmQf9k7hZ4BLmiP66jTYPsDbeuuYvMto9V6msmvCg4QUKi/react4.png 2x" /><br /> <br /><br /> If we want we can create a new project here. <p dir="auto">In the fourth question, we are asked to choose the software language we will use. Since we developed the application with <code>react, we should select the <code>JavaScript language.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmc7rJeLBi1ipbMoSQSUrhQn6tn4drJ33QZh449HnETAtY/react5.png" alt="react5.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmc7rJeLBi1ipbMoSQSUrhQn6tn4drJ33QZh449HnETAtY/react5.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmc7rJeLBi1ipbMoSQSUrhQn6tn4drJ33QZh449HnETAtY/react5.png 2x" /><br /> <br /><br /> The fifth question is whether we want to use <code>ESLint. In applicaiton we will not use ESLint so let's answer no this question. <p dir="auto">With the sixth question asks whether we want npm dependencies.Let’s say yes. <p dir="auto">After answering this question, we can proceed to the installation phase. <p dir="auto">After the functions are installed in our application, we will be asked to set the project home directory in the hosting process. Since we will use the dist folder as our general directory, let's answer the question <code>dist and we configure as <code>single page configuration.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmWHaBxgjwR55QAJEsfkm23aoUC1hsvgyHNCt4VAz48cJa/react6.png" alt="react6.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmWHaBxgjwR55QAJEsfkm23aoUC1hsvgyHNCt4VAz48cJa/react6.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmWHaBxgjwR55QAJEsfkm23aoUC1hsvgyHNCt4VAz48cJa/react6.png 2x" /><br /> <br /><br /> So we have also implemented the hosting installation. We created the files that are necessary for functions and hosting between our application's folders.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmVRsXn4vWMFiLKnggK3WGjqPgYM3C6qNFrEtaiyrqvZcL/react7.png" alt="react7.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmVRsXn4vWMFiLKnggK3WGjqPgYM3C6qNFrEtaiyrqvZcL/react7.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmVRsXn4vWMFiLKnggK3WGjqPgYM3C6qNFrEtaiyrqvZcL/react7.png 2x" /><br /> <br /> <h3>3-Create The First Cloud Function <p dir="auto">In this section we will create the first cloud function and send it to the firebase for publication. <p dir="auto">In the previous section we have created the files that we will write cloud functions. We can write our code in the index.js file in the functions folder. <h4>In fuctions/index.js <pre><code>//Generate function with firebase-functions packages const functions = require('firebase-functions'); <p dir="auto"><br /><br /> We produce function object using <code>firebase-functions packages. <pre><code>//generate a function indicating a message exports.firstFunction = functions.https.onRequest((request, response) => { response.send("Hello steemit!"); }); <p dir="auto"><br /><br /> We must use the https object to generate a function that performs <code>https. With the <code>onRequest() function in the https object, we can perform the request-response operation and we can forward the message we want to forward with the <code>send() function. <p dir="auto">Now all we have to do is publish this function. <pre><code>firebase deploy --only functions <p dir="auto"><br /><br /> With the above code, we can only publish the functions we have created. This function will appear in the functions section of the firebase website. We can examine the results of this function in detail.<br /> <img src="https://images.hive.blog/0x0/https://cdn.steemitimages.com/DQmax9CWMSZWvgiTK1gFYqyBN8XnkP1mxY9BU1mnJCnxtov/react3.gif" alt="react3.gif" /><br /> <br /><br /> We can see the result of the function that is in a browser.<br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQpAyqL7yLm8KQo18FjzLL1byeVVHu8JVTCFkn2x172p6/react8-9.fw.png" alt="react8-9.fw.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmQpAyqL7yLm8KQo18FjzLL1byeVVHu8JVTCFkn2x172p6/react8-9.fw.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmQpAyqL7yLm8KQo18FjzLL1byeVVHu8JVTCFkn2x172p6/react8-9.fw.png 2x" /><br /> <br /> <h1>Curriculum <p dir="auto"><a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 1 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-2" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 2 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-3" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 3 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-4" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 4 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-5" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 5 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-6" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 6 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-7" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 7 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-8" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 8 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-9" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 9 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-10" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 10 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-11" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 11 - <a href="https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-12" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Part 12 <h1>Proof of Work Done <p dir="auto"><span><a href="https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-13" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-13