Forem: Marouen Helali

Exporting your Firebase Auth Users with Golang and Firebase-CLI

Marouen Helali — Fri, 10 Feb 2023 17:04:02 +0000

How to extract the emails of your Firebase app users in a format readable by most email delivery services such as MailChimp and MailGun.

TL;DR: https://github.com/Marwan01/import-firebase-users

Dependencies
Go
firebase-cli

Firebase CLI

Download and install firebase-cli: https://firebase.google.com/docs/cli

brew install firebase-cli

firebase login

Get your project ID:

firebase projects:list

Run the command to get your auth users data:

firebase auth:export save_file.csv --format=csv --project <PROJECT_ID>

You should now have a csv save_file.csv that has all your users’ emails along with a bunch of scrambled extra data.

Golang Implementation

To get started, create a new Directory/Git Repository, and initialize and Go project within it:

mkdir import-firebase-users
cd import-firebase-users
touch splitclean.go
go mod init

Let’s start by adding the skeleton code for our service:

package main
import (
 "fmt"
)
func main() {
 fmt.Println("Firebase email export start.")
}

Let’s test our execution by running go run splitclean.go . We should expect to see in stdout: Firebase email export start .

Now we can start working on the main course of the script, which is getting the data csv from Firebase and cleaning it up. First let’s open and parse the csv into a reader that we can loop over and extract emails from:

 // Open the file
 csvfile, err := os.Open("save_file.csv")
 if err != nil {
  log.Fatalln("Couldn't open the csv file", err)
 }

 // Parse the file
 r := csv.NewReader(csvfile)

Then let’s create an emails slice, and loop over the reader, and pick out the record that has the email:

 var emails []string
 // Iterate through the records
 for {
  // Read each record from csv
  record, err := r.Read()
  if err == io.EOF {
   break
  }
  if err != nil {
   log.Fatal(err)
  }
  emails = append(emails, record[1])
 }

Now let’s create a .txt file and write a header column Email Address . This is required by most mail services, and makes it automatically convertible to .csv with a header, if that’s what you want to work with.

 // Create a .txt file
 f, err := os.Create("emails.txt")

 if err != nil {
  log.Fatal(err)
 }
 // write header for the file
 _, _ = f.WriteString("Email Address\n")
 // close file when done
 defer f.Close()

Now for the last step, let’s loop over the email slice and add each email to its own line on the .txt file:

// loop over the emails slice
for i := 0; i < len(emails); i++ {
  _, err2 := f.WriteString(emails[i])
  _, _ = f.WriteString("\n")
  if err2 != nil {
   log.Fatal(err2)
  }
 }

(Optional) Bash Script

We can simplify the execution one more step, by adding a two command bash script that will call the firebase-cli with a a Project ID parameter, and the your Golang script:

touch entrypoint.sh

Add the two commands:

firebase auth:export save_file.csv --format=csv --project $1
go run splitclean.go

Make your script executable:

chmod +x entrypoint.sh

Finally run the script:

./entrypoint.sh <firebase project ID>

Terraform Credentials Setup in GCP

Marouen Helali — Fri, 10 Feb 2023 14:28:51 +0000

This article will cover how to create a terraform service-account in Google Cloud Platform, and how to generate and use its credentials locally.

We are going to need to authenticate to GCP to use terraform. The recommended way to do that according to the Google Cloud Platform Documentation, is to create a service account for terraform, and give it the necessary access for it to create infrastructure.

If you haven’t already, run the below command to initialize your GCP workspace and select a default GCP project. Grab your PROJECT_ID .

gcloud init

Now that you are logged in to GCP and have your PROJECT_ID saved, create a new service account to be used by terraform.

gcloud iam service-accounts create terraform  --display-name "Terraform account"

Now that your terraform service account is created, generate the config locally so we can use it to authenticate to GCP as the terraform service acct. Do not forget to substitute PROJECT_ID with your own value.

gcloud iam service-accounts keys create ~/.config/gcloud/PROJECT_ID.json --iam-account terraform@$PROJECT_ID.iam.gserviceaccount.com

Note: you will need to re-generate the credential file via this step every time you add new access permissions to the chosen service account.

We now have a terraform service account, and its corresponding credentials pulled locally. The next step is to configure your environment for the Google Cloud Terraform provider by substitution your PROJECT_ID value and running

export GOOGLE_APPLICATION_CREDENTIALS=~/.config/gcloud/PROJECT_ID.json

The terraform command is finally ready to be used. It is now able to correctly link to the terraform service account we created using the above exported credentials. However, the “fresh” service-account, does not have any permissions given to it. So terraform is not going to be authorized to create any infrastructure unless we give it permission to do so. You might need to find out which permission needed for your chosen infrastructure, but for a GCS bucket example, below is how we add the permissions needed to the terraform service account. Do not forget to change PROJECT_ID to your own value.

Grant the service account permission to view the GCP Project

gcloud projects add-iam-policy-binding PROJECT_ID --member serviceAccount:terraform@PROJECT_ID.iam.gserviceaccount.com --role roles/viewer

Grant the service account permission to manage Cloud Storage

