Forem: Sam

Setting Up Python Virtual Environments

Sam — Sat, 22 Aug 2020 13:08:08 +0000

venv is a package shipped with Python 3, which you can run using python3 -m venv (although for some reason some distros separate it out into a separate distro package, such as python3-venv on Ubuntu/Debian). It serves the same purpose as virtualenv, but only has a subset of its features see a comparison here. — source

What is the benefit of using wrapping your code into a virtual environment?

it isolates the project-related libraries and it doesn’t access the globally installed libraries. We can think of it as if the project would live on its own island, isolated from the rest of the world, having its own little things going on 🌴

Creating aliases

Before we move on, let’s create some aliases for convenience of use.
If you type which python in terminal, it will print out the path for the python executable, which should be something like this /usr/local/bin/python3.
Then, open ~/.bashprofile you can type cat ~/.bashprofile to open it directly in terminal or use any other way suitable for you. And add there the following line:
alias python=”/usr/local/bin/python3”
Basically, we created an alias python for python3, and what it will do is each time you will be using python command it will be referring to python3, which I find neat. And, of course, you can skip this step if you want to.

Creating a virtual environment

Creation of virtual environments is done by executing the command venv:
In my case, I already had some script saved in folder in Desktop, so I wanted to sort wrap it in the venv.
➜ script git:(master) python -m venv /Users/user/Desktop/script
In the example above I refer to the script using the absolute path, however the relative path like ~/Desktop/script should also work.

Activating the virtual environment

To activate virtual environment type the following command:
➜ script git:(master) ✗ source /Users/user/Desktop/script/bin/activate
And let’s say we have a requirements.txt file, which specifies all the dependencies required to successfully running the python project, now all those dependencies/libraries will be installed and accessible only within this virtual environment.

Note

If you exit the terminal, next time you want to run your project you will need to source ~/.bashprofile AND re-enable the virtual environment (using activate command from above).
That’s all Folks! ☕

Prisma + GraphQL. Project Setup Pt1

Sam — Wed, 15 Jan 2020 21:58:43 +0000

So, I started to work on my personal portfolio as an aspiring Junior Frontend developer before I switched my career to Security Analyst :D

At my previous job we were building an internal testing tool (top secret stuff), and the stack we used was pretty trendy on the frontend side, it was React with Typescript and other friends.

So, I wanted to develop my skillset further, and on top of that learn a bit of backend, while building a personal project for my portfolio.

I would probably do something with NodeJS, Express, MongoDB and React-Typescript, since I actually wasn’t sure about the backend, and at the same time I didn’t want to go that deep into it rather just having fun while building my precious UI.

But then my colleague told me to look into Prisma and GraphQL… and I was sold!

GraphQL is sexy. See why "GraphQL is the better REST"

The Stack

Backend

Prisma v 1.34 — an open source library, that sort of sits on top of your database and provides a full-featured GraphQL API that you can use to interact with the database.
Apollo Server v2 — implements a GraphQL server and can be queried from ApolloClient.
Node.js v8.9.4 or later
PostgreSQL

Frontend

React v16.8 — in particular Create-React-App will serve as a great template for starters.
ApolloClient v2.6 — will be responsible for requesting and caching your data, as well as updating your UI

Initial Setup

While I was deciding on how to approach the backend, I had already cloned create-react-app and installed nodejs. Fairly easy, so I won’t focus on it here.

However, for beginners, I think it is worth mentioning the folder structure.

So, inside my-app folder, you will have two other folders: backend and frontend. Each of them has their respective package.json files, which have their scripts to start the server-side with node and the frontend.

Prisma Setup

Install the Prisma CLI

npm install -g prisma

Set up Prisma using Docker, in order to use Prisma locally. For this, you will create a Docker Compose file that configures Prisma and specifies the database it can connect to, in my case its a brand new Postgres db.

touch docker-compose.yml

Paste the contents of the file below into your docker-compose.yml file.

To launch Prisma and the connected database:

docker-compose up -d

And now Prisma is connected to your local database and runs on http://localhost:4466, which was specified in the configuration file above.

You might want to access Prisma admin panel http://localhost:4466/_admin to gain more detailed view of the responses when querying your database. You can also delete records from your database there.

To find out how you can secure your Prisma server, see this

Configure your Prisma API

To bootstrap the configuration files for your Prisma client run the following command, where endpoint needs to match the URL of a running Prisma server.

prisma init --endpoint http://localhost:4466

This will create the minimal setup required to deploy the Prisma datamodel: prisma.yml and datamodel.prisma. And it will allow you to finally deploy the Prisma API.

