Cześć, miałem bardzo wiele problemów z konfiguracją całego serwera back i front. Ale już działa na heroku. Routing, Zapytanie do api o dane (oprócz plików). I tutaj jest dziwna rzecz bo nie wiem dlaczego nie chce mi tych plików zwrócić. Lokalnie wsyzstko działa. Na dev.
Na heroku użycie app.use('/api/images', express.static('../../src/assets/images'));
w metodzie fetch(
fetch('/api/images/spider-man-far-from-home.jpg')
.then(res => res.text())
.then(res => console.log(res)))
), wyświetla:
"!doctype html><html lang="en"><head><meta charset="utf-8" /><link rel="shortcut icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta name="theme-color" content="#000000" /><link rel="manifest" href="/manifest.json" /><title>React App</title><link href="/static/css/main.34de6062.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript.."
pobiera stronę główną? Ma to sens ale..
Natomiast wywołanie z
app.use('/api/images', express.static(path.join(__dirname, './assets/images')));
app.get('/api/images/:imageTitle', (req, res) => {
res.sendFile(path.join(__dirname, './assets/images/'+ req.params.imageTitle));
});
powoduje błąd pokazny na zdj poniżej.
Proóbwałem jeszcze zakomentować 2 powyższe app.use() i użyć:
static.json
{
"root": "client/build/",
"clean_urls": false,
"routes": {
"/api/images/*": "src/assets/images/",
"/**": "index.html"
}
}
ale nic nie działa. Zwraca stronę główną string().
w komponenicie używam ponadto <img src="/api/images/spider-man-far-from-home.jpg" alt="no img"/>
lecz też nie zwraca mi zdj.
struktura projektu:
client
------src
------build
src(backend)
------assets
------------images
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../client/build')));
app.use('/api', indexRouter);
app.use('/api/users', usersRouter);
app.use('/api/images', express.static(path.join(__dirname, './assets/images')));
// app.get('/api/images/:imageTitle', (req, res) => {
// res.sendFile(path.join(__dirname, './assets/images/'+ req.params.imageTitle));
// }); Drugi sposób
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, '../client/build/index.html'));
});
module.exports = app;
static.json
{
"root": "client/build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}