gcloud projects add-iam-policy-binding PROJECT_ID --member serviceAccount:terraform@PROJECT_ID.iam.gserviceaccount.com --role roles/storage.admin

If you encounter any billing issues, it is probably because the corresponding service does not have billing enabled. You can fix that by enabling all the APIs required for terraform to perform needed actions.

gcloud services enable cloudresourcemanager.googleapis.com
gcloud services enable cloudbilling.googleapis.com
gcloud services enable iam.googleapis.com
gcloud services enable storage.googleapis.com
gcloud services enable serviceusage.googleapis.com

You can now run terraform init with an existing terraform config to test the connection to GCP and verify the permissions are set up correctly.

successful terraform init
Tada 🎉🎉🎉 You now meet all the necessary conditions to be able to run a terraform plan.

Customize Your Mac Terminal

Marouen Helali — Thu, 21 Jan 2021 02:25:32 +0000

Original Source: https://medium.com/@marouen.helali/customize-your-mac-terminal-5baa3ec308f0

Learn how to personalize your Mac terminal in 5 simple steps.

Customizing your terminal can simplify a lot of your tasks, and set you up with basic shortcuts that will save you from some headaches, especially if you spend a lot of time using CLIs. We can break down this process into 5 major steps: Picking a terminal program, adding terminal plugins, picking a shell program, adding shell plugins, and configuring your terminal editor. This article will walk you through each of the steps in detail.

1. Pick a terminal program: hyper.js 🤖

Default Mac terminal. It comes natively with every Mac

Each user is free to choose their favorite terminal software since each program has its own pros and cons. However, they generally do not differ too much, except for plugins and such. My favorite terminal interface is the hyper terminal. It is very customizable and allows us to easily add powerful plugins (which will be covered in part 2). To install hyper, navigate to the website and click the download button. Follow the instructions on the screen to finalize the installation of hyper.

Last installation step

Now search for Hyper, and launch it.

Searching for Hyper after the installation

Hyper terminal

It is worthwhile to mention that the native Mac terminal is also a great lightweight option that also allows us to add plugins and optimizations. Another popular third party software is the iterm2 terminal.

2. Add some plugins 🔌

Hyper is very customizable. It offers a growing list of plugins. Installing a new plugin is simple. All you need to do is edit your .hyper.js file. Note:

Many terminal programs allow you to customize some settings and parameters about them via their "dotfiles". Dotfiles stand for the config files that start with a dot and are usually located within your root directory.

