Develop Reference

How to configure the fetch() URL depending on the environment in ASP.NET Core?

I have a Visual Studio 2019 Solution containing 2 projects:
An ASP.NET Core Web App (Razor Pages) project
An ASP.NET Core Web API project
I am using the Fetch API to make JavaScript calls to the Web API from Razor Pages in the Razor Pages application.
For example:
fetch("https://localhost:44325/api/Customer/12")
.then(response => response.json())
.then(data => processData(data))
.catch(err => showError(err));
How do I configure the url (the first parameter to the fetch() call above) depending on the environment that the Web App is running please - i.e. development (as above), staging, production etc?

How do I configure the url (the first parameter to the fetch() call
above) depending on the environment that the Web App is running please
i.e. development (as above), staging, production etc?
First, based on the environments to add multiple appsettings.Environment.json : For example, the appsettings.Production.json and appsettings.Development.json files:
appsettings.Production.json:
{
"API": {
"URL": "https://localhost:44325/api/Customer/12", //store the url
"Environment": "Production"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
}
}
Then, in the View Page, use the #inject directive to add the IConfiguration, then you could access the configuration value from the view page. And then you can use a hidden field to store the Api URL, before using the Tetch Api, use the Jquery to find the hidden field and get the URL.
#inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnv
#inject Microsoft.Extensions.Configuration.IConfiguration configuration
<p> ASPNETCORE_ENVIRONMENT = #hostingEnv.EnvironmentName</p>
<p> ASPNETCORE_ENVIRONMENT = #configuration["API:Environment"]</p>
<p> API URl : <span>#configuration["API:URL"]</span></p>
<input type="hidden" id="hid_apiurl" value="#configuration["API:URL"]" />
The result as below:

I was looking for something similar and I found this article.
https://www.thecodebuzz.com/set-appsettings-json-dynamically-dev-and-release-environments-asp-net-core/
You can have multiple types of appsettings.json files with configuration details that are specific to DEV, TEST Or STAGING, and PROD.
Then just define your url in the setting file such as
appsettings.Development.json
{
"ApiUrls": {
"CustomerApi": "https://localhost:44325/api/Customer/12",
}
}
appsettings.prod.json
{
"ApiUrls": {
"CustomerApi": "https://productionurlblablabla/api/Customer/12",
}
}
etc. It is all described there it worked for me but I am not an author of that so feel free to read and good luck with that.

VueJS: How to use routing in an Multi Page App to send url query params?

I'm a bit new to VueJS, I am using the MPA approach in VueJS to create an App with multiple pages (using this answer) and I want to have a query parameter in the url that navigates to the signup page from the pricing page like "localhost:8080/signup?bundle=standard"
this is my pages structure:
(image)
I used vue router and router link to do this, but I don't know where to put
the router view as in the docs they only use it in a single page application.
How can I achieve this? How can I get the query params in a MPA app structure?

There are couple of ways for the redirection with parameter in vue.js you can simply make redirection from any method as follows:
setTimeout(() => {
return this.$router.push({name: 'Your_Router_Name_Hear', params: { bundle: 'standard' }})
}, 100);
Another way is redirection from your template with parameters:
<router-link:to="{ name: 'Your_Router_Name_Hear', params: { bundle: 'standard' }}" class="button" >
<i class="fa fa-edit"></i> Edit
</router-link>

Restricting views using meteor-roles and iron-meteor works only in certain conditions

All of this is from the routes.js file...
First, just three routes for a new operation and then two views that list those items differently depending on role; one for director and one for actor.
/////////////////////////////////////////////////////////
// Routes
Router.route('/:_id/new_audition', {
name: 'newAudition',
controller: 'NewAuditionController',
action: 'new',
where: 'client'
});
Router.route('/:_id/feed', {
name: ':UserFeed',
controller: 'FeedController',
action: 'view',
where: 'client'
});
Router.route('/:_id/list_auditions', {
name: 'listAuditions',
controller: 'ListAuditionsController',
action: 'view',
where: 'client'
});
Then I'm just defining onBeforeAction behaviours so that actors users can view the list_auditions view and directors have access to the other two.
/////////////////////////////////////////////////////////
// Functions for use with Router Hooks
var forDirectorsOnly = function() {
if (!Roles.userIsInRole(Meteor.user(), 'director')) {
toastr.error("Only directors can view that page", "Invalid Permissions");
Router.go("myProfile");
}
else {
console.log("Director trying to view a page");
this.next();
}
};
var forActorsOnly = function() {
if(!Roles.userIsInRole(Meteor.user(), 'actor')) {
toastr.error("Only actors can view that page", "Invalid Permissions");
Router.go("myProfile");
}
else {
console.log("Actor trying to view a page");
this.next();
}
};
/////////////////////////////////////////////////////////
// onBeforeAction Declarations
Router.onBeforeAction(forDirectorsOnly, {only: ['UserFeed', 'newAudition']});
Router.onBeforeAction(forActorsOnly, {only: ['listAuditions']});
This is what's happening:
I'll sign in as a director and go to the UserFeed route and it displays just fine. (the console.log message doesn't display though.)
I then go to the newAudition route and it redirects and displays a permissions error.
The weird thing is that when I press Back in my browser, it displays the newAudition view correctly (and the console.log message also displays.)
Finally, going to the listAuditions view correctly denies me permissions and even trying to go Back via browser continues to deny me access.
I'm at my wits end with this, I've looked at every possible question about this and tried reading the iron router documentation and meteor-roles documentation to see what was happening but I can't figure this out. Any help would be appreciated.

