WSL2 runs a real Linux kernel in Windows 10 and it's managing a virtual machine platform underneath (and not visible to) Hyper-V client tools, then why not just let WSL2 handle containers for us? That's exactly what the Docker Desklop WSL 2 Tech Preview aims to do.
I love Entity Framework. I also like (not love) nHibernate. That’s right, as a DBA and data professional, I’m telling you I love Object/Relational Mapping tools (ORM). I think this is a technology set that the DBA needs to more tightly embrace. Let me tell you why.
Ionic has been around for two years now. It is a great set of tools for developing hybrid applications based on AngularJS. Ionic is extremely popular at the moment, with more than one million applications built and a growing community of thousands of developers.
Almost overnight, Docker has become the de facto standard that developers and system administrators use for packaging, deploying, and running distributed applications. It provides tools for simplifying DevOps by enabling developers to create templates called images that can be used to create lightweight virtual machines called containers, which include their applications and all of their applications’ dependencies.
Node.js Tools 1.0 for Visual Studio (NTVS) is now available for download! NTVS is a free, open source extension for Visual Studio 2012 and Visual Studio 2013 that turns Visual Studio into a Node.js IDE. NTVS 1.0 supports the free Visual Studio Community and Visual Studio Express for Web editions, as well as Visual Studio Professional and higher
error MSB4006: There is a circular dependency in the target dependency graph involving target "GetEFProjectMetadata"
Exception calling "GetItem" with "1" argument(s): "Value does not fall within the expected range."
At F:\projects\MvcProject\PPU\packages\RazorGenerator.Mvc.2.3.6\tools\RazorGenerator.psm1:63 char:21
+ ... $solutionExplorer.GetItem("$SolutionName\$ProjectName$rel ...
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : NotSpecified: (:) [], MethodInvocationException
+ FullyQualifiedErrorId : ArgumentException 
import axios from "axios";
componentDidMount() {
const promise = axios.get("https://localhost:5001/api/posts");
console.log(promise);
} 
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("ReactCorsPolicy",
builder => builder
.AllowAnyMethod()
.AllowAnyHeader()
.WithOrigins("http://localhost:3000")
.AllowCredentials()
.Build());
});
services.AddSingleton<IPostsDataSource, PostsDataSource>();
services.AddControllers();
} public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseHttpsRedirection();
app.UseRouting();
//app.UseAuthentication();
//app.UseAuthorization();
app.UseCors("ReactCorsPolicy");
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
} 
async componentDidMount() {
const promise = axios.get("https://localhost:5001/api/posts");
console.log(promise);
const response = await promise;
console.log(response);
} 
async componentDidMount() {
const response = await axios.get("https://localhost:5001/api/posts");
console.log(response);
} class App extends Component {
state = {
posts: []
};
async componentDidMount() {
const { data: posts } = await axios.get("https://localhost:5001/api/posts");
this.setState({ posts }); // = { posts: posts }
} 
const apiEndpoint = "https://localhost:5001/api/posts";
class App extends Component {
state = {
posts: []
};
async componentDidMount() {
const { data: posts } = await axios.get(apiEndpoint);
this.setState({ posts });
}
handleAdd = async () => {
const newPost = {
title: "new Title ...",
body: "new Body ...",
userId: 1
};
const { data: post } = await axios.post(apiEndpoint, newPost);
console.log(post);
const posts = [post, ...this.state.posts];
this.setState({ posts });
}; 
handleUpdate = async post => {
post.title = "Updated";
const { data: updatedPost } = await axios.put(
`${apiEndpoint}/${post.id}`,
post
);
console.log(updatedPost);
const posts = [...this.state.posts];
const index = posts.indexOf(post);
posts[index] = { ...post };
this.setState({ posts });
}; 
handleDelete = async post => {
await axios.delete(`${apiEndpoint}/${post.id}`);
const posts = this.state.posts.filter(item => item.id !== post.id);
this.setState({ posts });
}; > create-react-app sample-15 > cd sample-15 > npm start
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
> npm i react-router-dom --save
import { BrowserRouter } from "react-router-dom"; ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
); import React from "react";
const NavBar = () => {
return (
<nav className="navbar bg-dark navbar-dark navbar-expand-sm">
<div className="navbar-nav">
<a className="nav-item nav-link" href="/">
Home
</a>
<a className="nav-item nav-link" href="/products">
Products
</a>
<a className="nav-item nav-link" href="/posts/2018/06">
Posts
</a>
<a className="nav-item nav-link" href="/admin">
Admin
</a>
</div>
</nav>
);
};
export default NavBar; 
import "./App.css";
import React, { Component } from "react";
import NavBar from "./components/navbar";
class App extends Component {
render() {
return (
<div>
<NavBar />
</div>
);
}
}
export default App; import "./App.css";
import React, { Component } from "react";
import { Route } from "react-router-dom";
import Dashboard from "./components/admin/dashboard";
import Home from "./components/home";
import NavBar from "./components/navbar";
import Posts from "./components/posts";
import Products from "./components/products";
class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Route path="/products" component={Products} />
<Route path="/posts" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</div>
</div>
);
}
}
export default App; import React, { Component } from "react";
class Products extends Component {
state = {
products: [
{ id: 1, name: "Product 1" },
{ id: 2, name: "Product 2" },
{ id: 3, name: "Product 3" }
]
};
render() {
return (
<div>
<h1>Products</h1>
<ul>
{this.state.products.map(product => (
<li key={product.id}>
<a href={`/products/${product.id}`}>{product.name}</a>
</li>
))}
</ul>
</div>
);
}
}
export default Products; import React from "react";
const Home = () => {
return <h1>Home</h1>;
};
export default Home; import React from "react";
const Posts = () => {
return (
<div>
<h1>Posts</h1>
Year: , Month:
</div>
);
};
export default Posts; import React from "react";
const Dashboard = ({ match }) => {
return (
<div>
<h1>Admin Dashboard</h1>
</div>
);
};
export default Dashboard; 
<div className="container">
<Route path="/products" component={Products} />
<Route path="/posts" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</div> <Route path="/" exact component={Home} /> 
import { Route, Switch } from "react-router-dom"; class App extends Component {
render() {
return (
<div>
<NavBar />
<div className="container">
<Switch>
<Route path="/products" component={Products} />
<Route path="/posts" component={Posts} />
<Route path="/admin" component={Dashboard} />
<Route path="/" component={Home} />
</Switch>
</div>
</div>
);
}
} import React from "react";
import { Link } from "react-router-dom";
const NavBar = () => {
return (
<nav className="navbar bg-dark navbar-dark navbar-expand-sm">
<div className="navbar-nav">
<Link className="nav-item nav-link" to="/">
Home
</Link>
<Link className="nav-item nav-link" to="/products">
Products
</Link>
<Link className="nav-item nav-link" to="/posts/2018/06">
Posts
</Link>
<Link className="nav-item nav-link" to="/admin">
Admin
</Link>
</div>
</nav>
);
};
export default NavBar; 
<Route
path="/products"
render={() => <Products param1="123" param2="456" />}
/> 
<Route
path="/products"
render={props => (
<Products param1="123" param2="456" {...props} />
)}
/> 