Based on the above note, we can deduce that the .hyper.js file came from the installation of the hyper terminal. We will also end up with more dotfiles as we install more programs.
Use your favorite editor to open the .hyper.js files (located in your system's root directory ~/.hyper.js). For this tutorial, we will use Vim (we will also be adding some extensions to improve the vim experience in part 5). If you are not familiar with vim, take a look at my getting started with Vim article for a quick cumulative intro to the topic.

vim ~/.hyper.js

Let's start by adding one of my favorite Hyper plugins: hyper-pane. After opening the config file, scroll down to the bottom of it and you will find a plugins array. Add a new string to it with the value of your chosen plugin.

Adding hyper-pane to plugins array via vim

Relaunch the program and hyper will reload itself after installing the plugin. Congrats you installed your first plugin! Hyper-pane is simple to use, but the shortcuts can be easily forgotten (speaking from experience lol). Below are the most important commands, feel free to copy them to your notes:

Vertical Pane: CMD + D
Horizontal Pane: CMD + SHIFT + D
Close Pane: CMD + W

Now that you know how to add plugins, knock yourself out by adding any new plugins you'd like, here is a nice cumulative list of very useful plugins:

plugins: [
     'hypercwd',
     'hyper-alt-click',
     "hyper-search",
     "hyper-pane",
     "hyper-active-tab",
     "hyper-highlight-active-pane"
   ],

All these plugins are useful, for example, Hypercwd allows you to open new tabs at the same directory you were in. You can learn more about how to use each plugin, and their functionality by looking at the specific plugin details within the list of plugins.

Full list of favorite plugins

3. Installing a different terminal shell 🐚

Now that you have a powerful terminal, let's equip you with the best shell out there. Mac's default command-line shell is called bash. Bash is great, but it will be lacking some of the performance improvements, extensions, and updates that come from more optimized, open-source shells such as the almighty oh-my-zsh. You can install it by running:

sh -c "$(curl -fsSL     https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Feel free to refer to the Github README.md for more details about the installation. Follow the installation steps, restart your terminal, and boom! You now have zsh! Note that will this installation brings a new dotfile (.zshrc).

4. Add zsh plugins 🔌

The main reason for choosing the zsh shell might just be its plugins. This step is the most valuable of all. Just like we edited the .hyper.js to add some plugins to the hyper terminal, we will be editing the .zshrc to add useful tools:

vim ~/.zshrc

What default .zshrc looks like. Source: https://github.com/ohmyzsh/ohmyzsh/blob/master/templates/zshrc.zsh-template

The list of zsh plugins is exhaustive. However, the most indispensable plugins are these:

plugins=( 
    git 
    zsh-autosuggestions 
    zsh-syntax-highlighting 
)

Once you are done editing your .zshrc, you will need to source your .zshrc for any changes to take effect:

source ~/.zshrc

Sourcing your .zsh and cloning plugins' repos

You might encounter: plugin 'zsh-autosuggestions' not found. This is normal because unlike hyper (Javascript-based) which automatically takes care of doing the plugin imports for us, we will need to download the plugins ourselves. We do it by cloning the source for the plugin into the dedicated zsh plugin directory via these commands (for the two above plugins):

# Download zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-    autosuggestions.git $ZSH_CUSTOM/plugins/zsh-autosuggestions
# Download zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-syntax-    highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-    highlighting

Zsh auto-suggestions will allow you to use the right arrow to fill commands based on your terminal history, while syntax-highlighting will highlight in green commands that are recognized by your shell, and in red those that are expected to error from syntax issues. Here is a quick look at the two plugins:

Zsh auto-suggestions demo

Zsh syntax-highlighting demo

It might be fun to change the .zsh theme. Here is the long list of themes. You can do this simply by updating the theme variable in the .zsh file:

vim ~/.zshrc

Finally, it might not be a bad idea to scroll through the rest of the parameters and options within the .zshrc file. It is very well documented and you might find a setting that will appeal to your usage.

5. Tweak your text editor: vim 📝

In this section, I will be using vim (staying within the terminal), but keep in mind that editing other popular text code editors such as VSCode is just as similar (update your .vscode config file).

vim ~/.vimrc

You might have some sample configuration there, or it could be empty. In either case, a very neat vim config (that I personally use) is presented in this gist. You can copy it and paste it into your .vimrc file. You can reload your terminal, and open vim again, and you will see the new settings such as line numbers, and separate variable colors taking effect.

To the left is Vim after adding the gist config. To the right is the original look of Vim

In conclusion, editing your terminal is not much different from setting up your favorite software workspace on your computer. It is just a matter of picking an adequate program for your functions, learning how to use it, and finally learning how to configure it so you can get the most out of it by simplifying and automating its usage.

Source: https://giphy.com/gifs/season-17-the-simpsons-17x10-3orif2MpoMCp4IVXKU

Cover source: https://unsplash.com/photos/zDxlNcdUzxk

Covid-19 Updates via SMS for FREE

Marouen Helali — Tue, 17 Mar 2020 23:44:41 +0000

Hello everyone. We are a small group of young developers (looking to grow) who decided to come together and join forces in order to do our part to combat the unfathomable Coronavirus epidemic.

Text the below number to get started:

Checkout the project's open-source repository: https://github.com/Marwan01/covid-helpline

The purpose of this post is to humbly ask the dev community to give us a hand maintaining, scaling, and improving this project so it could keep running for FREE for those who need it the most.

Learn more by visiting the detailed article my teammate wrote: https://medium.com/@aandrei_38387/1-914-268-4399-open-source-covid-19-data-line-f5a566b51d99

Please reach out to me directly via marwanest@live.fr to get added as a contributor. :) Thank you all for the attention.

Deploy an Angular App Using Google Cloud Run

Marouen Helali — Tue, 25 Feb 2020 21:34:01 +0000

Learn how to create, Dockerize, and deploy your containerized Angular application using Google Cloud Run.

TL;DR: working example Github repo.

Prerequisites:

Node
Angular CLI
Docker
Google Cloud SDK
An activated Google Cloud Platform account

Skip step 1. if you already have a working Angular app.

1. Create an Angular App

To get started, use the Angular CLI to generate a new Angular app:

ng new

You will be prompted to name your app and add some configuration choices.

Once the CLI has generated all the necessary files for your Angular app, you can test it out by executing these two commands.

cd <app-name> ng serve

In your favorite browser, navigate to http://localhost:4200. With Angular 9, you will get a similar welcome screen to the one below.

2. Create a Google Cloud Project

Login to your GCP account, then create a new project. You are not required to use an organization, as long as you have billing enabled on your account.

After you see the GCP welcome dashboard for your freshly created project, click on the hamburger menu, and navigate to Cloud Run. Proceed by clicking the “start using Cloud Run” button. You should now see your Cloud Run dashboard. Click on the create service button.

In service settings, enter a service name, and the container image URL should autofill. Select the region of your choice, then click create.

Your new service is now created, and ready to have an image pushed to it.

3. Dockerize, and Serve your Angular App Using ExpressJS

Cloud Run only works with containerized images. In order to containerize our Angular app, we use Docker. You can do so by creating a Dockerfile in your project directory with the config below.

FROM node:12-slim WORKDIR /usr/src/app COPY package*.json ./ RUN npm install -g @angular/cli RUN npm install COPY . ./ RUN npm run build EXPOSE 8080 CMD [ "node", "server.js" ]

This Dockerfile permits us to install the Angular CLI, along with all our project’s dependencies in a node-based docker container. It also builds and generates the necessary static files to serve our Angular app. Note that we expose port 8080, even though our Angular app’s default server port is 4200. Port 8080 is Google Cloud Run’s default port. This is a great transition to the last missing piece of the puzzle: Using ExpressJS.

