{"id":1575,"date":"2021-03-30T11:35:09","date_gmt":"2021-03-30T11:35:09","guid":{"rendered":"https:\/\/www.toponecrm.com\/blog\/?p=1575"},"modified":"2021-03-30T12:07:48","modified_gmt":"2021-03-30T12:07:48","slug":"connecting-frontend-to-backend","status":"publish","type":"post","link":"https:\/\/toponecrm.com\/blog\/uncategorized\/connecting-frontend-to-backend\/","title":{"rendered":"How to Connect frontend to the backend?"},"content":{"rendered":"\n

Objectives<\/span><\/strong><\/h2>\n\n\n\n

What this blog will cover:<\/strong><\/p>\n\n\n\n

In this blog, I\u2019ll walk you through the process of connecting your simple React app to a simple Node\/Express API that we will create.<\/p>\n\n\n\n

The objective here is to give you a practical guide on how to set up and connect the <\/span>front-end client<\/span><\/strong> and the <\/strong>back-end API<\/strong>.<\/span><\/p>\n\n\n\n

Step 1: Create a React <\/span>App<\/strong><\/p>\n\n\n\n

This process is really straightforward.<\/p>\n\n\n\n

I will be using create-react-app<\/a> to easily create a react app named client<\/strong>:<\/p>\n\n\n\n

\n
$ npx create-react-app client\n$ cd client\n$ npm install\n$ npm start<\/pre>\n\n\n\n
The commands above are simple, the first line uses node to create the React <\/span>application, second moves us into the newly created directory called client which is our app. Finally, we start running the application to run it on our localhost (default localhost:3000)<\/em>.<\/p>\n\n\n\n
Step 2: Create a Express <\/span>App<\/strong><\/p>\n\n\n\n
I will be using the Express<\/strong>JS <\/span>to quickly create an application skeleton and name it exp<\/strong>:<\/p>\n<\/div><\/div>\n\n\n\n
\n
$ mkdir exp\n$ cd exp<\/pre>\n<\/div><\/div>\n\n\n\n
create a directory to hold your application, and make that your working directory.<\/p>\n\n\n\n
\n
$ npm init<\/pre>\n<\/div><\/div>\n\n\n\n
This command prompts you for a number of things, such as the name and version of your application. For now, you can simply hit RETURN to accept the defaults for most of them, with the following exception:<\/p>\n\n\n\n
\n
$ npm install express --save<\/pre>\n<\/div><\/div>\n\n\n\n
Now install Express in the exp<\/code> <\/strong>directory and save it in the dependencies list.<\/p>\n\n\n\n
Step 3: Setting up simple backend server<\/strong><\/p>\n\n\n\n
\n
const express = require('express') \nconst app = express() \nconst port = 8080 \n\napp.get('\/', (req, res) => {   res.send('Hello World!') }) \n\napp.listen(port, () => {   \nconsole.log(`Example app listening at http:\/\/localhost:${port}`) })<\/pre>\n<\/div><\/div>\n\n\n\n
After completing step 3 within the integrated terminal we can run node index.js to deploy our backend server locally.<\/p>\n\n\n\n
Once you have a simple backend server we can go back to the React<\/span> application and edit the package.json<\/span> file. In that file, we need to add “proxy”: http:\/\/localhost:8080″<\/strong><\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
The two applications can now talk to each other. Depending on what you want to do we can specify get<\/em> and post <\/em>functions in our backend and link it to our front end using Axios<\/span><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Objectives What this blog will cover: In this blog, I\u2019ll walk you through the process of connecting your simple React app to a simple Node\/Express API that we will create. The objective here is to give you a practical guide on how to set up and connect the front-end client and the back-end API. Step 1: Create a … <\/p>\n
Continue reading “How to Connect frontend to the backend?”<\/span><\/a><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":[],"_tribe_ticket_has_attendee_info_fields":false},"categories":[98,100,1,103,104],"tags":[109,108,110],"ticketed":false,"_links":{"self":[{"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/posts\/1575"}],"collection":[{"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/comments?post=1575"}],"version-history":[{"count":3,"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/posts\/1575\/revisions"}],"predecessor-version":[{"id":1579,"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/posts\/1575\/revisions\/1579"}],"wp:attachment":[{"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/media?parent=1575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/categories?post=1575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toponecrm.com\/blog\/wp-json\/wp\/v2\/tags?post=1575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}