Как правильно обслуживать файл JSON

Question

Как правильно обслуживать JSON, который я хочу использовать в качестве конечной точки для мобильного приложения?

В настоящее время я делаю это так - это app.js (Экспресс):

const PORT = process.env.PORT || 5000;
const env = process.env.NODE_ENV || 'development';

const express = require('express'),
      path = require('path'),
      mongoose = require('mongoose'),
      bodyParser = require('body-parser'),
      passport = require('passport');


const config = require('./backend/config/db')[env]; // load db
mongoose.connect(config.DB, { useNewUrlParser: true }).then(
    () => {console.log('Database is connected') },
    err => { console.log('Can not connect to the database'+ err)}
);

const app = express();
const apii = require('./backend/routes/apii');

// Serve static files from the React app -- added because of Heroku, the local app doesn't need this
app.use(express.static(path.join(__dirname, 'frontend/build')));


app.use(passport.initialize());
require('./backend/passport')(passport);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));


// routes
app.use('/apii', apii);
// 

app.get('*', function(request, response) {
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    //response.sendFile(path.resolve(__dirname, './frontend/build', 'index.html'));
    response.sendFile(path.resolve(__dirname, '../', 'frontend/build/index.html'));
});

app.listen(PORT, () => {
    console.log(`Server is running on PORT ${PORT}`);
});

module.exports = app;

Это . / Backend / routs / apii.js :

var express = require('express');
var router  = express.Router();

router.get('/', function(req, res, next) {
    var testObject = {
        "AppName": "MongoPop",
        "Version": 1.0
    }
    res.json(testObject);
});

module.exports = router;

В настоящее время я отображаю данные JSON (в качестве конечной точки для мобильного приложения) следующим образом - в маршрутах ReactJS у меня есть:

<Route exact path="/apii" component={ ApiV1 } />

, а затем в компоненте ApiV1 следующее:

<code>import React, { Component } from 'react';
import axios from 'axios';

export default class ApiV1 extends Component {
    constructor() {
        super();
        this.state = {
            events: ''
        }
    }

    componentDidMount() {
        axios.get('/apii')
            .then((response) => {
                this.setState({events: response.data.placeholder});
                console.log('I got JSON data! ', this.state.placeholder);
            }).catch(err => {
                console.log('CAUGHT IT! -> ', err);
            });
    }

    render() {
        return (
            <div><pre>{JSON.stringify(this.state.placeholder, null, 2) }

) } }

Я рендерил JSON компоненту ReactJS, который выглядит неправильно.

Я пытался обслужить этот файл JSON по экспресс-маршруту, но этот маршрут никогда не был доступен через порт 3000 (ReactJS) - localhost: 3000 / apii , это дало мне пустую страницу. На localhost: 5000 / apii - маршрут Express, данные были доступны, но я не могу получить доступ к этой конечной точке из мобильного приложения.

Я использую прокси во внешней части проекта:

"proxy": "http://localhost:5000"

Работает для приложения React + экспресс-бэкэнд, веб-сайт работает хорошо, но не обслуживает конечную точку /apii - результатом здесь является только пустая страница.

Как правильно обслуживать конечную точку JSON?