In order to get our app on the web, we need to serve the static files contained in our dist folder using a service. ExpressJS is a NodeJS library that allows us to do so, in a few lines of code. Create a server.js file and copy the below snippet to it, replacing PROJECT-NAME with the name of your Angular app.

var express = require('express'); var app = express(); app.use(express.static('dist/PROJECT-NAME')); app.get('/', function (req, res,next) { res.redirect('/'); }); app.listen(8080)

After adding the two files, feel free to test your container by building an image and running it using the two commands below (replacing *app-tag *with the tag you wish to use).

docker build -t app-tag . docker run -p 8080:8080 app-tag

Navigate to http://localhost:8080 to see your Angular app served via ExpressJS from inside your container (hence the “CMD [ “node”, “server.js” ]” at the bottom of your Dockerfile).

4. Deploy your Angular App (Source)

All that is left to do, is to use the Google Cloud SDK to build and deploy your containerized web app.

This is actually as simple as it sounds. Two commands, one to build, another to deploy. You will need your Project ID (Can be found in your
Google project dashboard), and your Cloud Run service name. Execute the two below commands substituting PROJECT-ID and SERVICE-NAME with your values.

gcloud builds submit --tag gcr.io/PROJECT-ID/SERVICE-NAME gcloud run deploy --image gcr.io/PROJECT-ID/PROJECT-NAME --platform managed

Once your revision (image) is deployed, you will get a link to your live Angular app. If you go back to your cloud console, you will see a green arrow next to your service in the Cloud Run dashboard. Scaling and provisioning will automatically be taken care of.

Congratulations! You just deployed your container using Cloud Run! 🎉
Here is the demo link for the example used in this article along with the Github repo.

5. Extras

Performance:

You can make your deployment process faster, by adding a .dockerignore file like the one below.

Dockerfile
README.md
node_modules
npm-debug.log

This will tell the docker daemon not to copy those specific files to your new container. This will save some time, considering node_modules are particularly heavy.

Cleanup (Source):

While Cloud Run does not charge when the service is not in use, you might still be charged for storing the container image in Container Registry. You can delete your image or delete your Cloud project to avoid incurring charges. Deleting your Cloud project stops billing for all the resources used within that project.

Original Source: https://medium.com/@marwan.helali01/deploying-an-angular-app-using-google-cloud-run-7a4d59048edd

Get Started With Vim

Marouen Helali — Fri, 14 Feb 2020 21:33:04 +0000

You do not need to be a command line wizard to be able to use Vim. Using Vim consists in three simple steps: opening Vim, making the necessary text edits, then saving and exiting.

1. Opening Vim

vim helloworld.txt

Using the vim command followed by a file name will result in opening that file in the vim editor. If that file does not already exist in your current directory, it will be created.

Result of opening a new file using vim

In this case, we see [New File], because I did not have a helloworld.txt already present in my directory, so I am creating it.

2. Using Vim

In order to go any further, we need to get a grasp on how Vim generally works. These are the key concepts you need to remember:

Vim is a text editor (just like VSCode) that runs in your terminal.
Once you open Vim, you get into an interactive mode.
IMPORTANT: Vim has multiple modes.
IMPORTANT: Vim operates on commands.
Vim is extremely configurable.

Theory behind modes & commands:

When you first open Vim, you are in NORMAL mode (otherwise knows as MASTER mode) . This is like your home base. You always want to make sure you are in NORMAL mode before you execute any commands. Press i to jump to INSERT mode. Note that once you are in INSERT mode, all your keystrokes will result in text. In other words, you will not be able to enter any commands. In order to do so, you will need to go back to NORMAL mode, which is easily achievable by pressing the <ESC> key.

Feel free to reference the diagram below. Keep in mind that VISUAL mode is simply another mode, just like INSERT mode, accessible by pressing v.

Source: https://github.com/nilp0inter/Vim-for-Muggles

Every Vim command starts with a colon : and is followed by a special keyword. Remember that you can only execute commands in NORMAL mode.

Now that you understand the concept of modes & commands, go back to your terminal, and add some text to your file while in INSERT mode:

3. Closing Vim

To wrap this up, let’s make sure to have stackoverflow’s most popular question answered. Numerous people (including me) end up opening Vim by mistake, and not knowing how to exit it (in my case, it was after a git commit command without a -m message).

With the knowledge you have now, this is simply a matter of executing the right command. make sure you are in the NORMAL mode by pressing <ESC> and use the adequate :q command from the list below to quit Vim.

:q - no changes were made
:q! - trash all changes
:wq - save the changes

Using the :wq command to write changes and quit Vim.

WORKFLOW RECAP:

Open file using Vim: vim
INSERT mode: press i
NORMAL mode: <ESC>
Save Changes & Exit: :wq
Exit Without Saving Changes: :q!

If you think you got a handle on the 5 steps from the recap above, then congratulations 🎊 you are now a Vim user!

NEXT STEPS:

