(MERN) Как правильно обслуживать приложение React, используя Express. js? - PullRequest
1 голос
/ 09 мая 2020

Так что в основном моя проблема в том, что я в основном создавал API только с использованием node / express / mon goose и никогда не обслуживал свои приложения для реагирования, поскольку кто-то всегда делал это за меня в нашем Plesk (я думаю через Apache .)

Теперь, когда я, наконец, делаю некоторые вещи стека MERN для клиента на стороне, мне было интересно, какой «правильный» способ обслуживания приложения React, которое уже было создано.

Express и React-Router cla sh. Под этим я подразумеваю, что если у меня есть страница «О программе» и я от go до example.com/about, как express узнает, что это страница в моем одностраничном приложении React? Есть только индекс. html все, что связано с маршрутами на моей странице, обрабатывается response-router.

Но что, если это файл или папка? Таким образом, это было моим решением, позволяющим обслуживать оба файла веб-сайта и при этом иметь доступ к маршрутам веб-сайта:

const apps = { //websites are put in this object and iterated through to make the code below less bloated.
        example: {
            folder: "example-website",
            app: express(),
            server: null,
            port: 80,
            protocol: "http", 
            cert: null,
            subdomains: []
        }
    }

    for(let website of Object.keys(apps)){ //Itterate through every website.
        website = apps[website]; //Make the website key the website object instead.

        const websitePath = path.join(__dirname+`/client/${website.folder}/build`); //Save path to website's build folder for ease of use.

        fs.readdir(websitePath, (err, files) => { //itterate through all files in the build folder
            if(err){ //log errors.
                console.log(err)
            } else { //continue if there wasn't an error.
                const fileArray = files.filter(file => file !== 'index.html')//remove 'index.html' from the array.

                website.app.use('/*', (req,res) =>{
                    let route = req.params["0"].substring(0, req.params["0"].indexOf('/')); //take the first part of the route.

                    if(fileArray.includes(route)){ //check if the first part of the route matches a file or folder.
                        res.sendFile(path.join(__dirname+`/client/${website.folder}/build/${req.params["0"]}`));
                    } else { //If the list of files doesn't include the route than the route is probably a route within the React App in React-Router
                        res.sendFile(path.join(__dirname+`/client/${website.folder}/build/index.html`));
                    }

                });

                //...more irrelevant code here.
            }

        })
    }

Мне было интересно, был ли это правильный способ справиться с конфликтом между моими одностраничное приложение React использует response-router и способ Express обработки маршрутов.

Ответы [ 2 ]

1 голос
/ 11 мая 2020

Я не совсем уверен, что, возможно, вы запутались в API, я объясню, что, может быть, вы лучше поймете MERN,

Сначала есть 2 вида: 1 - бэкэнд (API) 2 - Фронтенд (в данном случае Reactjs), поэтому бэкэнд и фронтенд, у каждого свой бизнес, я уверен, вы это знали, поэтому как только пользовательскому интерфейсу (в данном случае Reactjs) потребуются данные, они будут называть api вызовом fetch (в основном) на бэкэнд (API в данном случае Nodejs) и получением этих данных.

=> так что вы знаете, как работают Frontend и backend, далее:

Reactjs они делят множество элементов на компонент для загрузки

  • Пример: google. com
  • Смотрите: вверху справа есть заголовок, это компонент, вход - это другой компонент, а другой - другой компонент.

  • Это run: когда вы что-то ищете, заголовок и ввод не загружаются, другой компонент загружается, поэтому при изменении URL-адреса реагирующий маршрутизатор поможет вам поймать URL-адрес, который вы определяете в маршрутизаторе, вы можете прочитать больше здесь о реактивном маршрутизаторе.

==> Это означает, что когда go на другой URL-адрес, они запускают только компонент, URL-адрес которого использует localhost: 3000 / to localhost: 3000 / about

0 голосов
/ 15 мая 2020

Если вы сможете подробнее рассказать о проблеме, другим будет гораздо полезнее объяснить.

  1. Создание Back-end похоже на «создание способов, с помощью которых вы можете запрос (отправить операции CRUD от клиента к базе данных через сервер) и получить ответ (получить данные и доставить клиенту) «с помощью так называемых« вызовов API ». Конечно, вы можете манипулировать данными в серверной части, et c., Но это почти то, что он делает. Итак, гипотетически предположим, что ваша внутренняя папка имеет Express. js, потому что Express устанавливает маршруты по app.use, и, скорее всего, вы знаете, что это означает. (* Маршруты в Express. js (back-end) отличаются от Routes в React - например, если backend Route - это дорога между вашим приложением и базой данных, Route в React похож на дороги между вашим приложением и клиент)

  2. Front-End похож на магазин, где вы приносите данные (товары), полученные из базы данных (ваш склад), и красиво представляете их клиенту ( sell).

Теперь вам нужно делать вызовы API в вашем FRONT-END через внутренние маршруты, используя Ax ios или fetch (), et c .. ПОТОМУ ЧТО "путь (маршруты) к серверу установлен в вашей внутренней папке". На вашем компьютере будут работать две части (на этапе РАЗРАБОТКИ), одна - это сервер (внутренняя часть), а другая - ваша веб-страница (интерфейсная часть). Если клиент переходит к определенному маршруту, и компонент будет вызван, а компонент имеет методы (прямо или косвенно) и выполняет вызовы API и что-то делает с данными.

Я оставлю ссылку к моей недавней работе над приложением React с полным стеком, вы можете go и проверить структуру, чтобы получить некоторые идеи.

Ознакомьтесь с моим репо и структурой здесь

...