Saturday, July 31, 2021
Tuesday, July 27, 2021
Hello, Flask from Google Colab !
Flask is really simple framework.
You can run in it google colab also using flask-ngrok.
Following is a running example in google colab. You need index.html and Welcome.html in the /content folder.
Also note that when you are referencing html files, the file names are case-sensitive! If casing does not match flask will not find the file.
Secondly, you need to tell flask the folder of html file when declaring app=Flask(__name__ , template_foler="XXXX")
#####Flask File
# #!pip install flask
# #!pip install flask-ngrok
from flask import Flask
import flask_ngrok
from flask import Flask, redirect, url_for, request , render_template
app = Flask(__name__, template_folder = "/content")
flask_ngrok.run_with_ngrok(app)
@app.route("/")
def RedirectToMyForm() :
return redirect(url_for("myform" , name="ere"))
@app.route('/greet/<name>')
def greet(name):
#return "Welcome %s" %name #<= This also works for simple situations
return render_template("Welcome.html" , name=name)
@app.route('/myform',methods = ['POST', 'GET'])
def myform():
if request.method == 'POST':
user = request.form['nm'] #this must match "name" control in form (name="nm")
return redirect(url_for('greet',name = user))
else:
return render_template("index.html")
if __name__ == '__main__':
app.run()
index.html
<html>
<head>
</head>
<body>
<form method="POST">
<input type="text" name="nm" placeholder="name"></input>
<button type="submit">Submit</button>
</form>
</body>
</html>
Welcome.html
<html>
<head>
</head>
<body>
<h1>Hi, {{name}} !</h1>
</body>
</html>
Saturday, July 24, 2021
Cluster replication tool for EventStore
https://github.com/benfoster/Ditto
Ditto is a cluster replication tool for Event Store. It works by subscribing to specific streams from a source cluster and replicating them to a destination cluster.
It was designed to be run as a standalone application using Docker and uses Event Store Subscription Groups to subscribe to the source server/cluster.
Most of the code is part of our boilerplate Event Consumer template and automatically takes care of Event Store connection management and logging via Serilog. The application is configured to use Seq locally and Datadog in production.
JSON Generator Script for "generated.json" used in Tim Corey's EF Video
https://www.json-generator.com/
{
Person :[
'{{repeat(100)}}',
{
FirstName: '{{firstName()}}',
LastName: '{{surname()}}',
Age: '{{integer(25, 55)}}',
Addresses : [
'{{repeat(2)}}',
{
StreetAddress: '{{integer(100, 999)}} {{street()}}, {{city()}}, {{state()}}, {{integer(100, 10000)}}',
City : '{{city()}}',
State: '{{state()}}',
ZipCode: '{{integer(10000, 99999)}}-{{integer(1000,9999)}}'
}
],
EmailAddresses : [
{
EmailAddress: '{{email()}}'
}
]
}
]
}
Thursday, July 22, 2021
Wednesday, July 21, 2021
.NET Core Hello World Web App and Docker
1. Create a new web app from command line using the command:
dotnet new web -o myWebApp
2. Open the myWebApp.csproj file. It will have following text:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
</Project>
Change the target framework to netcoreapp3.1 and save the file.
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
</PropertyGroup>
</Project>
3. Create a dockerfile in the project in the same folder as the .csproj file.
Enter the following text in it and save the file.
FROM mcr.microsoft.com/dotnet/aspnet:3.1 AS base
FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build
WORKDIR /src
COPY ["myWebApp.csproj", "."] #captalisation important!!
RUN dotnet restore "./myWebApp.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet publish "myWebApp.csproj" -c Release -o /app/publish
FROM base
WORKDIR /app
COPY --from=build /app/publish .
ENTRYPOINT ["dotnet", "myWebApp.dll"]
Note 1 : The version of .NET core is taken as 3.1, which is matching to the one in .csproj file.
2. Take care of capitalisation of file names. In the above file, if you spell "myWepApp.csproj" as "mywebapp.csproj", docker will not be able to find the file.
4. Check that docker is runing. If not, run the Docker QuickStart Terminal . ( I am talking this about Windows machine below 10, mine is Windows 8.1 and I require docker tool box insalled).
If your docker is running you should get "Running" as a response to "docker-machine status default" command.
docker build -t mywebapptag .
Here mywebapptag is the image tag and "." is the path of docker file /context.
You should get an output like the following:
E:\RajeshWorks\myWebApp>docker build -t mywebapptag .
Sending build context to Docker daemon 20.48kB
Step 1/12 : FROM mcr.microsoft.com/dotnet/aspnet:3.1 AS base
---> dd0cb488d08f
Step 2/12 : FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build
---> 5dbfe879d2f7
Step 3/12 : WORKDIR /src
---> Using cache
---> 8aa0dcb0d5b1
Step 4/12 : COPY ["myWebApp.csproj", "."] #captalisation important!!
---> Using cache
---> 4cfe0fcb97e9
Step 5/12 : RUN dotnet restore "./myWebApp.csproj"
---> Running in faacadf31de2
Determining projects to restore...
Restored /src/myWebApp.csproj (in 219 ms).
Removing intermediate container faacadf31de2
---> a4c8792fa8b1
Step 6/12 : COPY . .
---> 066f423bf5cd
Step 7/12 : WORKDIR "/src/."
---> Running in 2db699fe1c13
Removing intermediate container 2db699fe1c13
---> 04d5b634c493
Step 8/12 : RUN dotnet publish "myWebApp.csproj" -c Release -o /app/publish
---> Running in fe6064693b56
Microsoft (R) Build Engine version 16.7.2+b60ddb6f4 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.
Determining projects to restore...
Restored /src/myWebApp.csproj (in 236 ms).
myWebApp -> /src/bin/Release/netcoreapp3.1/myWebApp.dll
myWebApp -> /app/publish/
Removing intermediate container fe6064693b56
---> dec97175c592
Step 9/12 : FROM base
---> dd0cb488d08f
Step 10/12 : WORKDIR /app
---> Using cache
---> 9af8e3a6945b
Step 11/12 : COPY --from=build /app/publish .
---> 03eba5ecb2f0
Step 12/12 : ENTRYPOINT ["dotnet", "myWebApp.dll"]
---> Running in 7a375a435725
Removing intermediate container 7a375a435725
---> 461cbdc4bee4
Successfully built 461cbdc4bee4
Successfully tagged mywebapptag:latest
SECURITY WARNING: You are building a Docker image from Windows against a non-Win
dows Docker host. All files and directories added to build context will have '-r
wxr-xr-x' permissions. It is recommended to double check and reset permissions f
or sensitive files and directories.
6. The image is now ready, you can confirm it with the command "docker ps -a"
REPOSITORY TAG IMAGE ID CREATED SIZE
mywebapptag latest 27ee7997303a 53 seconds ago 208MB
<none> <none> 44b18da96e75 53 seconds ago 711MB
mcr.microsoft.com/dotnet/aspnet 3.1 dd0cb488d08f 8 days ago 208MB
mcr.microsoft.com/dotnet/sdk 3.1 5dbfe879d2f7 8 days ago 710MB
7. Check the ip of the docker machine, so that you may use it to browse your web site.
"docker-machine ip default"
=> 192.168.99.100
8. Run the docker image :
docker run -d -p 5000:80 --name mywebappcontainer mywebapptag
This will return you a large hex number.
"docker container ls" command will return the following :
CONTAINER ID IMAGE COMMAND CREATED STATUS
6237a2fecded mywebapptag "dotnet myWebApp.dll" 2 minutes ago Up 2 minutes
PORTS NAMES
0.0.0.0:5000->80/tcp mywebappcontainer
9. Browse to the url http://192.168.99.100:5000
You should be able to see "Hello World!".
Note that the IP address is the one we got in step 7.
Official Docker Tutorial issues
The docker web site has given a tutorial at "Dockerize an ASP.NET Core application". I think this tutorial is based on older versions of .net /.net core and hence if you follow the exact steps, you may encounter some issues.
The first issue is directory structure, either the docker runtime or the msbuild, whosoever it is, requires the docker file to be one level up of the folder in which .csproj file is placed. The above tutorial does not take this into account and hence you are most likely encounter an error of project file missing.
It also has a statement "COPY ../engine/examples ./", the engine/example looks cryptic, I have never seen this kind of folders in a .NET project.
I also encountered an environment issue. In my machine, the command "dotnet new webapp -o xxxx" always created a .NET framework project rather than .NET Core Web App. This gave issues while building.
So finally I chose a shortcut, I created a docker enabled web project from Visual Studio 2019 . This gave me an auto-generated dockerfile. But again when running from visual studio, I encountered the error "Visual Studio requirds docker to be running". The solution I found was to start the devenv.exe from bash shell, but I could not start it from bash, it gave me unrecongised command. But fortunately , the auto-generated file could run from command line and it gave me some guidance on dockerising the app.
So my next post will be a step by step guide of creating hello world web app and running it from docker, all from command line.
Sample Docker files for a simple .net core web application
Official Docker file as given here :
# syntax=docker/dockerfile:1
FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build-env
WORKDIR /app
# Copy csproj and restore as distinct layers
COPY *.csproj ./
RUN dotnet restore
# Copy everything else and build
COPY ../engine/examples ./
RUN dotnet publish -c Release -o out
# Build runtime image
FROM mcr.microsoft.com/dotnet/aspnet:3.1
WORKDIR /app
COPY --from=build-env /app/out .
ENTRYPOINT ["dotnet", "aspnetapp.dll"]
Docker file generated by Visual Studio:
#See https://aka.ms/containerfastmode to
#understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
FROM mcr.microsoft.com/dotnet/aspnet:3.1 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build
WORKDIR /src
COPY ["WebApplication1.csproj", "."]
RUN dotnet restore "./WebApplication1.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "WebApplication1.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "WebApplication1.csproj" -c Release -o /app/publish
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "WebApplication1.dll"]
Docker file as seen here:
FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim-arm64v8 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
WORKDIR /src
COPY ["WhatzThat.Web.csproj", "WhatzThat.Web/"]
RUN dotnet restore "WhatzThat.Web/WhatzThat.Web.csproj" -r linux-arm64
WORKDIR "/src/WhatzThat.Web"
COPY . .
RUN dotnet build "WhatzThat.Web.csproj" -c Release -o /app/build
FROM build AS publish
RUN dotnet publish "WhatzThat.Web.csproj" -c Release -o /app/publish -r linux-arm64 --self-contained false --no-restore
FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "WhatzThat.Web.dll"]
Docker
docker quickstart "C:\Program Files\Git\bin\bash.exe" --login -i "D:\Installations\Docker Toolbox\start.sh"
docker toolbox installable : Docker Toolbox-19.03.1 (231 MB) 2,36,837 kb
docker info
docker-machine ip default
docker-machine status
docker-machine status default
docker-machine env
docker-machine env default
docker-machine ls
By default, docker creates a docker-machine named "default" which you can verify using "docker-machine ls" command
You can remove this machine if not required by using "docker-machine rm machine-name" command:
docker-machine rm default <= "default" is the name of docker-machine.
docker system prune -a
docker run -d -p 5000:80 --name xxxxinsmall imagename
docker build -t mywebapp .
docker kill conainer_id or first 4-5 digits of containerid
$docker kill $(docker ps-q)
docker ps -q
docker ps -a
docker exec -it mywebapp bash
curl -I -XGET 192.168.99.100:5000 [on docker mingw64 bash prompt]
docker container ls
docker container ls -q
docker container stop $(docker container ls -q) [on mingw64 ]
docker container start $(docker container ls -a) [-aq ?]
docker container rm $(docker container ls -a)
docker images
docker images -q
docker images -a
docker images -aq
docker run --rm -it --entrypoint sh myweb app
https://www.c-sharpcorner.com/article/create-docker-image-and-hosting-for-simple-web-application-using-visual-studio/
Tuesday, July 20, 2021
Monday, July 19, 2021
TypeError : Router.user() requires a middleware function but got a undefined
This most probably indicates that your api is not being set properly. Check whether the api file ahas module.exported , you properly express.Router and returning it. In my case I forgot to return the api, and got the error.
module.exports = function(app, express) {
var api = express.Router();
/////////////////////////////////////////////////////////////
api.get("/users", function(req, res) {
User.find({} , function(err, users) {
if (err)
{
res.send(err);
}
else
{
res.json(users);
}
});
} );
/////////////////////////////////////////////////////////////
return api; //<= forgot this!
}
Getting MongoDb connection string for cloud collection
Steps in creating Mongo DB database in free tier in Atlas
2. Create DB user
3. Add IP address to your access list (white list)
4. Load Sample data (optional)
5. Connect to your cluster.
Create DB user:
Express Hello World
1. npm install express body-parser morgan
2. Create an html file called index.html in public/views/index.html and simply write text "Hello World!" (no html tags required) .
var express = require("express");
var bodyParser = require("body-parser");
var morgan = require("morgan");
var config = require("./config")
var app = express();
app.use(bodyParser({extended : true}));
app.use(bodyParser.json());
app.use(morgan("dev"));
app.get('*', function (req, res) {
res.sendFile(__dirname + "/public/views/index.html");
})
var server = app.listen(config.port, function (err) {
if (err)
{
console.log(err);
}
else
{
var host = server.address().address
var port = server.address().port
console.log("Listening at http://%s:%s", host, port)
}
})
Config.js:
module.exports = {
"database" : "",
//"port" : process.env.PORT || 3000 ,
"port" : 3000,
"secretKey" : "MySecretKey"
}
//NOTE : DO NOT USE "port" : process.env.PORT || 3000,
// => this will give
//New port every time, hence difficult to use. instead use
//a fixed port
public/views/index.html :
Hello World!
Start the project by using "node server.js" or "nodemon server.js"
and navigate to localhost:3000 on your browser
Sunday, July 18, 2021
React useEffect hook Sample-I
//React useEffect Sample - I
//Populating employees array after loading is complete.
//Even though the sample demonstrates setting the array, ideally
//you will place an API call in useEffect callback to populate array
import React from 'react';
import ReactDOM from 'react-dom';
import {useState, useEffect} from "react";
function EmployeeComponent() {
const [employees , setEmployees] = useState([]);
useEffect(()=>{
alert("setting employee array");
setEmployees(
[
{Id : "1" , Name: "AA1" , Location:"BB1" , Salary : "100"},
{Id : "2" , Name: "AA2" , Location:"BB2" , Salary : "200"},
{Id : "3" , Name: "AA3" , Location:"BB3" , Salary : "300"},
{Id : "4" , Name: "AA4" , Location:"BB4" , Salary : "400"}
]);
}, []);
//The second argument ,[] prevents the method from being called again and again
return (
<div>
<h1>Employee List</h1>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Location</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
{employees.map(emp=>
(
<tr key={emp.Id}>
<td>{emp.Id}</td>
<td>{emp.Name}</td>
<td>{emp.Location}</td>
<td>{emp.Salary}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
const element = <EmployeeComponent></EmployeeComponent>
ReactDOM.render(element , document.getElementById("root"))
React useState Sample-III passing data from parent to child and vice versa
//React useState Sample - III
//Passing data from Parent to child and vice versa
import React from 'react';
import ReactDOM from 'react-dom';
import {useState} from "react";
////Function Component////////////////////////////////////////////
function NewEmployee() {
const [employee, setEmployeeInfo] = useState({Id:"", Name: "" ,
Salary: "", Location:""});
function changeEmployeeInfo(e) {
setEmployeeInfo({...employee,[e.target.name] :e.target.value});
}
return <div>
<h1>Func Component</h1>
<p>
<label> Employee Id :
<input type="text" value={employee.Id} name="Id"
onChange={changeEmployeeInfo}>
</input>
</label>
</p>
<p>
<label> Employee Name :
<input type="text" value={employee.Name} name="Name"
onChange={changeEmployeeInfo}>
</input>
</label>
</p>
<p>
<label>
Employee Location:
<input type = "text" value = {employee.location} name="Location"
onChange = {changeEmployeeInfo} ></input>
</label>
</p>
<p>
<label>
Employee Salary:
<input type = "text" value = {employee.Salary} name="Salary"
onChange = {changeEmployeeInfo} ></input>
</label>
</p>
<p>
Entered Id is : <b>{employee.Id}</b>
</p>
<p>
Entered name is: <b>{employee.Name}</b>
</p>
<p>
Entered location is: <b>{employee.Location}</b>
</p>
<p>
Entered salary is: <b>{employee.Salary}</b>
</p>
<SalaryComponent
changeSalaryInfo={changeEmployeeInfo}
salary = {employee.Salary}></SalaryComponent>
</div>
}
////Function Component////////////////////////////////////////////
////Nested Component//////////////////////////////////////////////
const SalaryComponent = ( {changeSalaryInfo , salary}) => {
return (
<div>
<h1>Salary Breakup</h1>
<p>
<label>Employee Salary:
<input type="text"
name="Salary"
value={salary}
onChange={changeSalaryInfo}></input>
</label>
</p>
</div>
);
}
////Nestesd Component/////////////////////////////////////////////
const element = <div>
<p>
<NewEmployee></NewEmployee>
</p>
</div>
ReactDOM.render(element , document.getElementById("root"))
React useState Sample-II using an object with useState
//React useState Sample - II
//Using an object with useState
import React from 'react';
import ReactDOM from 'react-dom';
import {useState} from "react";
////Function Component////////////////////////////////////////////
function NewEmployee() {
const [employee, setEmployeeInfo] = useState({Id:"", Name: "" ,
Salary: "", Location:""});
function changeEmployeeInfo(e) {
setEmployeeInfo({...employee,[e.target.name] :e.target.value});
}
return <div>
<h1>Func Component</h1>
<p>
<label> Employee Id :
<input type="text" value={employee.Id} name="Id"
onChange={changeEmployeeInfo}>
</input>
</label>
</p>
<p>
<label> Employee Name :
<input type="text" value={employee.Name} name="Name"
onChange={changeEmployeeInfo}>
</input>
</label>
</p>
<p>
<label>
Employee Location:
<input type = "text" value = {employee.location} name="Location"
onChange = {changeEmployeeInfo} ></input>
</label>
</p>
<p>
<label>
Employee Salary:
<input type = "text" value = {employee.Salary} name="Salary"
onChange = {changeEmployeeInfo} ></input>
</label>
</p>
<p>
Entered Id is : <b>{employee.Id}</b>
</p>
<p>
Entered name is: <b>{employee.Name}</b>
</p>
<p>
Entered location is: <b>{employee.Location}</b>
</p>
<p>
Entered salary is: <b>{employee.Salary}</b>
</p>
</div>
}
////Function Component////////////////////////////////////////////
const element = <div>
<p>
<NewEmployee></NewEmployee>
</p>
</div>
ReactDOM.render(element , document.getElementById("root"))
Subscribe to:
Posts (Atom)
-
Most of the google tutorials on keras do not show how to display a confusion matrix for the solution. A confusion matrix can throw a clear l...
-
Bootstrapping is the process of starting application in angular. The entry point for an angular application is index.html. Index.html loa...
-
http://www.sommarskog.se/share_data.html How to Share Data Between Stored Procedures An SQL text by Erland Sommarskog, SQL Server MVP. M...
