To connect our Angular app to our WordPress site we are going to go through an Express server that is going to function as our middleware. We want to do this because we want to show different content to logged in users and users with different roles and it is going to be easier to manage that outside of the frontend. Additionally we are going to be creating content on the Angular app that will be pushed to the WordPress database and we will want to make sure that that data is secure before allowing it to go to the database. Let’s start setting up the server.
First thing is going to be to create a new folder in our repository called “express-middleware”. From here we can go into that folder and install our express server.
npm install express axios cors dotenv
Next we are going to create the structure of our express server. It should look like the following.
wp-express-middleware/
│── node_modules/
│── src/
│ ├── routes/
│ │ ├── wordpressRoutes.js
│ ├── controllers/
│ │ ├── wordpressController.js
│ ├── services/
│ │ ├── wordpressService.js
│ ├── config/
│ │ ├── dotenvConfig.js
│ ├── server.js
│── .env.development
│── .env.production
│── package.json
│── README.md
From here we are going to open our .env.development file and add our development variables. Don’t worry about their current values. We are just setting it up for what we will need later.
# Development Configuration
WP_API_URL=https://dev-your-wordpress-site.com/wp-json/wp/v2
PORT=5000
CORS_ORIGIN=http://localhost:4200
# WordPress Authentication
WP_USER=dev-user
WP_PASSWORD=dev-app-password
# Debugging
LOG_LEVEL=debug
Next, open up the .env.production file and add the production variables
# Production Configuration
WP_API_URL=https://your-wordpress-site.com/wp-json/wp/v2
PORT=8080
CORS_ORIGIN=https://your-angular-app.com
# WordPress Authentication
WP_USER=prod-user
WP_PASSWORD=prod-app-password
# Security & Logging
LOG_LEVEL=info
Let’s make sure we have dotenv and cross-env installed
npm install dotenv cross-env
Now, let s modify the dotenvConfig.js file to load the correct .env file based on NODE_ENV.
const dotenv = require("dotenv");
const path = require("path");
// Determine environment (default to 'development')
const envFile = process.env.NODE_ENV === "production" ? ".env.production" : ".env.development";
// Load the correct .env file
dotenv.config({ path: path.resolve(__dirname, `../../${envFile}`) });
module.exports = {
WP_API_URL: process.env.WP_API_URL,
PORT: process.env.PORT || 5000,
CORS_ORIGIN: process.env.CORS_ORIGIN,
WP_USER: process.env.WP_USER,
WP_PASSWORD: process.env.WP_PASSWORD,
REDIS_HOST: process.env.REDIS_HOST,
REDIS_PORT: process.env.REDIS_PORT,
LOG_LEVEL: process.env.LOG_LEVEL || "info",
};
Next, we need to update our server.js file to use the correct configuration.
const express = require("express");
const cors = require("cors");
const { PORT, CORS_ORIGIN } = require("./config/dotenvConfig");
const wordpressRoutes = require("./routes/wordpressRoutes");
const app = express();
// CORS configuration
app.use(cors({ origin: CORS_ORIGIN }));
app.use(express.json());
// Routes
// Start server
app.listen(PORT, () => console.log(`Server running on port ${PORT} (${process.env.NODE_ENV})`));
Finally we need to update our package.json file to load the correct .env file in different environments.
"dependencies": {
"axios": "^1.7.9",
"cors": "^2.8.5",
"cross-env": "^7.0.3",
"dotenv": "^16.4.7",
"express": "^4.21.2"
},
"scripts": {
"start": "cross-env NODE_ENV=production node src/server.js",
"dev": "cross-env NODE_ENV=development nodemon src/server.js"
}
We should now be all set. We can now start our server.
npm run dev