React-Start.ipynb

react-start.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/gist/KasRoudra/c255c9626a0fa18d7bb3dbb4e4c8cb42/react-start.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "4N3FEq-ag5e_"
      },
      "source": [
        "**Delete unnecessary files (optional) to prevent overwrite error while unzipping.**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "1C9FWND9NGgi"
      },
      "outputs": [],
      "source": [
        "!find -name '.*' -type f -delete && rm -rf .config/"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "kJG4xXplh0HN"
      },
      "source": [
        "**Zip your files and folders of react project into source.zip. Upload that in current directory of colab. Or you can also git clone**"
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "!unzip source.zip"
      ],
      "metadata": {
        "id": "aULhVmtCyCjz"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "SZb7LI5gNLMC"
      },
      "outputs": [],
      "source": [
        "!git clone https://github.com/kasroudra/supremeFolio ."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "ikzGZUdrjTxF"
      },
      "source": [
        "**This step will install npm/yarn dependencies.**"
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "!npm i -g yarn && yarn"
      ],
      "metadata": {
        "id": "E1TCok5Ly2w3"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "KilawJZeNRRz"
      },
      "outputs": [],
      "source": [
        "!npm install"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "tAWD4TZ_iygz"
      },
      "source": [
        "**Run this command to install ngrok.**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "dXf0y4SXNXdo"
      },
      "outputs": [],
      "source": [
        "!pip install pyngrok"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "p8hmPhlkjq9o"
      },
      "source": [
        "**After installing ngrok import it**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "HKZ6PfHkNdbU"
      },
      "outputs": [],
      "source": [
        "from pyngrok import ngrok"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "FIxHHxt6IrMW"
      },
      "source": [
        "**Kill all running instances of ngrok**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "gleZUpxAIsQ3"
      },
      "outputs": [],
      "source": [
        "ngrok.kill()"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "tIrAWLp9IsrW"
      },
      "source": [
        "**Set up your ngrok authtoken. Get it from [here](https://dashboard.ngrok.com/auth)**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "cOGY5AAJMWyV"
      },
      "outputs": [],
      "source": [
        "NGROK_AUTH_TOKEN=\"\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "9AB0PculItEB"
      },
      "outputs": [],
      "source": [
        "ngrok.set_auth_token(NGROK_AUTH_TOKEN)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "q4_NfoF_JP1M"
      },
      "source": [
        "**Now, ngrok is ready to start. Start ngrok at port 3000**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "J_6P71jGJQY0"
      },
      "outputs": [],
      "source": [
        "ngrok_url = ngrok.connect(3000)\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "RB-msy32JQuf"
      },
      "source": [
        "**Now run this to get your desired url**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "RjjrLvEyJRPc"
      },
      "outputs": [],
      "source": [
        "print(ngrok_url)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "N8vVNAZCJrb5"
      },
      "source": [
        "**Now finally start react app in localhost. After it starts, visit ngrok url**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "JWfLRGLUJr7e"
      },
      "outputs": [],
      "source": [
        "!npm start"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "xhJsNCSpn031"
      },
      "source": [
        "**If everything is ok, you can zip the entire project and download it as source.zip**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "lgLM0pNvoEgh"
      },
      "outputs": [],
      "source": [
        "!rm -rf source.zip && zip -r source.zip * -x \"node_modules/*\" \"build/*\" \"build.zip\""
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "pVtYsuzZoQwj"
      },
      "source": [
        "**Or you can also build the project**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "-f4u6Lcdn1U7"
      },
      "outputs": [],
      "source": [
        "!npm run build"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "rDOS7d16n1mO"
      },
      "source": [
        "**This command will zip built files and create a `build.zip`**"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "nBBAZipDpaW4"
      },
      "outputs": [],
      "source": [
        "!zip -r build.zip build/*"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "collapsed_sections": [],
      "name": "React-Start.ipynb",
      "provenance": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}