I am working with nestjs. I implemented i18n from the following tutorial available on the [nestjs-i18][1]n
To my surprise when I add the following configurations in the app module it messes up with my passport local strategy.
imports: [
I18nModule.forRoot({
fallbackLanguage: 'en',
parser: I18nJsonParser,
parserOptions: {
path: path.join(__dirname, '/i18n/'),
},
}),
],
when I try to login it gives the following error:
Unknown authentication strategy "local"
My local passport strategy works fine if I remove the i18n configurations from the app module. I cannot understand the link between these two.
could somebody please let me know how these two are interconnected?
Related
The situation so far:
I've got a Strapi instance running on default port 1337. DNS is correctly set up to navigate traffic from cms.mysite.com to the public IP address of the server and an IIS website is configured with a reverse proxy to direct traffic from cms.mysite.com to port 1337. Strapi itself is instructed to fire up on server
"power on" via a scheduled task and cmd command. I've also set up an SSL certificate such that secure communication with https://cms.mysite.com is possible.
The problem:
When I navigate to https://cms.mysite.com from a browser outside of the server, I correctly get the "home" page for the headless CMS.
But if I click "Open the administration", I'm hit with a CSP error
I'm sure I'm missing a step. I have not configured anything specifically after following the official Hands-on tutorial. I feel like it's something to do with the security middleware, specifically security header with relation to Content Security Policy, but it's difficult to know exactly what to do with the config/middleware.js file.
A little help is mighty appreciated.
Edit: I feel like this is actually a reverse proxy issue since if I replace localhost in the error https://localhost:1337/admin/project-type with https://cms.mysite.com/admin/project-type I get a valid response:
Ran into the same issue.
First, changed the default security middleware in /config/middlewares.js
// ...
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'http:', 'https:'],
upgradeInsecureRequests: null,
},
},
},
},
// ...
After that I found out that admin assets where still loading from localhost:1337.
So, after looking at this issue on GH, I set the url param in config/server.js. Seems to have helped.
Hope this helps!
P.S. And don't forget to re-build everything after making changes to the configs.
If you need to config CORS, here is an example:
//middlewares.js
module.exports = [
'strapi::errors',
'strapi::security',
'strapi::poweredBy',
{
name: 'strapi::cors',
config: {
enabled: true,
headers: '*',
origin: ['http://localhost:1337', 'http://example2']
}
},
'strapi::logger',
'strapi::query',
'strapi::body',
'strapi::session',
'strapi::favicon',
'strapi::public',
];
I have hit an issue that I have struggled to figure out for the last little while regarding docker. Here is a shortened version of the story
In my development environment (everything is running on localhost), code works great, whenever I add my authorization token in my headers keycloak-connect detects it and works as usual. The problem occurs when I use it in docker and add custom network interfaces.
When the docker container boots up, I have it connect to keycloak via http://keycloak:8080/auth and generate the realm. That works fine, not an issue, thus I know that the keycloak network is up and running as expected. I am able to remote into the container, communicate with keycloak, get a token and etc...
In my graphql application, I use keycloak-connect-graphql to set the context of the graphql application which in turn uses keycloak-connect to set up all the headers. The problem is, that keycloak-connect-graphql tells me that there is no header.If I simply print out the request, I can clearly tell that there is a token being passed in, it's just that for some reason, keycloak-connect-graphql/keycloak-connect does not want to set it because I am using a different network besides localhost.
I was actually able to side-step this problem in production by setting the keycloak url to be a the public url (https://keycloak.DOMAINNAME.com) which makes absolutely no sense to me because http://keycloak:8080/auth does not work. I have digged through keycloak-connect and the keycloak-connect-graphql code and I could not find anything relating to a CORS issue or something else suspicious. If anyone has any ideas please let me know. This bug has been driving me crazy.
Code snippet:
keycloak configuration (app.config)
keycloak: {
realm: process.env.KEYCLOAK_REALM,
'auth-server-url': 'http://keycloak:8080/auth',
'ssl-required': 'none',
resource: process.env.KEYCLOAK_RESOURCE,
'public-client': true,
'use-resource-role-mappings': true,
'confidential-port': 0,
},
configurekeycloak.js
function configureKeycloak(app, graphqlPath) {
const keycloakConfig = require('../config/app.config').keycloak;
const memoryStore = new session.MemoryStore();
app.use(
session({
secret:
process.env.SESSION_SECRET_STRING || 'this should be a long secret',
resave: false,
saveUninitialized: true,
store: memoryStore,
}),
);
const keycloak = new Keycloak(
{
store: memoryStore,
},
keycloakConfig,
);
// Install general keycloak middleware
app.use(
keycloak.middleware({
admin: graphqlPath,
}),
);
// Protect the main route for all graphql services
// Disable unauthenticated access
app.use(graphqlPath, keycloak.middleware());
return { keycloak };
}
index.js
// perform the standard keycloak-connect middleware setup on our app
const { keycloak } = configureKeycloak(app, graphqlPath);
// Ensure entire GraphQL Api can only be accessed by authenticated users
app.use(playgroundPath, keycloak.protect());
const server = new ApolloServer({
gateway,
// uploads: false,
// Apollo Graph Manager (previously known as Apollo Engine)
// When enabled and an `ENGINE_API_KEY` is set in the environment,
// provides metrics, schema management and trace reporting.
engine: false,
// Subscriptions are unsupported but planned for a future Gateway version.
subscriptions: false,
// Disable default playground
playground: true,
context: ({ req }) => {
return {
kauth: new KeycloakContext({ req }),
};
},
// Tracing must be enabled for this plugin to add the headers
tracing: true,
// Register the plugin
plugins: [ServerTimingPlugin],
});
Edit:
setting network_mode to host fixes the issue, but I much prefer using dockers integrated networks rather than using network_mode host, especially for production
Edit 2:
I was able to reproduce the error in my local development environment (without shelling into docker and then debugging from there). I was able to do this buy using the IP address provided by docker. This yields the same results. I have narrowed the issue down to keycloak-connect, which for some reason, does no want to connect to keycloak or something. Still not sure
I have a single-page application with my own JS framework using HTML5 history API. Then I'm using a apache server to serve the first page (index.php). I also have webpack and Browsersync.
My issue is when I want to sync clicks using the history API with Browsersync, nothing happens. I read that I have to use connect-history-api-fallback as middleware with Browsersync. Here is my Browsersync config:
new BrowserSyncPlugin({
host : 'localhost',
middleware : [ historyFallback() ],
proxy: {
target : 'http://project.local',
middleware :[ historyFallback() ],
}
},{
reload: false,
})
But it is doing nothing: my clicks are not synced between browsers.
Am I correctly configuring Browsersync, or does the problem come from another thing?
I may not be clear enough; don't hesitate to ask if you need more details.
I'm working on an ejected Create React App project, and looking at the docs on webpack dev server, they seem a little bare: https://webpack.js.org/configuration/dev-server/#devserver-before
but I'm trying to see if it's possible to do something like:
before(app){
// read cookie for user session
// send user ID in cookie to external API
// retrieve user object from API
// attach user object to response, to be _somehow_ accessed via the React app client side
}
I know this is pseudo code, but I'm very unclear about what exactly you can do within this middleware, in terms of hooking into Create React App's rendering of the index.html and aforementioned client-side React app
In the docs, it says you could define a route handler, like so:
app.get('/some/path', function(req, res) { }
but I don't feel like that's going to be useful, as you wouldn't then be able to hook back into Webpack dev server's rendering process?
You can try adding this in your webpack config file, and practically you can use it as a mock server. Here is an example of how I configured mine and hope it helps.
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
before:(app) => {
app.post('/user/login', function(req, res, next) {
res.json({success: true})
});
}
},
In Webpack 5 you can get this goodness by configuring devServer.onBeforeSetupMiddleware.
Angies' answer applies to Webpack 4 devServer.before configurations.
we are migrating our web app from ASP.NET and jQuery to Node.js with Express and React. We are using the typical multipage application (MVC), and we are confortable with this architecture and we need it for some special cases (basically SEO, and we know that with react now you can improve the SEO).
We want to maintain our routes without using React Router, we are going to use Express MVC Router but we want to use WebPack 2 with React.
The first step was migrating the BackEnd (we are almost done), and the second part is migrate the frontend from jQuery to React (yes, React like UI Library, we don't want Redux and we can work fine with just Component State because our pages are not very complex, and we want to reuse components).
Like we are using MVC Express routes we need to use Code Spliting from WebPack 2 to generate multiple entries for each page (js files), and we want to integrate typical stuff for make more productive: live reload, production build js, etc.
We have one example working of WebPack for creating the Entry libraries, and vendors and common, but we don't know how to integrate with our server.js (Express app), and have a good flow...
Example WebPack config:
var path = require('path')
var webpack = require('webpack')
var config = {
entry: {
vendors: ['react', 'lodash'],
common: ['lodash'],
home: path.resolve(__dirname, './src/main'),
page1: path.resolve(__dirname, './src/page1'),
page2: path.resolve(__dirname, './src/page2'),
},
output: {
path: path.join(__dirname, 'js'),
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
devtool: 'source-map',
devServer: {
inline: true,
contentBase: './src',
port: 3000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false
},
compress: {
warnings: false,
screw_ie8: true
}
}),
new webpack.optimize.CommonsChunkPlugin({
names: ["common", "vendors"],
minChunks: Infinity
})
]
}
if (process.env.NODE_ENV === 'production') {
config.output.path = path.join(__dirname, 'dist/')
/*
Note: by default, React will be in development mode
see https://facebook.github.io/react/downloads.html
*/
config.plugins.push(new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
}))
}
module.exports = config
My question is... Can we get this working with Express and live reload? Like we do with create-react-app? Any link or tutorial to explain how to work with Multipage applications and WebPack together?
Thanks!
I'm the author of quickstart-express-react. We're apparently facing similar challenges, so I've updated the repo to better illustrate your usage scenario.
The basic idea, if you're looking to build an MPA and need both "generic" reloading and react hot reloading during development, you can use browsersync programatically as a proxy, and - very importantly run webpack-dev-middleware & webpack-hot-middleware inside browsersync and not your website/application.
It took me a week of trial & error to build that scenario, hence the decision to open-source it on GitHub.
Other things to consider:
Be careful to use the latest webpack & loaders/plugins, i.e. webpack#^2.2.1 and react-hot-loader#^3.0.0-beta.6 at the moment, keep an eye on their repos and update if you're facing problems;
If you're coming from ASP.NET, you'll probably be interested in Vash template engine.
IMO, at the moment webpack and its entire loaders/plugins ecosystem is cutting-edge and evolving fast, and as you've seen, building a realistic workflow configuration is close to madness. But the benefits of having full reloading during development are tremendous.
Hopefully the madness will change, now that webpack#2 is finally out of beta.
Hope this helps, and thank you starring the repo :-)
A quick update on a potentially different approach - although I published the quickstart-express-react two months ago, I like to keep an open mind and I'm still researching other alternatives for a better developer experience. And I might have found one.
Since you wrote you've almost finished porting the backend, this is probably not what you're looking for right now, but for future projects make sure to check and keep an eye on next.js, especially if you're interested in building isomorphic/universal react apps. I think the guys at ZEIT are doing an extraordinary job of simplifying the entire development workflow, especially considering the current state of the webpack ecosystem.
I'm currently looking for a sane way of building universal React websites/apps with react-toolbox components, and next.js does look promising, especially for a single/independent developer or a small team not wanting to deal with the full complexity of setting up a webpack scenario from scratch.
They're also offering a fantastic cloud deployment solution, but it's worth mentioning that next.js is fully open-source (MIT license) and it can be used in dev/prod on any infrastructure.
Disclaimer: I am in now way affiliated with ZEIT. I was just thrilled when I came across next.js a few days ago... :-)