Bootcamp
Search…
8.1.1: Create React App Full Stack Setup
We will now setup the previous ecommerce full-stack React app in the new Create React App architecture.
As described before, we will be using 2 completely different repositories to hold the frontend and the backend of the app.
- 1.The React app is deployed/started. The Webpack build process is triggered. The resulting files are put into the
/distdirectory, or in development mode, held in the Webpack dev server memory. - 2.
- 3.The Create React App file server serves the HTML file and the React app JavaScript to the browser. The React app is initialized in the browser.
- 4.Clicking the "Get Items" button causes an AJAX request to be created inside the React app to: http://localhost:3004/items
- 5.The request is received at the Express.js server. The app looks in the database for all items and sends back a JSON response.
- 6.The JSON data is received and processed by the React app. React manipulates the DOM to show the list of items on screen.
Backend
Here is the example backend repo. Note this is the same repo as
base-mvc-bootcamp from the end of Module 4, except with CORS middleware (discussed below).Run the backend app:
1
git clone https://github.com/rocketacademy/cra-ecom-back-end-bootcamp.git
2
cd cra-ecom-back-end-bootcamp
3
npm install
4
npx sequelize db:create
5
npx sequelize db:migrate
6
npx sequelize db:seed:all
7
node index.mjs
Copied!
Frontend
Clone and run the frontend app:
1
git clone https://github.com/rocketacademy/cra-ecom-front-end-bootcamp.git
2
cd cra-ecom-front-end-bootcamp
3
npm start
Copied!
Note that in order to reach our backend app we reference an environment variable (prefixed with
REACT_APP_ for Create React App). We use environment variables to support different runtime environments, e.g. local backend vs production backend on Heroku. BACKEND_URL defaults to localhost:3004 for development purposes. Here is a link to the code.1
const BACKEND_URL =
2
process.env.REACT_APP_BACKEND_URL || "http://localhost:3004";
Copied!
When we make the AJAX request for the list of items we use
BACKEND_URL to construct a complete URL. Here is a link to the code.1
axios.get(`${BACKEND_URL}/items`)
Copied!
CORS
Introduction
When we deploy our app across multiple servers (frontend and backend), we will need to allow them to communicate with each other. To allow our frontend to communicate with our backend, we add Express CORS middleware as a dependency and use it in
index.mjs. Here is a link to the code.1
app.use(cors({
2
credentials: true,
3
origin: FRONTEND_URL
4
}));
Copied!
CORS is a security feature of modern browsers that disallows AJAX requests to a domain that is different from the originating domain. This is to prevent attackers from pretending to be a legit client and stealing data from our backend servers.
In our case, our requests originate from localhost:3000 and we want to request data from our backend server at localhost:3004. These are different "origins", thus our browsers will disallow these requests by default. To enable such requests, we will need to enable CORS settings server-side. This will let browsers know that the target server allows such cross-origin requests, such that browsers allow such requests to be sent.
CORS security has both client-side and server-side components. The server controls which domains to whitelist. The client first checks its whitelist status with the target server using a "pre-flight request" before sending the actual request from the user application. If the pre-flight request fails due to CORS, the client browser will prevent the actual request from sending, citing CORS as the reason.
CORS with cookies
We need special CORS settings to pass auth information such as cookies between our frontend and backend.
Backend
1
const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3000';
Copied!
And we tell
cors to accept cookie credentials from that frontend server URL with the following code (link):1
app.use(cors({
2
credentials: true,
3
origin: FRONTEND_URL
4
}));
Copied!
Frontend
We tell our frontend to send cookie credentials to other servers (non-origin domains) in
axios requests with the following code (link). We will need to specify the following setting in every file where we import and use axios.1
axios.defaults.withCredentials = true;
Copied!
Further Reading on CORS
The following articles provide a more detailed explanation of CORS.
Deployment
Create React App deployment works slightly differently from regular Heroku development in 3.8.1: Heroku Deploy. Please follow the Heroku Deployment instructions in CRA Docs here to deploy CRA apps.
Exercise
Follow the above instructions to get the app working.
Last modified 5d ago