I'm unable to get my stylesheet to apply to my handlebars. Using this exact same code it was able to load yesterday but now I'm getting this MIME error. So I'm not quite sure why this is happening. Any help would be appreciated.
Server Code
const sequelize = require('./config/connection');
const SequelizeStore = require('connect-session-sequelize')(session.Store);
const app = express();
const PORT = process.env.PORT || 3001;
// Set up Handlebars.js engine with custom helpers
const hbs = exphbs.create({ helpers });
const sess = {
secret: 'Super secret secret',
cookie: {},
resave: false,
saveUninitialized: true,
store: new SequelizeStore({
db: sequelize
})
};
app.use(session(sess));
// Inform Express.js on which template engine to use
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(routes);
sequelize.sync({ force: false }).then(() => {
app.listen(PORT, () => console.log('Now listening'));
});
main.handlebars link reference
<link rel="stylesheet" type="text/css" href="/css/style.css">
Folder Org
server
public
--css
--style.css
I figured it out. My Folder org was NOT in face as I said it was, and when I moved my css folder under public everything worked again.
Related
I have a CSS file in a public directory and 2 EJS templates in views directory.
My CSS file works when i use this route:
app.get('/theresa', (req, res) => {
res.render('templates/home')
})
But when i was creating a new route and tried to style it, it didn't work =>
It gives me this Error message:
"Refused to apply style from 'http://localhost:3000/theresa/css/homePage.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
This is the route where the CSS doesn't work:
app.get('/theresa/overview', (req, res) => {
res.render('templates/overview')
})
<link rel="stylesheet" href="css/homePage.css">
const express = require('express')
const path = require('path')
const ejsMate = require('ejs-mate');
const methodOverride = require('method-override');
const app = express();
app.engine('ejs', ejsMate)
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'))
app.use(express.urlencoded({ extended: true }));
app.use(methodOverride('_method'));
app.use(express.static(path.join(__dirname, '/public/')))
app.get('/theresa', (req, res) => {
res.render('templates/home')
})
app.get('/theresa/overview', (req, res) => {
res.render('templates/overview')
})
app.listen(3000, () => {
console.log('Serving on port 3000')
})
This is where the issue is
<link rel="stylesheet" href="css/homePage.css">
Change it to
<link rel="stylesheet" href="/css/homePage.css">
Take note of the "/" before "CSS". Always include it when serving any file be it CSS, js, png etc
I need my app to work well on a subfolder of the main domain. Exactly here
At first I had a plenty of errors of scripts, css and images not being loaded.
I added the following to next.config.js:
basePath: "/out",
Now scripts and css are working well when exported, they have the /out/ in the path.
However the files do not have yet the /out/ in the path, thus they are giving 404 errors.
I tried to follow this tutorial, but it looks like I am still doing something wrong,
My next.config.js now is:
const path = require("path");
module.exports = {
trailingSlash: true,
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
basePath: "/out",
assetPrefix: process.env.BASE_PATH || '',
publicRuntimeConfig: {
basePath: process.env.BASE_PATH || '',
},
};
The relevant piece of the package.json is:
"scripts": {
"dev": "node server.js -p $PORT",
"build": "next build",
"prod": "BASE_PATH=/out next build && next export",
"start": "NODE_ENV=production node server.js -p $PORT",
"start2": "next start"
},
The server.js is:
const express = require('express');
const next = require('next');
const path = require('path');
const bodyParser = require('body-parser');
const keys = require("./server/config/keys");
const stripe = require('stripe')(keys.stripeSecretKey);
const routes = require('./routes');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dir: '.', dev });
const handle = routes.getRequestHandler(app);
app.prepare().then(() => {
const server = express();
// Static files
// https://github.com/zeit/next.js/tree/4.2.3#user-content-static-file-serving-eg-images
server.use('/images', express.static(path.join(__dirname, 'images'), {
maxAge: dev ? '0' : '365d'
}));
server.use(bodyParser.json());
server.get('*', (req, res) => {
return handle(req, res)
});
server.post('/api/stripe/checkout', async (req, res) => {
await stripe.charges.create({
amount: req.body.amount,
currency: 'usd',
description: 'Mojosa - React Next Landing Page Templates',
source: req.body.token.id
});
res.send({})
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, (err) => {
if (err) throw err
console.log(`> Read on http://localhost:${PORT}`)
});
})
And here is an example of an image in a component:
<div className="col-lg-6 col-md-12">
<div className="book-image">
<img src='/images/book-img.png' alt="image" />
</div>
With this configuration:
EXPORT - next build && next export on the /out/ folder are working well when uploaded to the live website, BUT images are giving 404
DEV or BUILD they are giving 404 and working much worse than the EXPORT site published on the real domain. If I remove basePath: "/out", the dev mode works excellent
Questions:
How can I make the /out/ path be added to all the images/assets?
I am ok to re-add basePath: "/out",` when exporting.
Just ran into this one too. You'll need to manually prefix anything in your public folder with your basePath (images, fonts etc)
Docs
"Files in the public folder; if you want to serve those assets over a CDN, you'll have to introduce the prefix yourself"
<div className="col-lg-6 col-md-12">
<div className="book-image">
<img src={`${process.env.BASE_PATH}/images/book-img.png`} alt="image" />
</div>
When I'm trying to build my Next.js app for production I got the following error:
Seems 'API_KEY' is undefined. Can't destructure this property from publicRuntimeConfig. This error happens on pages where I use getStaticProps or getStaticPaths built in functions.
Here is my next.config.js:
const withPlugins = require("next-compose-plugins");
const withCSS = require("#zeit/next-css");
const withSass = require("#zeit/next-sass");
const withBundleAnalyzer = require("#next/bundle-analyzer");
const nextRuntimeDotenv = require("next-runtime-dotenv");
const withConfig = nextRuntimeDotenv({ public: ["API_URL", "API_KEY"] });
const nextConfig = {
analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
bundleAnalyzerConfig: {
server: {
analyzerMode: "static",
reportFilename: "../bundles/server.html",
},
browser: {
analyzerMode: "static",
reportFilename: "../bundles/client.html",
},
},
publicRuntimeConfig: {
PROXY_MODE: process.env.PROXY_MODE,
API_URL: process.env.API_URL,
API_KEY: process.env.API_KEY,
STATIC_PATH: process.env.STATIC_PATH,
},
};
module.exports = withConfig(
withPlugins([[withCSS], [withSass], [withBundleAnalyzer]], nextConfig)
);
I have researched official docs and google similar problem but seems with no result. Any ideas why Next.js yarn build failed?
From the documentation you can find this. A page that relies on publicRuntimeConfig must use getInitialProps ( https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration ) I think you should put it somewhere else. Check the environment variables section https://nextjs.org/docs/api-reference/next.config.js/environment-variables
I did a fresh install of express app. And my
package.json
{
"name": "projects",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "nodemon ./app.js"
},
"dependencies": {
"body-parser": "~1.18.2",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.15.5",
"morgan": "~1.9.0",
"pug": "2.0.0-beta11",
"serve-favicon": "~2.4.5"
},
"devDependencies": {
"browser-sync": "^2.18.13",
"connect-browser-sync": "^2.1.0",
"nodemon": "^1.12.5",
"reload": "^2.2.2"
}
}
app.js
var express = require('express');
var http = require('http');
var reload = require('reload');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
app.set('port', process.env.PORT || 3000);
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
var server = http.createServer(app)
reload(app);
server.listen(app.get('port'), function () {
console.log('Web server listening on port ' + app.get('port'))
});
module.exports = app;
I dont want to use gulp if reload does my job.
When i change the text welcome in index.pug, the chrome is not reloaded. If i refresh i could see the change.
How can i auto reload my page on changes in any of the folder.
Note: nodemon is working fine.Again it doesn't reload the browser.
Reaload plugin reloads the page only if the express server is restarted by nodemon. From the docs:
When you restart the server, the client will detect the server being restarted and automatically refresh the page.
Nodemon does not watch Pug templates, so it's not restarted on template change:
By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee, and .json extensions.
You can set .pug extension to be monitored by nodemon. But I think it will lead to unnecessary server restarts because Pug templates seem to be evaluated at runtime when the request for the page is happening.
Don't also forget to add reload script to all your pages by modifying the main layout template:
doctype html
html
head
...
body
block content
script(src='/reload/reload.js')
To achieve that, you need install Livereload to work together with Nodemon. A simple Express APP with necessary changes, it would be like this:
Complete step by step explained
var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");
var livereload = require("livereload");
var connectLiveReload = require("connect-livereload");
var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
const liveReloadServer = livereload.createServer();
liveReloadServer.server.once("connection", () => {
setTimeout(() => {
liveReloadServer.refresh("/");
}, 100);
});
var app = express();
app.use(connectLiveReload());
// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "hbs");
app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));
app.use("/", indexRouter);
app.use("/users", usersRouter);
// catch 404 and forward to error handler
app.use(function (req, res, next) {
next(createError(404));
});
// error handler
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get("env") === "development" ? err : {};
// render the error page
res.status(err.status || 500);
res.render("error");
});
module.exports = app;
I am using a MEAN stack
I have successfully served a simple JSON object {"message":"hello"} sent with an express get and res.send function that appears in my web browser if I go to the route
also on my angular 2 front end I have an http.request() that works fine if I put a JSON test api url but if I put my route url to my simple JSON then I don't get a response. Any idea what the reason might be?
my angular 2 component.ts:
makeRequest(): void {
this.loading = true;
this.http.request('myurl/members')
.subscribe((res: Response) => {
this.data = res.json();
this.loading = false;
});
}
my server.js express:
// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
var mongojs = require('mongojs');
var db = mongojs('sangha',['members']);
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set port
const port ='80';
app.set('port', port);
/**
* Create HTTP server.
*/
const server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port, () => console.log(`running on port ${port}`));
/*db methods
db.members.insert({"firstname":"Josh"});
db.members.findAndModify({
query: {lastname: ''},
update: {$set: {firstname: ''}},
new: true
}, function (err, doc, lastErrorObject){
//?
});
db.members.find(function(err,docs){
console.log("members collection: "+docs;
});
*/
/*submit on login page, first check the username doesn't already exists, then
db.members.insert*/
//app.post('/members',function(req,res)
app.get('/members',function(req,res){
res.send({"message":"hello"});
});
//this catch all must come after all route definitions
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});