Created
June 20, 2022 11:24
-
-
Save KasRoudra/c255c9626a0fa18d7bb3dbb4e4c8cb42 to your computer and use it in GitHub Desktop.
Revisions
-
KasRoudra revised this gist
Jun 20, 2022 . 1 changed file with 12 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,15 @@ { "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": { @@ -298,7 +308,8 @@ "colab": { "collapsed_sections": [], "name": "React-Start.ipynb", "provenance": [], "include_colab_link": true }, "kernelspec": { "display_name": "Python 3", -
Jun 20, 2022 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,313 @@ { "cells": [ { "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": [] }, "kernelspec": { "display_name": "Python 3", "name": "python3" }, "language_info": { "name": "python" } }, "nbformat": 4, "nbformat_minor": 0 }