My Request URL points to my ReactJS server instead of NodeJS

Asked
Active3 hr before
Viewed126 times

7 Answers

reactjsnodejspointsserverrequest
90%

Create a project using create-react-app.,Add the following line to the package.json file created by create-react-app.,Create a package.json file inside the root directory (example-create-react-app-express) and copy the following contents:,This is a very common question among newer React developers, and one question I had when I was starting out with React and Node.js. In this short example I will show you how to make create-react-app work with Node.js and Express Back-end.

Create a project using create-react-app.

npx create - react - app example - create - react - app - express
load more v
88%

The HTTP protocol was created as a request/response protocol for client/server communication. It was the server’s responsibility to supply a resource corresponding to the requested URL; initially, most of the resources were static HTML files or, at best, images.,This attempt allowed us to discover a paradigm that gets us closer to the ultimate universal web application - the ability to convey to the server which data the specific set of routes that construct the request URL requires.,More importantly, implementing it would mean that you essentially rewrite your application presentation logic. On the server. Which negates one of the major reasons to have universal applications in the first place: a single, as DRY as possible, codebase.,Generally, depending on economics, frequency and character of application updates, the application app.js file referenced in index.hbs above is also a candidate to be put onto CDN, like any other static resource.

And so, they set to write more or less sophisticated variations of this:

#!/usr/local/bin/perl
print "Content-type: text/html\n\n";
print "<html>\n";
print "

<head>
   <title>Perl - Hello, world!</title>
</head>\n";
print "

<body>\n";
   print "<h1>Hello, world!</h1>\n";
   print "</body>\n";
print "

</html>\n";
load more v
72%

Open http://localhost:3001/api/greeting to test. You should see a JSON response with a "Hello World!" greeting. Try adding a query parameter called name to the URL and see what you get.,To run both the server and React application at the same time we need to add a couple more things to package.json.,Test that the server is running correctly by running the script:,nodemon - for automatically restarting the server when it changes

npm init react - app my - new - app
cd my - new - app
load more v
65%

The official website talks about why Next.js was introduced. Let us discuss the reasons in detail to get a perspective about Next.js.,There are two types of applications built with Node.js. The first one are utility applications which are used to enhance the performance of the main application. For example, hot-reload functionality is a utility function. While coding, the changes are made as we code along. The second type of applications built with Node.js are web servers that handle requests from other sites to provide software services.,Next.js offers react-fast-refresh, which is an enhanced version of React Hot Reloading provided by CRA. It makes the react app reloads very smooth and fast with changes in code. A react-native concept has been included in the Next.js framework., Next.js offers react-fast-refresh, which is an enhanced version of React Hot Reloading provided by CRA. It makes the react app reloads very smooth and fast with changes in code. A react-native concept has been included in the Next.js framework.

  1. We use create-react-app for building React applications with Node.js. On the contrary, create-next-app(CNA) is used for building applications with Next.js.
  2. Discussing the differences between the frameworks should begin with the directory structures. create-react-app(CRA) generates the following directory structure.
nodesampleproject├── README.md├── node_modules├── package.json├──.gitignore├── public│├── favicon.ico│├── index.html│├── logo192.png│├── logo512.png│├── manifest.json│└── robots.txt└── src├── App.css├── App.js├── App.test.js├── index.css├── index.js├── logo.svg└── serviceWorker.js
load more v
75%

The tutorial will use Okta’s OpenID Connect (OIDC) to handle authentication. On the frontend, the Okta React SDK will be used to request a token and provide it in requests to the server. On the backend, the Okta JWT Verifier will ensure that the user is properly authenticated, and throw an error otherwise.,Oct 22, 2020: Updated to use Okta React v3.0.8. You can see the changes in the example app or in this blog post. ,This also sets some headers to tell the backend that any body it sends will be in JSON format, and it sets the authorization header by fetching the access token from Okta.,If you get an error, setting it in the state will allow you to display it in the Snackbar.

const Form = () => (
  <form>
    <label>
      Name
      <input value="Arthur Dent" />
    </label>
    <label>
      Answer to life, the universe, and everything
      <input type="number" value={42} />
    </label>
  </form>
);

const App = () => (
  <main>
    <h1>Welcome, Hitchhiker!</h1>
    <Form />
  </main>
);
load more v
40%

Universal routing: how to recognize the view associated to the current route from both the server and the browser.,Universal data retrival: how to access data (typically through APIs) from both the server and the browser.,views: contains the template that we will use from the server to render the HTML content from the server.,The last case is when the route is not matched, and here we can simply return a 404 not found error to the browser.

We can do another quick test (if you are still not convinced) from the command line using curl:

curl - sS "https://judo-heroes.herokuapp.com/athlete/teddy-riner"
load more v
22%

Then, to handle this event on our React application, we could update our src/App.js as follows:,Once we have enabled CORS on the Node.js server, we should change the URL passed to the EventSource() constructor. So, let's open the ./src/App.js file on our React application and replace the line that defines this.eventSource with this:,In other words, to stop the event stream, we simply invoked the close() method of the eventSource object.,Your application is ready to authenticate with Auth0!

Now, in your JavaScript project, install the auth0-spa-js library like so:

npm install @auth0 / auth0 - spa - js
load more v

Other "reactjs-nodejs" queries related to "My Request URL points to my ReactJS server instead of NodeJS"