$ cat ~/personal_full.txt | docker login http://ghcr.io -u maximilianou --password-stdin Login Succeeded $ docker tag bf756fb1ae65 ghcr.io/maximilianou/node-lts-alpine:v14 $ docker push ghcr.io/maximilianou/node-lts-alpine:v14 https://github.com/users/maximilianou/packages/container/package/node-lts-alpine $ docker pull ghcr.io/maximilianou/node-lts-alpine:v14 FROM ghcr.io/maximilianou/node-lts-alpine:v14
api/safeFetch.ts
maximilianou@instrument:~/projects/weekly20$ cat api/safeFetch.ts
import * as TE from "fp-ts/lib/TaskEither";
import * as E from "fp-ts/lib/Either";
const fetch = require('node-fetch');
type User = {
};
export const safeFetch = (
url: string,
errMessage: string
): TE.TaskEither> =>
TE.tryCatch(
() => fetch(url).then( res => res.json()),
() => new Error(errMessage)
);
safeFetch(
"https://jsonplaceholder.typicode.com/users",
"failed to fetch users"
)().then(E.fold(console.error, console.log));
maximilianou@instrument:~/projects/weekly20/api$ ./node_modules/.bin/ts-node safeFetch.ts
This way i take variable inside dockerfile, from the file in my machine, and from environment in aws
Makefile
vm: docker-compose --env-file .env.development up --builddocker-compose.yaml
build: # specify the directory of the Dockerfile
context: .
dockerfile: Dockerfile.dev
args:
- NPM_TOKEN_PARAM
- NPM_MAIL_PARAM
- NPM_USER_PARAM
env_file:
- .env.development
. env.development
NPM_USER_PARAM=max... NPM_TOKEN_PARAM=fe... NPM_MAIL_PARAM=max..Dockerfile.dev
ARG NPM_USER_PARAM
ARG NPM_TOKEN_PARAM
ARG NPM_MAIL_PARAM
ENV NPM_USER=$NPM_USER_PARAM
ENV NPM_TOKEN=$NPM_TOKEN_PARAM
ENV NPM_MAIL=$NPM_MAIL_PARAM
COPY .npmrc ./
RUN npm install npm-cli-login
RUN ./node_modules/.bin/npm-cli-login -r https://npm.pkg.github.com -s @... -u ${NPM_USER} -p ${NPM_TOKEN} -e ${NPM_MAIL}
React using state and props, Shopping Cart MVC 2019
I mean, the simplest example learning how to use the React state, and React props
( Clearly here i'm not using Redux, this is the next step, just to be clear )
React state of the App
React props of each React.Component Instance
So we can have list of products, and a shopping cart (list of items of products), adding and removing items.
The point is to learn how to pass action control over components, changing from state to new states on action events from components, to the Root App, and showing the change in the other affected Component.
https://codesandbox.io/s/v0l1knv1yl
https://github.com/maximilianou/react_2019_state_props_shoppingcart_mvc/
https://gitlab.com/maximilianou/react_2019_state_props_shoppingcart_mvc
https://bitbucket.org/maximilianou/react_2019_state_props_shoppingcart_mvc
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const ProductsList = props => {
const { products, adding } = props;
return (
< section>
< h2>List of Products< /h2>
{products.map(product => (
< article key={"product_" + product.id}>
< h4>{product.name}< /h4>
< span>{product.price}< /span>
< button onClick={adding} value={JSON.stringify(product)}>
+
< /button>
< /article>
))}
< /section>
);
};
const ItemsList = props => {
const { items, removing } = props;
return (
< section>
{items.map(item => (
< article key={"item_" + item.product.id}>
< h4>{item.product.name}< /h4>
< span>{item.product.price}< /span>
< span>{item.quantity}< /span>
< span>{item.quantity * item.product.price}< /span>
< button onClick={removing} value={JSON.stringify(item)}>
-
< /button>
< /article>
))}
< /section>
);
};
class ShoppingCart extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
< section>
< h2>Shopping Cart< /h2>
< ItemsList items={this.props.items} removing={this.props.removing} />
< /section>
);
}
}
class App extends React.Component {
state = {
products: [
{ id: 20, name: "Limonade", price: 200 },
{ id: 21, name: "Green Tea", price: 150 },
{ id: 22, name: "Chocolate Milk", price: 350 }
],
items: []
};
constructor(props) {
super(props);
this.adding = this.adding.bind(this);
this.removing = this.removing.bind(this);
}
adding = evt => {
const product = JSON.parse(evt.target.value);
let item = this.state.items.find(ite => ite.product.id === product.id);
if (item === null || item === undefined) {
item = {};
item.product = product;
}
if (item.quantity === undefined) {
item.quantity = 1;
this.setState({ items: [...this.state.items, item] });
} else {
item.quantity += 1; // mm.. here i'm changing the original object. mmm...
this.setState({ items: [...this.state.items] });
}
};
removing = evt => {
const item_p = JSON.parse(evt.target.value);
const item = this.state.items.find(
ite => ite.product.id === item_p.product.id
);
if (item.quantity === 1) {
const listItems = this.state.items.filter(
ite => ite.product.id !== item.product.id
);
this.setState({
items: listItems
});
} else {
item.quantity -= 1; // mmm.. here i'm changing the original object. mmm...
this.setState({ items: [...this.state.items] });
}
};
render() {
return (
< div className="App">
< ProductsList products={this.state.products} adding={this.adding} />
< ShoppingCart items={this.state.items} removing={this.removing} />
< /div>
);
}
}
const rootElement = document.querySelector("#root");
ReactDOM.render(< App />, rootElement);
Here we have a simple sample, to run puppeteer and check OK or NOT browsing uno site.
educacion@family:~/src$ hg clone https://bitbucket.org/maximilianou/docker17_puppeteer
educacion@family:~/src/docker17_puppeteer/frontest$ docker-compose up
educacion@family:~/src/docker17_puppeteer/frontest/test$ cat index.spec.js
const assert = require('assert');
const puppeteer = require('puppeteer');
describe("Browsing with puppeteer:", ()=> {
describe("Geting one page", ()=>{
it("Check OK:", async ()=> {
const browser = await puppeteer.launch({
args: [
'--no-sandbox',
'--disable-setuid-sandbox'
]
});
const page = await browser.newPage();
await page.goto('https://bitbucket.org/maximilianou/'); //, {waitUntil: 'networkidle2'});
let textResponse = await page.evaluate(() => {
//Maximiliano Usich
let elemCheck = document.querySelector('a[href="/maximilianou/"]');
return elemCheck.innerHTML;
});
assert( textResponse === 'Maximiliano Usich', "[OK] Content Found" );
browser.close();
});
it("Check Not Found:", async ()=> {
const browser = await puppeteer.launch({
args: [
'--no-sandbox',
'--disable-setuid-sandbox'
]
});
const page = await browser.newPage();
await page.goto('https://bitbucket.org/maximilianou/UPS!!');// , {waitUntil: 'networkidle2'});
let textResponse = await page.evaluate(() => {
//Maximiliano Usich
let elemCheck = document.querySelector('a[href="/maximilianou/"]');
return elemCheck;
});
assert( textResponse === null, "[OK] Content Not Found" );
browser.close();
});
});
});
educacion@family:~/src/docker17_puppeteer/frontest$ cat Dockerfile
FROM alekzonder/puppeteer
# set working directory
#RUN mkdir /app
WORKDIR /app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
COPY test /app/test
RUN npm install
# start app
CMD ["npm", "run", "test"]
educacion@family:~/src/docker17_puppeteer/frontest$ cat docker-compose.yml
version: '3.5'
services:
docker-test-puppeteer:
container_name: docker-test-puppeteer
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- '3333:3333'
environment:
- NODE_ENV=development
ERROR: when an error like this happen
docker-test-puppeteer | 1) Browsing with puppeteer: docker-test-puppeteer | Geting one page docker-test-puppeteer | Check OK:: docker-test-puppeteer | Error: Timeout of 10000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (/app/test/index.spec.js)
The site did NOT responde on time ( 10000 milis). We have configured this in package.json
educacion@family:~/src/docker17_puppeteer/frontest$ cat package.json
{
"name": "frontest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "node_modules/mocha/bin/mocha --timeout 10000 test/index.spec.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"mocha": "^5.2.0"
}
}
This is the way of code, set the timeout in the it().timeout(0), because mocha take 2 seconds.
const assert = require('assert');
const puppeteer = require('puppeteer');
describe("Browsing with puppeteer:", ()=> {
describe("Geting one page", ()=>{
it("Check OK:", async ()=> {
const browser = await puppeteer.launch({
args: [
'--no-sandbox',
'--disable-setuid-sandbox'
]
});
const page = await browser.newPage();
await page.goto('https://bitbucket.org/maximilianou/', {waitUntil: 'domcontentloaded'}); //, {waitUntil: 'networkidle2'});
let textResponse = await page.evaluate(() => {
//Maximiliano Usich
let elemCheck = document.querySelector('a[href="/maximilianou/"]');
return elemCheck.innerHTML;
});
assert( textResponse === 'Maximiliano Usich', "[OK] Content Found" );
browser.close();
}).timeout(0);;
it("Check Not Found:", async ()=> {
const browser = await puppeteer.launch({
args: [
'--no-sandbox',
'--disable-setuid-sandbox'
]
});
const page = await browser.newPage();
await page.goto('https://bitbucket.org/maximilianou/UPS!!', {waitUntil: 'domcontentloaded'});// , {waitUntil: 'networkidle2'});
let textResponse = await page.evaluate(() => {
//Maximiliano Usich
let elemCheck = document.querySelector('a[href="/maximilianou/"]');
return elemCheck;
});
assert( textResponse === null, "[OK] Content Not Found" );
browser.close();
}).timeout(0);;
});
});