Instead of Router.go(routeName) in your onBeforeAction hooks use this.render(routeName). I'm not sure why exactly this is the case but using Router.go() inside a onBeforeAction results in the kinds of behaviors you are describing.

instead of restricting the access to the routes and redirecting, you could try something like the following the template:
<template name="newAudition">
{{#isInRole "director"}}
You cannot view this page. Go to Profile.
{{/if}}
{{#isInRole "actor"}}
How the New Audition Content
{{/if}}
</template>
Also, show/hide your navigation links based on the user role.

Mean.js Multiple Layouts, Server or Angular Layout

I've been developing a mean.js application. I have an admin theme that I'm trying to integrate with the existing application.
My question is
Can we have multiple Server Layouts, ? If the logged-in user is Regular User, use layout-1 if the user is Admin use layout-2
If we cannot have multiple server layout (I presume it isn't possible). Is there any way to detect the params or scope variable in the Angular Client App and dynamically load a partial inside the main Layout.
Let say I have an Index.html file, if the intended route is Dashboard, I just replace a section of the page view, ( Ruby on Rails Developers would know this)
UPDATE 1 :
I've created 2 files with my required Admin Index, and Layout files.
admin.index.server.view.html
and
admin.layout.server.view.html
I've also added the following code in my core.server.routes.js
module.exports = function(app) {
// Root routing
var core = require('../../app/controllers/core');
app.route('/').get(core.index);
app.route('/admin/').get(core.adminIndex);
};
I've also added the following code in my core.server.controller.js
exports.adminIndex = function(req, res) {
res.render('admin.index', {
user: req.user || null
});
};
and when I hit localhost:3000/admin/ I get Error: Cannot find module 'index'

Rename the two view files from admin.index.server.view.html and admin.layout.server.view.html to admin-index.server.view.html and admin-index.server.view.html respectively.
Also, change this line in your core.server.controller.js file;
res.render('admin.index', {
to this;
res.render('admin-index', {

How to link JS route var and Symfony 2 URLs

I would like to know what is the most flexible solution to link SF2 routes & a JS var which is containing the routes.
For static routes, I don't have any problems, but when I want to connect URL with parameters, i did not find any solution (not hard-coded).
How can I do if I edit the routing.yml file, Dynamics URL on change
I'm using var url = "domain.com/path/to/url/with/" + token + "/and/" + name for generating but it is not flexible.
I know that twig generated urls are server side etc...
Any solutions ?
Ex :
JS
var route = {
home : "{{ path("home") }}",
custom_route : "{{ path("my_custom_route") }}"
}
Routing.yml
my_custom_route:
pattern: /path/to/url/with/{token}/and/{name}
defaults: { _controller: "SupboxCloudBundle:Public:file" }

I think you could try FOSJSRoutingBundle.

Well, this sort of depends on the result you are trying to achieve. Are you doing this in some sort of JS app?
If it were me, I would render the routes, or route parameters in the DOM. I wouldn't mess with rendering anything in the JS and I would make the JS code abstract.
For instance:
<div data-custom="{{ path("my_custom_route") }}"></div>
<div data-home="{{ path('home') }}"
or
whatever
then you can grab your routes in JS when needed (from the first example):
var route = {
home: $('div[data-home]').data('home'),
custom_route: $('div[data-custom]').data('custom')
}
This is a little messy as I'm just trying to show you a concept. However your actual implementation would depend on the actual result you are trying to achieve.
If you comment a more specific intent below I will provide a better solution for you.