My node.js web app don't recognize my manifest.json

Question

I am building a web application with node.js, express.js and handlebars. I have the web app working and now I want to turn it into a PWA, so I wrote the manifest.json like this:

{
    "name": "Talleres Online",
    "short_name": "Talleres Online",
    "start_url": "./?utm_source=web_app_manifest",
    "display": "standalone",
    "background_color": "#44d1c8",
    "theme_color": "#55bddc",
    "orientation": "portrait",
    "description": "Lleva el control de tu taller a donde vayas, con Talleres Online puedes gestionar el funcionamiento de tu taller mecánico ¡desde cualquier dispositivo!",
    "lang": "es-MX",
    "icons": [{
      "src": "icons/icon-32x32.png",
        "sizes": "32x32",
        "type": "image/png"
      }, {
      "src": "icons/icon-64x64.png",
        "sizes": "64x64",
        "type": "image/png"
      }, {
      "src": "icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      }, {
        "src": "icons/icon-256x256.png",
        "sizes": "256x256",
        "type": "image/png"
      }, {
        "src": "icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
      }, {
        "src": "icons/icon-1024x1024.png",
        "sizes": "1024x1024",
        "type": "image/png"
      }]
  }

and when I try to look up the manifest info at devtools it seems like there is no manifest.json, looking at the console it says this errors:

Failed to load resource: the server responded with a status of 404 (Not Found) manifest.json:1

Manifest: Line: 1, column: 1, Syntax error. manifest.json:1

GET http://localhost:3000/manifest.json 404 (Not Found) manifest.json:1

Manifest: Line: 1, column: 1, Syntax error.

With handlebars, I have a main.hbs file that has the head tag of the HTML and which body tag refers to other .hbs files to build the site, in this main.hbs file is where I put the meta tag that refers to the manifest.json.

I have put the manifest.json in the root of the app (just at the side of node_modules folder), in the /src folder and the /public folder, and none of them worked, I also connected a route for the /manifest.json request to the manifest.json file but it just changed the error from a 404 to a 500.

Any help, please? Thank you very much, sorry for the long post and the bad English.

const express = require('express');
const morgan = require('morgan');
const exphbs = require('express-handlebars');
const path = require('path');
const flash = require('connect-flash');
const session = require('express-session');
const MySqlStore = require('express-mysql-session');
const passport = require('passport');

const { database } = require('./keys');

//Inicializaciones

const app = express();
require('./lib/passport');

//Configuraciones

app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.engine('.hbs', exphbs({
    defaultLayout: 'main',
    layoutsDir: path.join(app.get('views'), 'layouts'),
    partialsDir: path.join(app.get('views'), 'partials'),
    extname: '.hbs',
    helpers: require('./lib/handlebars')
}));
app.set('view engine', '.hbs');

//Middlewares

app.use(session({
    secret: 'carhelpmysqlsession',
    resave: 'false',
    saveUninitialized: 'false',
    store: new MySqlStore(database)
}));
app.use(flash());
app.use(morgan('dev'));
app.use(express.urlencoded({extends: false}));
app.use(express.json());
app.use(passport.initialize());
app.use(passport.session());

//Variables Globales

app.use((req, res, next) => {
    app.locals.success = req.flash('success');  
    app.locals.message = req.flash('message');
    app.locals.user = req.user; 
    next();
});

//Rutas

app.use(require('./routes/index.js'));
app.use(require('./routes/authentication.js'));
app.use(require('./routes/carhelp.js'));
app.use(require('./routes/estados.js'));



// Public
app.use(express.static(path.join(__dirname, 'public')));

//Inicializar Servidor

app.listen(app.get('port'), () => {
    console.log('Server on port', app.get('port'));
});

The question is solved, but here is my express configuration if anyone else have the same problem can solve it easily.

Answer 1

So it says syntax error.

I think look at your manifest json file is it formatted correctly or not. In snippet I see a missing { opening bracket, that can be issue when you copied. You can try JSON Validator like this one or you can use this to validate your manifest file.

If everything is correct than you can clear browser cache.

Hope this helps you.

Update:

manifest.json should be in static/public folder from where you are serving your static file and using it as static file in express.