CODEWITHSUNDEEP
reactjsexpressreact-admin
Amiga500
Amiga500

Reputation: 6141

Integrate and serve React-Admin from existing Express application

In my project I need an administrator application. I have stumbled upon the admin-react. It seems it does exactly what I need it to do. I have checked their tutorial. Made some drafts, and got it running (following tutorial).

However I have an Express application that has routes and API's already working, and also I have React application served by the Express one. I would like to serve the Admin-React instead, in other words remove the existing React application and start customizing the React-Admin one as a static resource. Simply, my existing Express application should serve the React-Admin and expose the existing API's to it.

Looking at the tutorials, I found no information how to do it. It had yarn start and it starts running on port 3000.

I am missing something here very basic it seems. Is there an example of that setup?

This is my Express.js that already serves React application (not React Admin) from public folder.

'use strict';
/* jshint camelcase:false */

require('dotenv').config();

if (process.env.NODE_ENV === undefined) {
    throw new Error('No environment variable was set. For development use [export NODE_ENV=dev].');
}

let express = require('express');
var favicon = require('serve-favicon');
let path = require('path');
let cookieParser = require('cookie-parser');
let bodyParser = require('body-parser');
let expressValidator = require('express-validator');
let configuration = require('./app/Configuration');
let app = configuration.getApp();
let config = configuration.getParameters();
let errorHandler = require('./src/Error/Handler');
let session = require('client-sessions');

app.use(require('./src/Twig/ExtendWithCustomFunctions').extend());

app.use(session({
    cookieName: 'session',
    secret: 'xxxxxxx',
    duration: 12 * 60 * 60 * 1000,
    activeDuration: 2 * 60 * 60 * 1000 
}));

app.use(bodyParser.json());
app.use(errorHandler.bodyParser);
app.use(expressValidator());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(favicon(__dirname + '/public/favicon.ico'));

configuration.setErrorHandler(errorHandler);
configuration.initializeControllers(__dirname);

configuration.initializeErrorHandling();

module.exports = app;

Upvotes: 0

Views: 754

Answers (1)

Kmaschta
Kmaschta

Reputation: 2429

The only way to serve a React Admin from an Express endpoint is to build it first.

If you followed the tutorial, you should have run a create-react-app application, so you can run the following command to bundle your app:

npm run build
# or
yarn build

Your bundle files will be available under the static folder.

Then, you can move these files to your express app, in a subfolder, where you'll be able to serve them with express.static.

More info about the create-react-app build & deployement: https://facebook.github.io/create-react-app/docs/deployment

There is even an example of how to serve the build: https://facebook.github.io/create-react-app/docs/deployment#other-solutions

Upvotes: 1

Related Questions