Few things before deploying.

Add the following lines to the end of your prisma.yml:

generate:
  - generator: graphql-schema
  output: ./generated/prisma.graphql

This will generate our GraphQL schema which we will be referring to when building queries and mutations.

Now let’s deploy using the following command.

prisma deploy

At this point you can consider your Prisma set up done. 🎉🎉🎉

In the next part, I will set up both Apollo Client and Server, as well as write my first queries and mutations.

TSLint -> ESLint/CRA/Typescript/Prettier

Sam — Wed, 21 Aug 2019 21:34:23 +0000

If you have read my previous article and added TSLint support to your React App, at some point you will have to migrate to ESLint for the reason that TSLint is going to be deprecated (which I also mentioned in “Set Up TSLint and Prettier in VS Code for React App with Typescript”).

Below I describe the steps for successful migration, along with providing file configurations to make it easier for you to jump right into using ESLint in your React App with Typescript. Enjoy!

package.json

Your package.json should contain at least the versions below:
typescript@3.4.5
react-scripts@^3.0.1
react@^16.8.6

script

in your package.json specify the script:

“lint:ts”: “eslint --ext=jsx,ts,tsx src”

remove everything related to TSLint (if you have any)

yarn remove @typescript-eslint/eslint-plugin-tslint tslint tslint-config-prettier tslint-react

install ESLint

⚠️ ESLint is coming with Create-React-App, so you can skip this step.

You can install ESLint using yarn or npm:
npm install eslint --save-dev

yarn add eslint --dev

Set up a configuration file (.eslintrc)

You should then set up a configuration file:
$ ./node_modules/.bin/eslint --init

You will have to go through prompt and choose what will go into the auto-generated .eslintrc.js file.

for more details check this link: Configuring ESLint

Of course, you will still have to customize this file if you want to have typescript, react and prettier support.

.eslintrc.js

So, this is pretty much the main config file. It contains the information about which configs, plugins for linting you are using. You can tweak the recommended rules from here as well.

.eslintignore

If you don’t want to lint certain files, then at the root level of your application’s folder structure you can add a .eslintignore file, where you can list any files that should be ignored.
For example:

src/serviceWorker.ts
src/tests/

eslint with React

And to support React-related rules you can install eslint-plugin-react, you can find the list of all rules here

install the plugin: npm install eslint-plugin-react --save-dev

yarn add eslint-plugin-react --dev

the presets to get reasonable defaults:

"extends": [
"eslint:recommended",
"plugin:react/recommended"
]

On top of that you can add a plugin to lint react hooks:

eslint-plugin-react-hooks

install:

npm install eslint-plugin-react-hooks --save-dev

yarn add eslint-plugin-react-hooks --dev

enable your react-hooks plugin in .eslintrc.js:
"plugins": ["@typescript-eslint", "react-hooks"]
the rules that it activates:

"rules": {
// ...
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}

setting up ESLint to work with TypeScript

Why typescript-eslint?

Now that you already have eslint and you would like to extends its capabilities to typescript, install the following to the dev dependencies:
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

@typescript-eslint/parser: eslint-specific parser that understands typescript AST format
How do I configure my project to use typescript-eslint?
@typescript-eslint/eslint-plugin: provides a good dose of typescript-specific eslint rules

tsconfig.json

This file contains essential typescript rules like noImplicitAny, etc.

prettier

Now that you have your eslint-typescript symbiosis you might want to enforce the auto-fixing of code formatting.

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

prettier: the core prettier library
eslint-config-prettier: disables eslint rules that might conflict with prettier

in your .eslintrc.js:
{
“extends”: [“plugin:prettier/recommended”]
}

This will enable eslint-plugin-prettier, set prettier/prettier rule to “error”, and extend the eslint-config-prettier configuration.

eslint-plugin-prettier: runs prettier as an eslint rule

I specified my prettier rules inside .eslintrc.js file above and it works for me to have all the different sorts of rules in one place. However, it is also possible to have them in a separate .prettierrc file if you’d like.
The whole list of prettier’s code formatting options can be found here

So, in my .eslitrc.js file on line 17 I have commented out “plugin:prettier/recommended”, which fully enables prettier plugin, and remember that it is very opinionated, and might conflict with your eslint rules.

prettier and VSCode

download and install vscode prettier extension from here
open VSCode, hit ‘⇧⌘P’ to open the Command Palette… and type in ‘Preferences: Open Settings (JSON)’ and enable eslint auto-fixing like below on line 25–36:

To fix your lint errors run this command:
npm run lint:ts --fix

yarn run lint:ts --fix

That’s all Folks! ☕️