GAID

Please enter the google analytics ID for appData file.

Delve into using Transcrypt to seamlessly translate Python code to JavaScript for coherent web projects, unifying Python's back-end strengths with JavaScript's front-end flexibility.

tarball.tar.gz

ch02

ch03

ch04

ch05

ch06

ch08

ch09

ch10

ch01

ch12

ch13

ch14

ch15

ch16

ch17

ch18

ch19

ch20

ch21

ch24

ch10-2

ch06-exercise

ch12-jsx

ch19-2

ch25-copy

Python is already used in the back-end of most web-based applications. However, it does not work with the front-end of web browsers in those applications. This is where Transcrypt comes in. Transcrypt can help create more coherent web-based projects where Python is used to write the back-end and front-end. This course is primarily about using a transpiler called Transcrypt. It translates our Python code to JavaScript and then executes that JavaScript, letting us enjoy the neatness of Python with the front-end flexibility of JavaScript.

Using the Python Transcrypt Transpiler for Front-end Coding

When working on an application, it’s always good to know if we have deployed the version we think it is. While code repositories like GitHub are great for versioning in general, that versioning doesn’t always carry through to the deployment of the application. What we’ll present here is one way to tackle that issue.



## The built-in version of npm

As it turns out, the node package manager that we are already using has a built-in feature to version our application. If we look at the `package.json` file, we’ll see a value that holds a semver formatted version number:

```json
"version": "1.0.0"
```
The three numbers in the semantic versioning string represent the `major`, `minor`, and `patch` versions. Conveniently, npm has `version` commands that will increment each of these:
```
npm version patch
npm version minor
npm version major
```
Running one of these commands will update the appropriate part of the semver version value in the `package.json` file. If we update the minor version, it will set the `patch` version to `0`. So version `1.0.3` becomes `1.1.0`. Likewise, if we update the `major` version, the `minor` and `patch` versions will both get set to `0`.

In addition to updating the version in `package.json`, if npm finds a `.git` folder, it will also integrate with Git and automatically commit and tag the version update when we run the command. However, it does have a prerequisite that the Git working directory needs to be clean. If it isn’t clean, the npm version command will fail.

Due to a bug or quirky feature, if our project’s root folder is at a lower level than where the root folder for our Git repository is (as might be the case if we have multiple projects in one Git repository), we’ll need to add an empty `.git` folder to our project folder for the Git integration to work properly with the npm version command.

So if, for example, we have a full-stack application in one Git repository with separate client and server projects in it, our folder structure might look like this:


```txt
full_stack_app/
├─ .git/ <--(actual git repo)
├─ client/
│  ├─ .git/ <--(empty folder)
│  ├─ node_modules/
│  ├─ src/
server/
├─ src/
```





# The built-in version of npm

As it turns out, the node package manager that we are already using has a built-in feature to version our application. If we look at the `package.json` file, we’ll see a value that holds a semver formatted version number:

```json
"version": "1.0.0"
```
The three numbers in the semantic versioning string represent the `major`, `minor`, and `patch` versions. Conveniently, npm has `version` commands that will increment each of these:
```
npm version patch
npm version minor
npm version major
```
Running one of these commands will update the appropriate part of the semver version value in the `package.json` file. If we update the minor version, it will set the `patch` version to `0`. So version `1.0.3` becomes `1.1.0`. Likewise, if we update the `major` version, the `minor` and `patch` versions will both get set to `0`.

In addition to updating the version in `package.json`, if npm finds a `.git` folder, it will also integrate with Git and automatically commit and tag the version update when we run the command. However, it does have a prerequisite that the Git working directory needs to be clean. If it isn’t clean, the npm version command will fail.

Due to a bug or quirky feature, if our project’s root folder is at a lower level than where the root folder for our Git repository is (as might be the case if we have multiple projects in one Git repository), we’ll need to add an empty `.git` folder to our project folder for the Git integration to work properly with the npm version command.

So if, for example, we have a full-stack application in one Git repository with separate client and server projects in it, our folder structure might look like this:


```txt
full_stack_app/
├─ .git/ <--(actual git repo)
├─ client/
│  ├─ .git/ <--(empty folder)
│  ├─ node_modules/
│  ├─ src/
server/
├─ src/
```




Add the npm version to our Transcrypt project.

The npm Version

Introduction

The Setup

Write a “Hello, World” Application

JavaScript Functions

Sourcemaps

External JavaScript Libraries

Intro to React

React Concepts

Cleaner Code

Managing JavaScript Packages

Package Bundler

Text Input

Lists

Forms

React Components

JavaScript Examples

CSS

Material-UI

Parcel Web Proxy

Asynchronous Requests

React Context Hook

Transcrypt Miscellany

Application Versioning

Google Analytics

Developer Tools

Appendix

The npm Version

The built-in version of npm