Although this article might help you get your feet wet with Vim by accomplishing basic text editing operations quickly via the terminal, it only encompasses about 1% of Vim’s potential. If you want to learn more, vimtutor is a fantastic built-in command that will pull up important Vim lessons on your terminal. You can also access it on the web via vimtutor.

Still trying to grow your Vim knowledge? Checkout these resources:

🌐 Official Website: https://www.vim.org/
🎥 Youtube Playlist: https://www.youtube.com/watch?v=_NUO4JEtkDw&list=PLMHNm2pfuJiuJUOSpIyGJHpk3B7PCvpBw
🌐 Wikipedia: https://en.wikipedia.org/wiki/Vim_(text_editor)
📜 My personal favorite Vim Cheat Sheet: https://devhints.io/vim
🌐 Tutorial: https://www.tutorialspoint.com/vim/vim_quick_guide.htm
🎨 Personalize Vim by editing .vimrc: https://dougblack.io/words/a-good-vimrc.html

Original Source: https://medium.com/swlh/getting-started-with-vim-3f11fc4f62c4

Deploying a Static Bootstrap Website to Google Firebase

Marouen Helali — Fri, 14 Feb 2020 20:25:56 +0000

What You’ll Need to Get Started

An activated Google Cloud Platform account
Google Cloud SDK

If you have previously worked on some HTML + CSS web pages, or anticipate to, you can only showcase your work to the world by uploading your project files to a hosting source where your websites become accessible through the internet. This has been a painful task in the last couple of decades. However, it has gotten much easier today. With all the cloud technologies getting more and more popular—and the pricing for the services getting cheaper and cheaper—you can basically host your website for free today with the help of some tools like Google Firebase Hosting.

You are free to choose any static website to upload to Firebase Hosting. If you already have a project ready to be uploaded to the cloud, feel free to skip the first step below.

1. Creating a Bootstrap Website from a Template

For this tutorial, we will be using a Bootstrap template. To get started, let’s get a Bootstrap project from your favorite source of Bootstrap templates. I like to use Start Bootstrap. For my project, I will use an easy template for simplicity. Once you have chosen yours, download it to a known folder then edit your index.html to personalize your page. Finally, open your index.html page in the browser to see your changes. Below is the template I downloaded before and after adding some changes.

2. Creating a Firebase App

Navigate to the Firebase console and create a new project. Below is a series of screenshots representing every step of the process. You are free to enable/disable Google Analytics, but it is not a necessity.

3. Preparing Project for Deployment

Before we can use the CLI to deploy our static website, we need to have a default public directory with our static files in it. So, in your project directory, move all your website files to a new folder named public. Follow the screenshot below for help.

The last change we will need to make to our project before deploying it is to include the Firebase SDK. Upon creating your Firebase app, you will be shown a code snippet (see screenshot below). This is responsible for allowing your static website to interact with Firebase. Copy the code block and add it to the bottom of your index.html.

4. Using the Firebase CLI

If you do not have firebase installed, use this link or this npm command:
npm install -g firebase-tools

Now, using the terminal, make sure you are in your project’s directory and execute these three commands in order. Follow screenshots for detailed steps.

firebase login

firebase init

firebase deploy

Visit the hosting URL shown at the bottom of your terminal and you should see your deployed static website. Here is mine. You can also find some more information about your hosting in the Firebase console. You made it! 🎉

As an optional cleanup task, add .firebase, .firebaserc, and firebase.json to your .gitignore.

Check out the Github repo for the source code that was used for this article.

Original Source: https://medium.com/better-programming/deploying-a-static-bootstrap-website-to-google-firebase-a2eb043ff015

Deploy a Vue.js App to Heroku

Marouen Helali — Fri, 14 Feb 2020 17:53:07 +0000

Prerequisites:

Git
Node
Vue CLI
Heroku CLI
Free Heroku Account

To get started, use the Vue CLI to generate a new Vue app:

vue create <app-name>

If prompted for preset by the CLI, choose default.

cd <app-name>

Now that you are in your new project directory, let’s try to run this app to make sure everything is working as expected. But first, I like to run my web apps uniformly using npm start, and so does Heroku. Sadly, when initializing a Vue app, the start command is different (npm run serve). Let’s quickly change that. In your project folder, open the package.json file.

The curly braces block contained in scripts indicates the aliases for the commands to their right. Simply replace serve by start. You should end up with something like this:

{
  "name": "vue-heroku",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
.
.
.
}

Let’s give it a shot by going back to the terminal and running:

npm start

Navigate to http://localhost:8080 and you should see the Vue-generated app.

Next, our Vue app is a simple front-end-only app. We can either serve it through a server, or we can serve the build files statically. Let’s go with the second option, which is much less cumbersome.

All that’s required to do is to add one file to our project and one buildpack to Heroku. Create a file called static.json in the root of your project repo. Add this content to it (official source):

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

At this point, we are done editing our project. We can go ahead and commit our changes to Git by doing:

git add . && git commit -m "Heroku config"

Let’s create a production build:

npm run build

Finally, here comes Heroku. Assuming you have the Heroku CLI, run:
heroku login

Press any key, and this will pull up a browser window for you to login:

