I am having an issue with my MERN-Stack application rendering blank content in the browser despite the front-end and back-end running without any errors.
In the browser, two errors are coming up through inspect;
Uncaught SyntaxError: Unexpected token '<' in main.b4d4fd26.js:1
Manifest: Line: 1, column: 1, Syntax error in manifest.json:1
What would be the solution to this?
Server:
const express = require("express");
const { ApolloServer } = require("apollo-server-express");
const path = require("path");
// require("dotenv").config();
require("dotenv").config({ path: path.resolve(__dirname, ".env") });
const { typeDefs, resolvers } = require("./schemas");
const { authMiddleware } = require("./utils/auth");
const db = require("./config/connection");
const PORT = process.env.PORT || 5000;
const app = express();
const server = new ApolloServer({
typeDefs,
resolvers,
context: authMiddleware,
// These two lines below enable the playground when deployed to heroku. You can remove them if you don't want this functionality
introspection: true,
playground: true,
});
server.applyMiddleware({ app });
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "../client/build")));
}
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "../client/build/index.html"));
});
db.once("open", () => {
app.listen(PORT, () => {
console.log(`Server running on port http://localhost:${PORT}`);
console.log(`Use GraphQL at http://localhost:${PORT}${server.graphqlPath}`);
});
});
Manifest.json file:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Found the issue...
So in order to run the application in the local machine, both the front-end and back-end need to be running. This could be done separately if the front-end and backend both have their own root directories. However, the right way to execute this is to run npm run develop in the terminal. This allows both of the application's servers to be fully functional.
Perks of being a rookie...