I have a web page made with .Net Core 2.1 and Vue, when the web application is in production mode, how to leave a config file as the Net Core appsettings.json and modify a variable.
My doubt is also about how to build the content of it, and how to access to that variable in one of my component page in vue.
Thank you
Sounds like what you may be after is External Configuration Store pattern
https://learn.microsoft.com/en-us/azure/architecture/patterns/external-configuration-store
This will allow you to store the configuration information in external storage, and provide an interface that can be used to quickly and efficiently read and update configuration settings
Related
I am currently building a SPA app using Vue.js and webpack to do our bundling. The backend API is built with .Net Core. When running locally, the Vue app is hitting localhost on the backend. I need to be able to change the route of the API dynamically based on the environment. Is there a way to do this without having to do a big switch statement that considers the current url? A requirement is that we are not allowed to change the webpack bundle for different environments, in other words, once it is bundled, it has to stay bundled. I have tried to pass static config files through to the bundle and dynamically change them based on the environment, but unfortunately that does not work, as it hits the values that were originally in them.
webpack dev server has a proxy capability. You could use this to proxy to your locally running backend when developing.
https://webpack.js.org/configuration/dev-server/#devserver-proxy
e.g. you can point anything from '/api' to 'localhost:8888/api' with the config.
Is your app the backend running on the same url when deployed? If not, you'll likely need a reverse proxy to pass along the requests to the backend.
You can use an axios interceptor so you only have that switch in one place:
axios.interceptors.request.use(config => {
// check location.host name and append the backend url you want
});
see https://github.com/axios/axios#interceptors
However, this is a little dangerous as the URLs in your switch statement will be strings, and therefore all of your environment URLs can be pulled out of your code even if minified/concatenated.
Another option is to add some sort of endpoint to the server your client side code is hosted, and when you start your app, query for that configuration.
How do you read a content directory into Blazor.
I tried
Path.Combine(Directory.GetCurrentDirectory(), "..", "_posts");
But this throws an error.
Uncaught (in promise) Error: System.IO.DirectoryNotFoundException: Could not find a part of the path '/_posts'.
The answer depends on why you want to read the directory
If you want to interact with the user's file system, then you need to use the HTML standard for accessing the file system. A blazor wrapper is provided at https://github.com/Tewr/BlazorFileReader
If you want to retrieve files from your server, there are multiple approaches based on how you want to use it. You could set up an api, an mvc instance, or just serve static files. They'll all be relative to your server though, not the current directory.
If you want store data client-side, Flores made a good suggestion to use https://github.com/BlazorExtensions/Storage
Clientside Blazor is running in the same sandbox that javascript is running in. Which means your code has no way of accessing the local filesystem.
Maybe localStorage could be an alternative for you? There is a Blazor package to use it here: BlazorExtensions/Storage
I am using a lot of nunjucks templates and custom api endpoints with keystone. Does setting node_env=production cache template return data, especially since it has a lot of dynamic info. Does it cache the rendered or just template file? Also, what about custom /api endpoints ... assuming that data is not cached? How about database results? Thanks for any info.
The NODE_ENV setting is an Express convention, so the effects apply to Express and related middleware rather than Keystone core. If you have added any Express middleware packages, you'll have to check their usage documentation for possible behaviour changes.
Setting NODE_ENV to “production” makes Express:
Cache view templates.
Cache CSS files generated from CSS extensions.
Generate less verbose error messages.
I am using a lot of nunjucks templates and custom api endpoints with keystone. Does setting node_env=production cache template return data, especially since it has a lot of dynamic info. Does it cache the rendered or just template file?
Express only caches the view templates in memory, not the rendered result. Pages will still be re-rendered on every request using relevant variables. There's a note about this buried at the bottom of Express' Using Template Engines documentation.
what about custom /api endpoints ... assuming that data is not cached?
Express does not do not include any caching for API endpoints by default.
How about database results?
The MongoDB Node.js driver (and Mongoose ODM) do not cache query results.
What are the best practices (and how to go about doing it) to support offline mode when using html5 history api for url rewrites?
For example, (hypothetically) I have a PWA SPA application at https://abc.xyz which has internationalization built in. So when I visit this link, the Vue router (which ideally could be any framework - vue, react, angular etc.) redirect me to https://abc.xyz/en.
This works perfectly when I am online (ofcourse, the webserver is also handling this redirect so that app works even if you directly visit the said link).
However, its a different story when I am offline. The service worker caches all resources correctly so when I visit the URL https://abc.xyz everything loads up as expected. However, now if I manually type the URL to https://abc.xyz/en, the app fails to load up.
Any pointers on how to achieve this?
Link to same question in github: https://github.com/vuejs-templates/pwa/issues/188
Yes, this is possible quite trivially with Service Workers. All you have to do is to configure the navigateFallback property of sw-precache properly. It has to point to the cached asset you want the service worker to fetch if it encounters a cache miss.
In the template you posted, you should be good to go if you configure your SWPrecache Webpack Plugin as follows:
new SWPrecacheWebpackPlugin({
...
navigateFallback: '/index.html'
...
})
Again, it is absolutely mandatory that the thing you put inside navigateFallback is cached by the Service Worker already, otherwise this will fail silently.
You can verify if everything was configured correctly by checking two things in your webpack generated service-worker.js:
the precacheConfig Array contains ['/index.html', ...]
in the fetch interceptor of the service worker (at the bottom of the file), the variable navigateFallback is set to the value you configured
If your final App is hosted in a subdirectory, for example when hosting it on Github pages, you also have to configure the stripPrefix and replacePrefix Options correctly.
If I have a custom .browser file, and I want to evaluate what will happen if it is given a particular User Agent, is there any way to do that through the .NET API?
I was attempting to use HttpBrowserCapabilites, but I'm not sure how to load a custom .browser file into that class.
Normally, you should not have to explicitly load the HttpBrowserCapabilities class; ASP.NET will load it for you, as long as you have your .browser file in the right place (in App_Browsers).
However, testing it will be another problem. You can't modify the "User-Agent" HTTP Header from within either the HttpApplication (global.asax) or a custom HttpModule.
This leaves only awkward techniques, such as using Reflection to force the value, or using an external tool (such as Fiddler). Alternately, if you're good with C/C++, you could take a simple example for an ISAPI filter and modify it, then install it in IIS.
Install the User Agent Switcher Firefox extension. It will let you adjust the user agent the browser sends to the web server.
http://chrispederick.com/work/user-agent-switcher/