We are ready to create a new Heroku app using the CLI. Run:

heroku create

A very important step is to run these two commands:

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

This will allow Heroku to serve our app as a static app.

Now we can finally execute the deploy command:

git push heroku master

Navigate to the remote URL and you should see your Vue app.

Here is mine. You will also find your deployed app in the Heroku dashboard, which contains a lot of useful information if you would like to explore more. Here is what my dashboard looks like for reference:

Here is a link to the Github repo that contains the Vue app that was used for this article, along with all the modifications.

Thank you for visiting, and keep on reading!

Original Source: https://medium.com/better-programming/deploying-a-vue-js-app-to-heroku-d16f95c07a04

Deploy a React App to Google Cloud Platform using App Engine

Marouen Helali — Fri, 14 Feb 2020 17:38:56 +0000

Prerequisites:

Node
An activated Google Cloud Platform account
gcloud CLI

To get started, use npx to generate a new React app using create-react-app:

npx create-react-app <app-name>

Once npx has generated all the necessary files for your React app, let’s make sure it runs fine by doing:

cd <app-name>
npm start

In your favorite browser, navigate to http://localhost:3000
You should see a screen similar to this one:

Now that your app is up and running, let’s create a production build out of it. To do so, simply run:

npm run build

At this point, there is nothing left to do from a React perspective. The next step is to configure a new project in the App Engine. Then, all that is left to do is to use the Google Cloud SDK to deploy our freshly built React app to GCP.

Here is a series of screenshots that will walk you through how to do the first part: configure a new project in the GCP App Engine.

If you followed the steps successfully, you should be able to see your Google App Engine dashboard like the last picture above. That was the last thing we had to do with the App Engine web console. Now, our focus will be on using the gcloud CLI. Verify that you have it by executing:

gcloud -v

If you are having trouble installing it, here is your official guide.
Now navigate to your React app folder. We need to create a new app.yaml file in the root of our project folder that the gcloud CLI will use to deploy our app to the App Engine. After you create the file, add this content to it (official source):

runtime: nodejs
env: flex
# This sample incurs costs to run on the App Engine flexible environment.
  # The settings below are to reduce costs during testing and are not appropriate
# for production use. For more information, see:
# https://cloud.google.com/appengine/docs/flexible/nodejs/configuring-your-app-with-app-yaml
manual_scaling:
  instances: 1
resources:
  cpu: 1
memory_gb: 0.5
disk_size_gb: 10

Make sure to save the file, and now we are finally ready to use the CLI:

gcloud init

Follow the steps to add your account, region, and make sure to pick the project you just created.

Once that has been initialized successfully, we can run the final and ultimate deploy command:

gcloud app deploy

After a few minutes, you should see a link in “Deployed service [default] to”:

Visit it in your browser to find your deployed React App. Here is mine.
Congrats Champ! You did it! 🎉🎉🎉

Here is a link to the git repo that contains the React app and the YAML file that was used for this article. Thank you for reading! 💟📖

Original Source: https://medium.com/better-programming/deploy-a-react-app-to-google-cloud-platform-using-google-app-engine-3f74fbd537ec

Deploy an Angular Application to AWS S3

Marouen Helali — Fri, 14 Feb 2020 15:31:42 +0000

Prerequisites:

To get started, use the Angular CLI to generate a new Angular app:

ng new

You will be prompted for a name for your app, and some configuration choices. Once the CLI has generated all the necessary files for your Angular app, let’s make sure it runs fine by doing:

cd <app-name>
ng serve

In your favorite browser, navigate to http://localhost:4200. If you used Angular 8, you should see a similar screen to this:

Now that your app is up and running, let’s deploy it to S3. To do so, you will need to log in to your AWS account and go to the S3 console.

Click on the Create Bucket button, and follow the steps to give your new bucket a name and choose an adequate region.

Leave the Configure options as is, and uncheck the Block all public access in the Set permissions section. Now review and create your bucket. Your final screen should look like the image below:

Our new bucket looks great. But it will look even better when we fill it up.
Currently, all we have is a folder with an Angular app. We need to generate the build files, so S3 can understand and serve them. Let’s go back to our Angular app and simply run:

ng build --prod

You should see a new dist folder in your project directory. It contains
browser-understandable files that you now need to upload to your bucket.

Go back to S3 to upload the content of your dist folder. Make sure you choose the Grant public read access to this object(s) in the Manage public permissions dropdown.

Leave the Set permissions and Set properties as-is. Then click Upload. Here are some helpful screenshots:

Now, navigate to Properties and expand Static website hosting.

Click Use this bucket to host a website and enter index.html for Index document. Click Save.

After saving it, you should see a colored checkmark for Bucket hosting indicating that it is now enabled. At the top, Endpoint is the link for your freshly deployed Angular app.

After a minute or so, navigate to that link to see the result. Congrats! You just deployed your Angular app to AWS S3!

Original Source: https://medium.com/better-programming/deploying-an-angular-app-to-aws-s3-301e0c3827d7

CI/CD with Travis CI and Google Firebase

