![]() That means that any front-end application that is not hosted on the same domain as the back-end server will need to go through extra validation. Cross-Origin Resource Sharing (CORS)ĬORS is a security feature that all browsers implement to ensure access control for cross-origin requests. We will need to refactor some of the HTTP request code to handle OAuth tokens. This will allow our decoupled React application to do things like POST, PATCH, and DELETE content in Drupal. On the Drupal side, we'll install and configure the Simple OAuth module to allow for making authenticated requests to the JSON:API module. We will use the create-react-app application to scaffold a new project, then port our existing code into that framework. This tutorial will cover how to set up build tools to compile a React application and allow for development processes that more closely match what JavaScript developers are used to. Your browser does not support HTML5 video. With a decoupled application and a working build tool, you can load libraries into components when you need them, and your entire application will be self-contained. With a progressively decoupled application, you might be able to add some JavaScript libraries to your page in the HTML headers, but this can get cumbersome. When you set up a build tool, you can import packages into React from npm. You can also leverage third-party packages. You can break up your React code into files for each component, and use that to organize your application in a sensible way. You can use a variety of CSS preprocessing tools. You can use linting tools with your code editor to write cleaner code. You can code with hot-reloading, where your JavaScript will update automatically in the browser whenever you save the file. When you introduce a build tool to your React code, you get developer experience benefits. This can go a long way towards helping find useful documentation, or even getting help from others, when working on your code base. The primary benefit, as far as writing code goes, is that it's much easier to follow best practices established by the React community. Benefits of a decoupled React application ![]() ![]() This opens doors to all kinds of possibilities. In fact, you can use this same approach with any decoupled application that needs to communicate via HTTP with Drupal. You can use this same approach with any JavaScript front-end framework - it's not specific to React. The downside is we'll have to write a bunch of code to handle something the browser had been doing for us automatically. ![]() Our code will also work in other contexts, for example, a React Native app where the code isn't executed inside a browser. With OAuth, we're no longer dependent on the browser's somewhat opaque handling of cookies for authentication. To do this we'll want to start using OAuth to handle authentication and authorization. For a fully decoupled application, we'll have to handle authentication ourselves. If you are logged into Drupal, you are also logged into our React app. Our previous code relied on the fact that it was running inside the scope of an existing Drupal theme or module, and could make use of existing cookie and session handling for authentication. Most of these things are primarily related to authentication. This allowed us to side-step some things that we'll now have to account for in our code. We connected to Drupal's JSON:API and used the same-origin option with fetch() to send the user's Drupal session cookie and authenticate API requests. This means we embedded the React application inside Drupal. In the previous tutorial, we built a "progressively decoupled" React application. You can find the complete example code for this application in the Git repository. If you're just starting from here, you'll want to make sure you grab that example code as a starting point. The remaining tutorials build on the code for the progressively decoupled React application created in the previous tutorials. Understand the modifications needed to build a stand-alone version of our React application. Provide an example of what the final project will look likeīy the end of this tutorial you should have a better understanding of what we're trying to create in the rest of this series.Introduce differences we need to account for in a fully decoupled application.In the next few tutorials we'll look at how to create a fully decoupled React application whose only interactions with Drupal happen via API requests. Now that we know how to build a working application in React and embed the application in Drupal, let's make a stand-alone version of our application which can be used outside of the context of a Drupal module or theme.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |