teleren/devto huggingface dataset:
How to deploy a React App to Firebase host for free
Published: 2021-03-10 12:58:24

**Read the related post on [How to deploy a React App to Cloudflare host for free](https://dev.to/davidkou/how-to-deploy-a-react-app-to-cloudflare-host-for-free-358i)**

<hr>

[Firebase](Firebasefirebase.google.com) is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.

Firebase offers free host services for React SPA deployment. Below is how to do this with trivial steps!

 
## Deploy React Apps on Firebase

- Demo Site: https://xyz-firebase-react.web.app/
- Github repo [here](https://github.com/DavidKou/ReactDeploymentOnCloud/tree/master/Firebase)

## Create react app

```
npx create-react-app project-name
cd project-name

yarn
yarn start
```

## Install Firebase tools CLI

```Javascript
npm install -g firebase-tools
```
<hr/>

## Login Firebase using CLI

```
firebase login
```

You will be redirected to the Firebase login page. Input your account there.

![](https://github.com/DavidKou/ReactDeploymentOnCloud/blob/master/Firebase/snapshots/login.png?raw=true)


<hr/>

## Setup Firebase project from CLI

Note: you can also create a project using the Firebase console, but using CLI is more convenient.

1. Run the below command
```
cd project-name
firebase init
```

You need cd into the folder where React App is created. Follow the instructions as shown below:

![](https://github.com/DavidKou/ReactDeploymentOnCloud/blob/master/Firebase/snapshots/init.png?raw=true)


2. Confirm YES.
3. Create a new Firebase project, e.g. "xyz-firebase-react" 
4. Input a project ID, e.g. "xyz-firebase-react" 
5. Choose a directory where the contents will be deployed to Firebase, type **"build"**, since when you package the react app using "yarn build" command, the "build" folder will be the default.
6. Confirm **"YES"**. This is important since we are not deploying the static html! 
7. Confirm NO.
8. Confirm NO.

<hr/>


## Build react app locally

```
cd project-name
yarn build
```
This will package the react app, and the output is in the *build* sub-folder now.

<hr/>

## Deploy react app to Firebase

```
firebase deploy
```

![](https://github.com/DavidKou/ReactDeploymentOnCloud/blob/master/Firebase/snapshots/deploy.png?raw=true)

Open a browser window, and type the url: https://xyz-firebase-react.web.app/

![](https://github.com/DavidKou/ReactDeploymentOnCloud/blob/master/Firebase/snapshots/result.png?raw=true)

Now, your app is deployed to Firebase! Happy coding, happy deploying!
Significant Role of Task Management Tool  for Managing Multiple Projects
Tags: productivity
Published: 2021-03-10 12:50:43

Managing multiple projects can be the worst nightmare for project managers in this competitive and challenging business scenario. Though big companies with extensive budgets can deal with this situation by hiring full-fledged project managers and teams, small organizations and startups find it extremely difficult to manage several projects at once. In the case of such smaller companies, functional managers are expected to fill this role and perform well.

The final nail in the coffin is while managing multiple projects, project managers may have to manage several smallish projects at once and accomplish all the tasks within the given deadlines. As per an official report, only 2–3 employees work on multiple projects in small-scale organizations, which could lead to failure in meeting the deadlines. Here, project management software can lend a helping hand to startups and SMEs.

A robust and reliable task management tool or project management software can assist project managers to eliminate issues like higher workload, missing deadlines, and burnouts. It is easy to manage a work-life balance while maintaining high efficiency and performance with the help of a feature-rich task management tool like TaskOPad.

<b>Original Source: <a href= "https://www.taskopad.com/blog/how-taskopad-manages-multiple-projects-and-teams/"> Project Management Software </a> </b>
Mac Developer Survey
Tags: programming, news, swift, ios
Published: 2021-03-10 12:42:27

**Are your curious about the state of the developer community on the Mac?** 

If you are working as a **web** or **software developer on macOS**, then you can help us find out by taking our [short survey](https://www.git-tower.com/blog/mac-dev-survey-2021/)!

We will make the results publicly available.

To make the survey more fun, we teamed up with the best Mac apps and dev tools to give you the chance to **win over 100 prizes**. 

**Win free licenses** for Sketch, 1Password, Things, Agenda, Nova, Ulysses, Paw, Alfred, TextExpander, Transmit, Little Snitch, Reveal, Marked, PaintCode, Soulver, Dash, Travis CI, Kaleidoscope, Tower and more!

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3r5u5v9t6ho37f1uern.png)](https://www.git-tower.com/blog/mac-dev-survey-2021/)
Create Fantasy Cricket Website Before this IPL 2021

Tags: sportsapp
Published: 2021-03-10 12:42:01

The IPL season is going live and many people are busy developing fantasy cricket apps for IPL. This is not only the biggest tournament of the sports world but also one of the most viewed cricket tournaments that have gained a vast amount of audience and love of fans. People not only use fantasy sports apps for making money but also use these apps for fun, entertainment and It is really a great idea to create a fantasy cricket website for IPL to increase the profit of your gaming business. 

Fantasy Cricket App Development Features-
GPS Location Tracking
Custom Mail Reminder System
Transaction History
Live Score API Integration
Refer & Earn System
Reward Management
Live Match Score
Blockchain-Based Private Payment System
CRM Integration
Push Notification
Real-time Analytics

Mobiweb Technologies is a top-tier fantasy cricket website development company that has years of experience in designing fantasy cricket apps. Mobiweb has completed around 400+ fantasy cricket projects and we are proud to be a global leader in the gaming industry. If a client expects all the leagues and matches in a single app then our developers can make it possible in your budget. 

Visit Here: https://www.mobiwebtech.com/create-fantasy-cricket-app-for-ipl-t20-world-cup-2020/
CPA Exam in India | US CPA Course | CPA India 

Tags: cpaexaminindia, cpacourse, uscpa, uscpacourse
Published: 2021-03-10 12:34:57

The agenda behind conducting the CPA Exam in India is to avoid international travel for the Indian CPA aspirants in this uncertain time. The decision helps the Indian students to ease the burden of travelling to countries like Dubai, United States, for writing the CPA exam.  


<b>CPA Course Benefits:</b>  


<b>The benefits of US <b>"<a href="https://simandhareducation.com/course/cpa/">US CPA Course</a>"</b> are listed below:</b>


International Recognition: Pursuing CPA course creates many opportunities for CA, CS, ICWA, M.Com, MBA (Finance), LLB and Commerce graduates who aspire for international certification. 


Career Opportunities: After passing the CPA exam, the candidate can start his career with Auditing & Accounting firms, Investment banks, Research firms, Commercial banks, Private equity firms and so on.


Attain Knowledge: The Certified Public Accountant has proper essential knowledge in US GAAP, business laws, and US federal taxation. 


Flexibility & Ease: <b>"<a href="https://www.simandhareducation.com/blog/post-cpa-exam-in-india-from-december-onwards..php">CPA Exam in India</a>"</b> is a single level online exam with 4 sections. The candidate can easily clear all the 4 sections in less than a year.
Laravel v8 (with Sail and BrowserSync), VueJS v3 with Vue Loader boilerplate.
Tags: laravel, vue
Published: 2021-03-10 12:34:38


Github dist: https://github.com/StuartCreed/Vue3Laravel8BoilerPlate

<h2>To setup, do the following:</h2>
<a href="https://docs.docker.com/get-docker/">Install docker</a>
```
composer install
npm install
./vendor/bin/sail up
npm run watch
```

<h2>Extra Info - Sail config</h2>
docker-composer.yml file changed to use port '8081:80' so that the app runs on localhost:8081, as I have another program that uses localhost:8080 (the default for Sail).
See https://dev.to/stuartcreed/using-laravel-sail-docker-composer-for-laravel-on-a-existing-application-24k5 for more information.
This link will also help you if you have any other port conflicts.

<h2>Sources</h2>
This is an adaptation of:
https://dev.to/boussadjra/how-to-setup-vue-3-with-laravel-8-4ne6
https://github.com/boussadjra/laravel-vue-3-starter/blob/main/webpack.mix.js

<u>A summary of this is:</u>
```
npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next
```
Ensure package.json includes:
```
"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}
```
webpack.mix.js should contain
```
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue();
```
The minimum content of resources/js/app.js:
```
import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App).mount("#app")
```

Laravel Sail:
https://laravel.com/docs/8.x/sail
Sobre k8s y raspberry pi (thread)
Tags: kubernetes, raspberrypi, devschile
Published: 2021-03-10 12:16:56

**TheAngryDev:ocean:  6:40 PM**
Alguno tiene un tutorial, o algo así para partir aprendiendo a montar kubernetes en una raspberry? (tengo la de 8GB, ¿será suficiente?)

**rcarmonad  6:43 PM**
[https://ubuntu.com/tutorials/how-to-kubernetes-cluster-on-raspberry-pi#1-overview](https://ubuntu.com/tutorials/how-to-kubernetes-cluster-on-raspberry-pi#1-overview)

**TheAngryDev:ocean:  7:48 PM**
Gracias @rcarmonad++

**cvallejos  8:41 PM**
@cagodoy  estaba en esa pasta creo

**cagodoy  8:42 PM**
holas
en qué puedo ayudar? :eyes:
@TheAngryDev no he probado con la de 8gb, pero debería bastar
tengo varias pi3 de 1gb andando y funciona super con k3s
[https://k3s.io/](https://k3s.io/)
es re fácil la verdad, onda instalas el master y te genera una key y luego en los nodos, usas esa key
la magia ocurre por atrás
si pueden estar conectados por ethernet, mejor, con wifi he tenido algunos inconvenientes pero funciona igual
luego le sacas una copia al kube config y lo dejas en tu pc (recuerda cambiar la ip) para que puedas acceder reportamente
antes usaba mucho el k9s para administrar el cluster [https://github.com/derailed/k9s](https://github.com/derailed/k9s)

se ve así
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ityd2j91jabtjycsjslz.png)

igual es recomodo
pero ahora prefiero por lejos usar lens [https://k8slens.dev/](https://k8slens.dev/)

**@rcarmonad no he usado microk8s, solo k3s**
en mi compu uso kind [https://kind.sigs.k8s.io/](https://kind.sigs.k8s.io/)

**rcarmonad  8:50 PM**
Yo use minikube y k8s

**cagodoy  8:50 PM**
creo que ha sido la forma más simple de instalar un cluster en el compu es relativamente nuevo mucho más simple que minikube

**cagodoy  8:51 PM**
habría que ver si kind soporta raspberry pi (arm)

**cvallejos  9:00 PM**
Vieron, era el indicado

**TheAngryDev:ocean:  9:31 PM**
Gracias @cagodoy++

**TheAngryDev:ocean:  9:31 PM**
Mañana voy a empezar a aprender!!

**cagodoy  9:31 PM**
Cualquier cosa anda preguntando
Probablemente más de alguno quiera intentar la actividad

**TheAngryDev:ocean:  9:32 PM**
Oka, aviso por acá si me salen dudas (demás que varias jajaja), pero ya con lo que me mandaste junto a @rcarmonad tengo caleta pa partir, se agradece cabros!!

**alex  9:40 PM**
Yo usé k3sup [https://github.com/alexellis/k3sup](https://github.com/alexellis/k3sup)

Y KinD en wsl2
Aunque no pude conectar ambos
Y no seguí porque no tengo un caso de uso

**TheAngryDev:ocean:  9:43 PM**
Yo tampoco tengo un caso de uso en particular jajjaja, más que el de aprender en local para a futuro replicar en producción

**Daniel V.  9:12 AM**
k3s es lo mas simple. Si vas a tener mas de un cluster tb puedes tener un servidor rancher (se levanta casi igual que k3s), que te facilita la creacion y manejo de clusters (edited)
My Web Development Achievement.
Tags: webdev, codenewbie, html, css
Published: 2021-03-10 10:32:06

Early this year, I made a decision that resulted in me having to get back to the drawing board and start over.
I decided to look for a Bootcamp of sorts and follow through till the end and that's when I found [The Odin Project](https://www.theodinproject.com/) Foundations course and decided to take the leap.

For the first bit, I have learned some basics of Git and set up [my GitHub](https://github.com/Mwanaidi-M) then started on HTML and CSS by following [FreeCodeCamp's](https://www.freecodecamp.org) Responsive Web Design Curriculum and I'm happy to report that I completed it and got my certification.

![happy-face](https://media.giphy.com/media/3NtY188QaxDdC/giphy.gif)

While going through the curriculum, I got help from Google, Youtube, and some blogs and it feels good having seen something from start to finish.

So I would like to share the link to [my CodePen](https://codepen.io/mwanaidi-m) and would appreciate it if you could take a look at some of the projects I've done and give some feedback or remarks. It would be very helpful.
Evergreen CSS Flex Layouts With Live Demos
Tags: webdev, discuss, showdev, css
Published: 2021-03-10 12:05:02

I have to deal with CSS Flex layouts very often but noticed building them from scratch every time. That's irritating. 

So I put together a growing list of [9 demos with copy-paste ready code snippets](https://webup.org/blog/evergreen-css-flex-layouts-with-demos/) to help me start with a proper base next time.

_Head to the previews and tell me what is the template you are missing there._
Sobre datacenters y recomendaciones varias (thread)
Tags: datacenter, devschile, recomendaciones, aws
Published: 2021-03-10 11:58:46

**jorgeepunan  2:58 PM**
alguien sabe donde estan los datacenters de Azure que venden pa Chile?

**rcarmonad  3:01 PM**
diferentes zonas, de la misma forma en que puedes elegir en Amazon
Aunque creo que tu pregunta tiene otro genesis

**jorgeepunan  3:01 PM**
si, cual es el mas cerca
:flag-br: ?

**codeagainst:gob:  3:01 PM**
Brazil creo q el más ceecano

**TheAngryDev:ocean:  3:02 PM**
Sao Paulo

**jorgeepunan  3:02 PM**
gracias codeagainst++ rcarmonad--

**rcarmonad  3:02 PM**
pero cercano geograficamente != cercano en terminos de acceso
por ejemplo, si no tenemos acceso directo FO a brazil, tenemos que pasar si o si por el nodo mas cercano, que suele ser USA

**codeagainst:gob:  3:03 PM**
Si eso iba a decir, un tracert mejor para asegurarse

**rcarmonad  3:03 PM**
Entonces, puede ser que estes al lado de la casa, pero la vuelta puede ser mas larga

**asilva:hatched_chick:  4:29 PM**
aprovechando que tocaron eso
el datacenter de amazon para brasil es "lento" cierto?
he tenido problema de latencia y accesos con brasil pero con USA vuela

**Nicolas Martinez V.:ocean:  4:30 PM**
estupidamente lento e incompleto
en especial con los tipos de maquinas que tienen

**asilva:hatched_chick:  4:31 PM**
todo calza ahora pollo, EC2 anda un asco con unas cositas que tengo alli
latencias de hasta 400ms vs 100 de USA

**Nicolas Martinez V.:ocean:  4:31 PM**
nooo, ni pa levantar un server de RO sirven (edited) 

**TheAngryDev:ocean:  4:32 PM**
No se si sean lentejas… pero la AZ está re-colapsada

**Nicolas Martinez V.:ocean:  4:33 PM**
onda para distribucion S3 + cloudfront como para LO que sirve esa AZ

**TheAngryDev:ocean:  4:33 PM**
En lo personal… tengo todo en North Virginia

**asilva:hatched_chick:  4:34 PM**
con oregon nunca he tenido problemas, y por hacer "lo mejor" deje unas cosas en brasil y quedo la fox

**TheAngryDev:ocean:  4:35 PM**
Oregon también apaña, y si jajaja, todo lo que tenía en sao paulo se fue a la B xDD

**davidlaym  4:37 PM**
us-east-1 siempre apaña

**asilva:hatched_chick:  4:38 PM**
es la vieja confiable

**Trag  4:38 PM**
[https://www.infrapedia.com](https://www.infrapedia.com)

**TheAngryDev:ocean:  4:42 PM**
Aparte que (creo), están todos los servicios en disponibilidad en us-east-1

**ienc  9:08 PM**
Por defecto todos están en virginia y en el pasado, virginia a sufrido más por caídas y weas al tener todo ahi
Ohio y Oregon tienen latencia similar y mismo precio que virginia
Y a nivel de servicios, Oregon los tiene todos. Ohio le faltan algunos

**TheAngryDev:ocean:  9:41 PM**
Pedazo de tip!! Y si, soy conciente de las caídas de esa AZ... Pero ahora que tengo ese datazo de Ohio y Oregon, voy a meter más para allá
OAuth2 examples for Deno
Tags: javascript, typescript
Published: 2021-03-10 11:53:27

I'm working on creating some "portfolio pieces" that are useful web apps. The first project is a kanban board system, similar to Trello with a bit of Airtable mixed in, and my own ideas.

I decided to use Svelte kit and Tailwind CSS on the front-end, but I'm having a bit of trouble settling on a good system for authentication.

I started out using Django REST and Djoser, but I'm experiencing some difficulties with this, and I'm thinking it would be better to use something lighter for the public facing auth server.

Firebase auth would be an easy way to get things up and running. Unlike other auth-as-a-service providers, Google allows unlimited use of Firebase auth free of charge (except for cellular text messages, which are limited). This would be the most practical option, I suppose.

In the Python world, Flask and FastAPI are more performant, lighter frameworks. The [FastAPI Users](https://github.com/frankie567/fastapi-users) module looks like a good option for authentication.

However, today I had a bit of a "JavaScript everywhere" mood, with the idea to share some code on the client and server, including validation. So I did a little work towards setting up an OAuth2 authentication server in [Deno](deno.land).

I tried two libraries, [Dashport](https://github.com/oslabs-beta/dashport) and [deno-oauth2-client](https://github.com/cmd-johnson/deno-oauth2-client).

Dashport aims to be like Passport.js for Deno. I had a bit of trouble getting their example code to work, so I [forked the repo](https://github.com/ultracodemonkey/dashport), fixed a few bugs and added some example code. I also posted [a slightly more developed example](https://gitlab.com/sswam/dashport-test). In the process, I gained a bit more experience with TypeScript.

The other module, deno-oauth2-client, works well. It's smaller and easy to use. Their example shows how to do GitHub auth. I [extended the example](https://gitlab.com/sswam/deno-auth-test) to support Google and Facebook auth also.

There's a ways to go before this will be useful as an authentication server. As it is, I can prompt the user to log in with those providers, and fetch the user info.

I would also like to find or put together a good "local login" system, with email and password auth, also email confirmation, password reset, and all the customary features. I'm not sure if I'll continue with Deno for this, or explore other options.

Auth is pretty dull, but I guess it will be useful to have a good system that I can reuse in future. Probably should just use Firebase. Anyway, worst case scenario I'm learning stuff that can be useful in future.
An online demo of a localhost web app
Tags: javascript, vue, opensource, security
Published: 2021-03-10 11:44:29

The mnm project is building a legitimate replacement for email &mdash; a client, a server, and a simple protocol (TMTP) between them. The mnm client[1] is a _localhost web app_. Recently I posted an [online demo](https://mnmnotmail.org/demo.html) of the client.

A localhost web app runs locally on your PC or phone, and displays its UI in a browser page. (Jupyter Notebook is the best known example.)

On the websites of desktop and phone apps, you'll find screenshots. Static images in an inherently interactive medium &mdash; what?! But if you've written a localhost web app, you can simply peel up its browser UI and affix it cleanly to your website. Well, you can if you've architected it correctly...

Your browser code needs two features:
1. A separate module with an API that sends messages to the localhost app.
2. An updates API to handle messages from the localhost app, which is invoked by callbacks in the module. It typically updates the page using reactive variables that affect the DOM via Vue.js or React (etc).

To turn this into an online demo, you only need reimplement the module to emulate the behavior of the real app, and serve the browser code from your website.

Try the [mnm online demo](https://mnmnotmail.org/demo.html). 
Follow [mnm on Twitter](https://twitter.com/mnmnotmail).

[1] https://github.com/networkimprov/mnm-hammer
Building BIG systems based on serverless
Published: 2021-03-10 11:42:00

---
title: Building BIG systems based on serverless
published: true
description: Can a system be built without caring about infrastructure
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tunwugmq6g50emie6di8.png
---

This is going to be a short post, with the idea of being an intro for a future serie of more extended ones if seems interesting and if I get some time.

I wrote a post weeks ago sharing some thoughts about serverless architectures and their tradeoffs. 
I had a previous bias on the use of Serverless solutions (specifically on serverless functions). I was thinking of them just as a way to trigger simple tasks without caring too much of managing resources, but I've never thought of build an entire system based on them. Things and thoughts change and now I see a big advantage on them. 
But serverless architectures and the frameworks that allow to work with them don't tell anything about how to build stuff, they just provide a way to build and deploy easily the systems. 

Currently, we're having some funny time refactoring properly part of our core codebase. With several years of tech debt accumulated, some of the services developed have an (ironic) interesting coupling to the serverless way of thinking (like invoke lambdas inside other lambdas, as if it was an http request). Yep, this is giving us some hard time while refactoring things.

But, the solution to our problem was quick to find and is quite simple to understand (not as simple to implement, but we're doing it little by little). 
With inspiration good old classic **hexagonal architecture.** , we're starting to rebuild things without caring on how the entrypoints are. Some conclusions that we arrived were: 


* Treat serverless solutions as another framework and just avoid coupling to them.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6abwxg5rip9lgeyw96r.png)
* Thinking on each lambda as a controller or as an event handler that will call to internal layers, just as another part of the infrastructure layer. Not caring about which type of trigger will call our services, just defining contracts to use them. 
* Build the app from the domain to the external layers even if it's a simple solution . Once done that, you won't care if the entrypoints are done via Lambda, Azure function or via expressJS routes and they will scale easily.

About the internal calls to other lambdas... we're refactor them to be more event-driven. Or, for tricky cases, wrapping adapters over them (we're having in parallel a lot of conversations about domain modeling lately)

And, for the major architecture... Abstract also to the idea that services are run serverless (keeping an eye to performance/cold starts and similars, though). Build services as if they're another microservice more.