Marouen Helali — Wed, 12 Feb 2020 19:34:44 +0000

Image Source: https://cloud.google.com/solutions/continuous-delivery-with-travis-ci

Hello everyone. It came to my attention how important automation is when I started working for a big corporation. I realized that if you do not automate all your scripts, you are most likely not going to do any testing at the end. Tech debt can become a real problem.

Have you ever thought of having all your “post-Github-push” commands ( otherwise knows as deployment process) done for you automatically?

Well today you will learn how to do so in 5 mins. And yes, all you will have to do, is push your new changes to your Github repo. Everything from there on will be taken care of.

Prerequisites : Github account, Travis CI account, Firebase account.

Find out what your process is after making changes to your repo:

In my case, after I push my changes to Github, I like to make sure it is passing all the linting, e2e tests, and unit tests. afterwards, I would like to build for production, and deploy to Firebase. Quite a few steps. As I said, automation.

Image Source: https://travis-ci.com/images/logos/TravisCI-Mascot-1.png

Click the + button next to Repositories on the left. You should see your Github repos. Use the toggle to enable the repo you are trying to use Travis CI with. You should be able to see something similar to this:

Add a .travis.yml file to the root folder of your project. Within this file, we are going to specify which server-side language we are using, and its version ; in our case, we are using nodejs 10. Next, we add our scripts from step 1. that we want to execute as soon as Travis CI receives a commit that you pushed to Github. Your .travis.yml fire should look similar to this:

language: node_js
node_js:
- '10'
script:
- ng lint
- ng e2e
- ng test
- ng build --prod

Congratulations, you just ran your first automated CI build pipe.

Additional Step: Automatic deployment to Firebase (Assuming you have already deployed your project to Firebase Hosting)

If you would like to also deploy to firebase after your tests and build succeed, you will need to execute this command in your project root:

firebase login:ci

This will open up a browser tap and ask you for some permissions to sync up Github/Travis/Firebase together. At the end, you will see a nice token in the terminal. Save it, we are going to need it in the next step.

Now we are almost there, we just have to do one last cool thing: Encrypting the token for Travis to understand. We need Ruby for that.

install Ruby
gem install travis
travis encrypt "PASTE_YOUR_TOKEN_HERE"

You should have received an encrypted token that you can now add to the deploy part of your .travis.yml to finally have your project automatically deployed to firebase each time you push changes successfully to Github!

deploy:
 provider: firebase
 token:
  secure: "PASTE_TRAVIS_ENCODED_TOKEN_HERE"
message: "this is an automatic deployment by travis - CI as a result of pushing to master"

Now make some changes, push to Github and watch your dreams come true on the Travis CI website. You should see something like this for a successful build:

Now if you go to your Firebase hosted website, you should be able to see that your new changes took place. Enjoy!

Original Source: https://medium.com/faun/ci-cd-with-travis-ci-and-firebase-20b6c69fa8f7

Intro to Quantum Computing with Qiskit and IBM Q

Marouen Helali — Wed, 12 Feb 2020 17:22:08 +0000

At the end of this tutorial, you will be able to simulate the behavior of quantum circuits on your computer using Qiskit. You will also be able to connect to the IBM Q backend and access IBM’s quantum computer through the cloud (believe it or not, it’s free and everyone can access it).

Before we dive into real work, I want to lay down the requirements, and how to get them:

You will need to have Python ( version > 3.5 ), Anaconda, and the Jupyter Console. You can install all of them at the same time, simply by getting the Anaconda distribution. You can find it here.

Next, you will need to install the Qiskit library. In order to do that, you can use any package management system, but for the purpose of this tutorial I will demonstrate the steps of doing it using PIP. Now, you will need to get PIP which is a package management system for Python. Use this command to install PIP:

sudo apt install python-pip

then use pip to install Qiskit using this command:

pip install qiskit

You are almost there. Now all you need to do is to open up a terminal window. Then, type in:

jupyter console

You should have a similar screen to this.

Congratulations, now you are ready to start executing commands and exploring the behavior of quantum circuits.
I want to cover the theory behind the experiment that we will be doing, but first, it is good to know the difference between a Qubit and a regular bit. If you haven’t heard already, quantum computers use Qubits instead of classical bits to perform their tasks. Qubits are quantum-mechanical systems that can result in a 0 or a 1 or some superposition of them. Here is a good picture to show that:

Reference: https://sureshemre.wordpress.com/2016/11/27/qubit/

In the last picture, you can see on the left the possible values of classical bits, versus on the right, the values a Qubit could take. These values can be represented by a percentage of the relative probability of finding the qubit in one state of the superposition or another. That probability could be given by the distance from the center of the position within a unit sphere. So basically, if it is closer to the bottom (relative to the picture), then it will be a 1, otherwise it will be a 0.

To avoid confusion, I want to stress that quantum bits, just like classical bits, always result in either a 0 or a 1. They do not take on any other different values. But how they get there, is what is different from classical bits, and that is what makes it powerful.

