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.
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 Vue.JS front app with nodeJS backend based on expressJS. ExpressJS also used as web server for statically built Vue.JS app
Front app communicates with express backend via rest and websocket. It uses url host from window.location instance and easily communicates with backend
In production mode, when built application in static expressJS server area, everything work perfect
In dev mode, Vue use it's own web server, and backend urls based on window.location are incorrect because no expresJS on same host and port.
So my question is it possible change some code blocks if running in dev mode ?
Like something this :
if( devmode)
{
const url = "http://somebackendhost/rest"
}
else {
const url = location.host ....
}
}
I will assume you are developing your Vue app using Vue CLI
Changing app behavior depending on environment
In Vue CLI you can use Environment Variables
if(process.env.NODE_ENV === "development")
{
}
This works thanks to Webpack's Define plugin and big advantage is that process.env.NODE_ENV is replaced at build time by the real value. So in production build Webpack will see just if("production" === "development") {} and happily removes the code in optimization phase because it knows this can never be true
Better solution
But I would not use this approach for your problem. Using different API server (not same as the server used for serving Vue SPA) can easily lead to CORS problems
Exactly for this use case, Vue CLI (and Webpack Dev server used under the hood) supports proxying
vue.config.js
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://localhost:58300/',
ws: true, // websockets
changeOrigin: true,
}
}
},
},
This config makes Vue Dev server to proxy any request to /api to other server running at http://localhost:58300/ (your node/express app) and change the origin (so browser thinks response came from the dev server)
All of this can be done without Vue CLI but you will need to set it up by yourself in Webpack config...
The problem
You can't access this information from your browser.
But there are three solutions:
Solution #1
On compilation time create a variable in code which defines devmode (const devmode = true;)
Solution #2
Because your bundler can minify your variable names or changing the scope for security reasons, may be the situation where you can't access it.
So second solution is to define devmode in your localStorage.
Solution #3
Third solution is almost the best.
If you are developing, you are probably accessing your web app via localhost.
location.hostname will return the name of host, so you can make something like:
const devmode = location.hotname == 'localhost';
Best solution
Do not do this. Develop a fully working web app using local REST API and define the URL of REST API in some variable, so when you are preparing your production app, you or compiler just changes the URL adress variable in code of your REST API.
Why is this the best solution?
Because it do not impacts your end-user's performance and they will be loading less code, which is the best practise.
Post Scriptum
Don't forget to remove all devmode codepaths when compiling production version!
I just created a react-node-SQL app and I want it to run on Google Cloud (not firebase)
My React app runs on different port and my node app runs on different port.
I followed this article and added this line in my react-app package.json but I didn't worked out i.e href in button was still going to localhost:8081 but It didn't worked
I had my node running on port 8080, In package.json of my react app i added "proxy": "http://localhost:8080/" and in button when I did href="/api/status" it was going to localhost:8081 on which the react app was running
Now, Is it possible to run both node and react under the same project? or we need to create separate project for them.
[Update:] I am using webpack, In my webpack config file, I added this
devServer: {
proxy: {
'/': 'http://localhost:8080'
}
},
The problem with this, that even in my react app, on Startup (running on 8081) when it opens the webpage localhost:8081/ it throws an error saying cannot get the page
but if I do something like this
devServer: {
proxy: {
'/api': 'http://localhost:8080'
}
},
it opens the page homepage normally. Now my api and callback uRL after authentication aren't configured with have prefix as api.
Basically, when you do an ajax request from react app, like axios or fetch it will use the proxy: <..> for the backend url. But, href doesn't work with proxies. In that case you need to manually configure proxy using the setupProxy.js documented in the manual proxy page.
Check out this issue:
Same error here, it still routes to localhost:3000/api/auth/google, my
CRA version is 2.1.3 It seems http-proxy-middleware is the only
working way. I have to Configuring the Proxy Manually
From the react doc:
If the proxy option is not flexible enough for you, you can get direct
access to the Express app instance and hook up your own proxy
middleware.
You can use this feature in conjunction with the proxy property in
package.json, but it is recommended you consolidate all of your logic
into src/setupProxy.js.
I'm struggling with proper configuration of Browsercync (and maybe some middleware?).
My configuration is like:
local.example.com it's mine local address configured via /etc/hosts.
devel.example.com it's our company devel environment (backend).
staging.example.com it's our company staging environment (backend).
As I'm UI developer I want to use my local code, but work with one of backend environments.
I'm using gulp to build my project etc. It's also has task to run browser-sync and watch file changes. But of course there is now problem with cookies domains that are coming from backend. CSRF token cookie domain is set by browser to currently used backend.
I have tried:
To use middleware http-proxy-middleware with configuration:
server: {
baseDir: './build',
middleware: [
proxyMiddleware('/api', {
target: 'http://devel.example.com',
changeOrigin: true,
})
]
]
But problem I have is that it's doing non-transparent redirects, which are visible in browser console. I thought that it will work like this, that proxy will mask those requests to browser will think that all requests and responses are coming from local.example.com. But it seems that it doesn't work like this (or maybe I configured it badly).
Also big problem with this solution is that it somehow changes my POST HTTP requests to GET (WTF?!).
To use build in browser-sync proxy option. In many tutorials I saw using proxy option with server option, but it seems not work anymore. So I have tried to use it with serveStatic like this:
serveStatic: ['./build'],
proxy: {
target: 'devel.example.com',
cookies: {
stripDomain: false
}
}
But this doesn't work at all...
I would really appriciate for any help in this topic.
Thanks
I'm using SocialCMS Database middleware https://github.com/dai-shi/social-cms-backend with BreezeJS support.
I'm able to save changes to a MongoDB collection fine using manager.saveChanges() and manager.acceptChanges() and retrieve records in local cache using getEntities()
Using this middleware
With BreezeJS support:
var SCB_options = {
mongodb_url: 'mongodb://localhost:27017/socialcmsdb',
breeze_mongo: true,
routes: [{
object_type: 'user',
object_prefix: '/breeze-service/users'
}, {
object_type: 'post',
object_prefix: '/breeze-service/posts'
}, {
object_prefix: '/breeze-service/SaveChanges'
}]
};
How do I retrieve all remote records belonging to a particular route? For example, I want to retrieve all total posts remotely not in the users cache.
Do I modify app.js, my Angular apps datacontext, both or neither?
I solved this problem. It's a bit hard to discern from the Social CMS docs that the routes are local first. Which is great if you want to route without internet access! But I needed to create new routes outside of the SCB_options in order to request mongoDB directly.