I am using keystone node module to develop cms based pages in my application.
I initialize keystone just by adding it to my js file as: var keystone = require('keystone');
But the problem which i am facing currently is that, the the route for every keystone based cms feature is
localhost:3000/keystone/<featue-name>
I want to remove keystone from the url with another name required for the app. Making changes inside the node-module of keystone does the trick!
But if i do an npm update all my changes goes in vain. Normally, in other languages i used to do it it by METHOD OVERRIDING. I don't know about Method Overriding in a node-module.
Is there any other way of doing it?
From what I can see in the source, the admin path prefix is configurable (just not documented):
keystone.init({
...
'admin path' : 'your-own-path',
...
});
(which would make the path localhost:3000/your-own-path/<feature-name>)
If you're not using the latest Keystone, perhaps this might work (although it's a bit of a hack):
keystone.pre('routes', function(req, res, next) {
req.url = req.url.replace(/^\/your-own-path/, '/keystone');
next();
});
What this does is replace a /your-own-path prefix in requested URL's with /keystone, sort of like an "internal redirect".
Making changes to the source code in node_modules is a not a good way of solving it since it's not version controlled so everyone working on the repo will have to change it manually. Instead you can fork the repo to your own Github account, do the changes and then install that version of Keystone:
$ npm install --save keystone#git+https://github.com/your-username/keystone.git
Even better, make a fix that defaults to /keystone but is possible to change with the Keystone options and create a PR back to Keystone! The use after you have fixed it should look something like this:
keystone.set('url', 'custom'); // Changes /keystone to /custom
Related
Alright, I've about reached the end of my sanity on this one.
So, I have a basic React frontend w/ an Express backend. React is running off of localhost:3000, the backend is running off of localhost:3030. Following along on a guide for setting up some Spotify integration, everything works fine up until I hit the portion on setting up a proxy. (I have a slightly different setup from the Spotify guide, all my stuff runs through /spotify/auth rather than /auth)
I installed http-proxy-middleware, created the setupProxy.js in my /src folder, and if I ever try to load up localhost:3000 as normal, I get nothing-- my app doesn't load at all.
The only way to have the app appear again is to remove the file. The one on the spotify guide is a bit out of date as far as I can tell anyway, but even using suggestions found elsewhere, I've gotten no luck. Here is the current setup I have for my setupProxy.js file:
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/spotify/**",
createProxyMiddleware({
target: "http://localhost:3030",
changeOrigin: true,
})
);
};
I've even removed the actual fetch that would be making use of the proxy and still have no luck loading my page. I am also unable to use "proxy": "http://localhost:3030" in my package.json as it throws:
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string."
Managed to solve my problem, though I am still unsure of why it works.
The issue I was running into stems from using "type": "module" in the package.json. I was using correct import statements in all of my backend, as well as tried to use it for the setupProxy.js as well, however this would always result in the issue from the question. After removing the line and swapping out the imports for requires in my backend, everything started working.
It seems like a strange compatibility issue, but there's probably a much better explanation.
Had the same problem as you where my react app wasn't loading because of http-proxy-middleware. Different problem/solution, but for people that also had this problem, and were following this youtube video https://www.youtube.com/watch?v=hxyp_LkKDdk
The tutorial has
const proxy = require("http-proxy-middleware")
instead of
const {createProxyMiddleware} = require("http-proxy-middleware")
After I made that change, my issue was solved. Don't forget to change "proxy" to "createProxyMiddleware" in app.use() as well
the hierarchy of my files looks something like:
BACKEND(COMPLETE)
->Routers
->userrouter.js
->login.html
I wanted the access of my login.html file in userrouter.js for which I copied the Path(absolute) of the login.html file.
But I am getting this error:
path must be absolute or specify root to res.sendFile()
My Code:
function loginUser(req,res)
{
res.sendFile('C:\Users\ASUS\Desktop\backend(complete)\login.html');
res.end();
}
Try modifying C:\Users\ASUS\Desktop\backend(complete)\login.html to C:/\Users/\ASUS/\Desktop/\backend(complete)/\login.html
Try using path (path.join) npm package which Node provides out of the box to avoid this confusion irrespective of the OS.
Try the Npm package path and use path.join(["yourpath", "here") for cross system compatibility. Note that every part between slashes needs to be its own entry in the array.
I like the automated organize feature in VSCode, but having it doing it on every save has given me some trouble.
...
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
...
Is it possible to set up some git hooks that organize the imports (either via vscode or some other script/lib) when I stage them?
Issues
If I hit save too early (do it to kick off prettier all the time) before I have used the imported methods - then it removes it and I have to write the import again.
If I break the code (.jsx) and something appears to not be used and I hit save (to trigger prettier), then it removes the imports. I then have to import them again.
There is some form of hook that can be applied when running git add : filters defined in gitconfig and .gitattributes.
See this section of git book for detailed explanations.
Here are the sketches from the documentation (it illustrates how you can configure a filter to run on *.txt files) :
when running git add :
when running git checkout :
You can define in your gitconfig a filter, which consists of two commands to "clean" and "smudge" :
$ git config --global filter.jsximports.clean fiximports
$ git config --global filter.jsximports.smudge cat
and edit the .gitattributes file to apply this filter on jsx files
*.jsx filter=jsximports
The script to apply may be tslint --fix, with the ordered-imports rule.
Actually : tslint's rule seem to have its own implementation, but it does something similar (see https://github.com/palantir/tslint/pull/4064)
In this answer : https://stackoverflow.com/a/57458656/86072
user thorn points to this npm package :
https://www.npmjs.com/package/organize-imports-cli
which calls organizeImports from cli
I am a big fan of vscode. Here's my question, let's say I have a code like this.
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World!'))
when I CMD+Click on express(inside require) or on get function, it's taking me to it's typescript definition which is cached in home folder. When I clear the cache, then it's taking me to definitions inside node_modules and the cache is getting build again. Whereas in webstorm, there are no typescript caching, it takes me into node_modules definition. Is it possible to disable typescript definitions and use node_modules definitions ??
as shown in the picture, when I click on express it takes me to tyepscript definition, not the node_modules one.
There is a built-in extension called TypeScript and JavaScript Language Features (vscode.typescript-language-features). Disabling that will work ?? I don't know but I am afraid that I lose javascript intellisense.
Anyone know ???
The "cache" is built by a feature called Automatic Type Acquisition. You can disable it by setting VS Code's typescript.disableAutomaticTypeAcquisition setting to true or creating a jsconfig.json file containing {"typeAcquisition": {"enable": false}}. You'll still have to manually remove previously downloaded type declarations in order for links to take you to the implementation JavaScript files. See this answer for some additional related information.
The cache is most probably generated by the mentioned extension. You should not use it to get Typescript Typings, because Typescript's intellisense works out of the box very well.
Do not forget to install typings for each JS package.
npm install #types/express -D
Also in Typescript you should use import, instead of require:
import * as express from 'express'
I want to have a strongloop example only using javascript without angular.
There's no complete working example without angular for now.
I want to simply include the browser.bundle.js in my index.html, then sync data from/to server side. In fact, I'm trying to replace pouchdb in my program since the couchdb seems not success in open source community.
I can't follow up this document correctly:
Running Loopback in the browser
create browser-app.js with the content from Running Loopback in the browser
copy past the content to browser-app.js
npm install loopback loopback-boot
browserify browser-app.js -o app.bundle.js Then I got error: Error: Cannot find module 'loopback-boot#instructions' from '/Users/simba/Projects/traveller-app/client/node_modules/loopback-boot'
There are few steps for this but its pretty simple.
Bootstrap your application via slc loopback.
Delete server/boot/root.js.
Uncomment two lines in server/server.js, it should look like:
...
// -- Mount static files here--
// All static middleware should be registered at the end, as all requests
// passing the static middleware are hitting the file system
// Example:
var path = require('path'); //this line is now uncommented
app.use(loopback.static(path.resolve(__dirname, '../client'))); //this line is now uncommented
...
Create index.html in the client dir (ie. client/index.html) with your contents.
That should get you a basic set up with just a basic front-end working. Let me know if you have any more issues.