Back to the theory. So the big picture of what we will be doing in this tutorial is trying to cause an entangled state (also known as the Bell State). Buzzwords aside, look at the past sphere: the states along the axis running from 0 to 1 are essentially classical states. Now imagine two Qubits’ positions being right at equator of the circle of the sphere (equidistant from the poles). That is a 50 50 chance of being 0 or 1, and boom that’s an entangled state. In such a superposition state, each Qubit possesses correlations such that neither Qubit’s state can be fully described without referencing the state of the other Qubit. This is the simplest way to demonstrate the difference between a Quantum Computer and a classical one.

Let’s dive right into coding after making sure you are working in your preferred directory. Let’s first start by creating a quantum circuit made out of a quantum register and a classical register. to do so, you will need to import qiskit, and define some variables. If you are familiar with Python, you will find ease at doing this, since under the hood, we are just coding in Python.

import qiskit as qk qr = qk.QuantumRegister(2) cr = qk.ClassicalRegister(2) qc = qk.QuantumCircuit(qr,cr)

At this point, I want to introduce a mobile application called Hello Quantum. It is made by IBM and it looks very similar to a puzzle game. However, it explains how the quantum gates work and their behavior very well. I suggest playing with it for a little bit if you are interested in learning more about the circuit composition. The app’s icon looks like this:

Back to the code, now we can add operations to our circuit. We previously defined two registers (one quantum and one classical) and made a circuit out of them. Next, let’s apply a Hadamard gate on the quantum register and a cnot (controlled not) gate on the classical register.

qc.h(qr[0])
qc.cx(qr[0],qr[1])

Let’s add the measurements to the circuit we just created. Since we want to do the measurements with and without a Hadamard gate beforehand, it will be easier to create separate circuits for the measurements and combine them with our entangling circuit.

The measure_Z circuit will just do our measurement in the standard basis. Afterwards, we use a qiskit function to store the result in the classical register

measure_Z = qk.QuantumCircuit(qr,cr)
measure_Z.measure(qr,cr)

We’ll call our second measure measure_X and we’ll apply a Hadamard gate to it before the measurement.

measure_X = qk.QuantumCircuit(qr,cr)
measure_X.h(qr)
measure_X.measure(qr,cr)

Now that we have defined our measurement circuits, we can append them to our entangling circuit, creating two new circuits that we will label test_Z and test_X.

test_Z = qc + measure_Z
test_X = qc + measure_X

These are all the previous commands executed successfully to help make sure you nail them.

Now we get to the more exciting stuff! Real Quantum Computer connection!

Navigate to https://quantumexperience.ng.bluemix.net/qx and make an account and login. Once you are logged in, click on the avatar picture on the top right corner and go to account, then to advanced. You will be able to see a similar screen to this.

Copy your API Token, we will use it shortly.

Next, import IBMQ and get ready to connect to a quantum computer!

from qiskit import execute, IBMQ
IBMQ.enable_account("Paste your APItoken here")

Make sure you pass in your APItoken as a string. Now if you run IBMQ.backend() you should be able to see all the backends available to you by IBM. If you look closely, they are under IBM Q Backend Acces on your IBM Q account. Now let’s define a variable for our backend and start executing some code on the QC.

backend = IBMQ.get_backend('ibmqx4')

I chose ibmqx4 for this example, but this is purely up to you what to use. Sometimes some backends go on maintenance, so I always check what backends are available before I choose one. Here is quick summary of the backend connecting.

Now remember the test jobs that we were preparing out of the circuits earlier? Now we are going to use them! let’s create a job this way:

job= qk.execute([test_Z, test_X], backend = backend, shots = 1000)

Next, let’s execute job.status() a few times, to monitor the status of the job. It should be queued if there are a lot of use for the quantum machines (or if you picked a busy one, a quick fix is to go back and redefine the variable for the backend with a different provider!), and after a bit, it should succeed. This is what I got from following that.

At this point, the next step is to get the result for the execution of the job.

result = job.result()
result.get_counts(test_Z)
result.get_counts(test_X)
from qiskit.tools.visualization import plot_histogram
plot_histogram(result.get_counts(test_Z))

those were the results from my execution. Yours may vary. The interpretation of that is that because of the execution on a quantum computer, we have shown the existence of the “Bell State”, which is when a Qubit is in the right middle between a 0 and 1 and, and only happens in a quantum system. That is given to us by the middle values on the x-axis (01 and 10), which represents the “Bell state”, otherwise known as the entangled state.

Don’t believe me? See for yourself! let’s wrap this up by executing the same job on a local simulator (not quantum). These are the commands you will need to connect to Aer and use their local simulator, and re-execute the past job:

from qiskit import Aer
backend = Aer.get_backend('qasm_simulator')
job = qk.execute([test_Z, test_X], backend= backend, shots=1000)
result = job.result()
plot_histogram(result.get_counts(test_Z))

Here are the results:

As you see from the graphs, there are no entangled state. All boring regular 0 and 1 bits. However, this was just your proof that you were using a quantum computer!
Congratulations if you made it this far and were able to connect to the ibm Q backend and execute your first job!
I want to thank Mr. McClure for being my biggest resource for this article. I utilized a lot of his Youtube video, I suggest you check it out!