How to Edit and Deploy Our Website Code Using Only a Mobile

Hello everyone, in this blog post, we are going to uncover the power of smartphones to do coding.

We will understand how we can make some changes to our existing website code and deploy these changes to production using our phone.

Using our phone, we can code for a new website, but because of the small screen size, we will face many problems. However, it is possible.

I have made some changes to my existing blog writer website and deployed it, so here I will discuss how I have done this.

This is possible using VS Code for Web and GitHub Codespaces. VS Code gives us a similar feel and features as the Windows version of VS Code, with some limitations. GitHub Codespaces provides the ability to test, debug, build, and deploy our code.

GitHub Codespaces is a secure cloud development environment, which we can consider as a cloud computer accessible with a GitHub account from any device, anytime.

As individuals, we can use it up to 60 hours a month without paying anything, and after that, we will need to pay according to the pay-as-you-go pricing model.

It provides many features like a secure development environment, collaboration, and the ability to test forwarded ports on multiple devices. You can learn more about it from the GitHub Codespaces documentation.

So to do coding on my mobile, I have bought a keyboard and mouse and connected them using a USB hub. I have logged in to my GitHub account and gone to the GitHub Codespaces page from the menu.

Here, we can use different web templates to create a code space for different types of web projects like React, Next.js, and more.

I started with a blank code space and created the folder structure of my Next.js project, uploaded and copy-pasted my code into each file, installed all dependencies using the terminal, made changes, tested it, and finally deployed it.

So this is how I made changes to my website, but I want to mention some problems and points that I faced and used to simplify my coding.

• First of all, I faced the screen size issue and partially overcame it using full-screen mode (F11).
• I installed the extensions that I needed and made some changes to keyboard shortcuts.
• Here, we can't backspace multiple lines of code; we need to use the cut feature (Ctrl+X).
• Accept suggestions using Tab, not Enter.
• I tried to make similar keyboard shortcuts as I use on Windows, but I was not able to do that for a few, like suggestion accepting.

Below is the JSON file of key bindings of keyboard shortcuts that I used. You can use it or make your own similar to this.

// Place your key bindings in this file to override the defaults
// suggestion accepting shortcut not working with enter, 
// and I don't know why, so kept tab
[
    {
        "key": "enter",
        "command": "acceptSelectedSuggestion",
        "when": "suggestWidgetHasFocusedSuggestion && suggestWidgetVisible && textInputFocus"
    },
    {
        "key": "tab",
        "command": "-acceptSelectedSuggestion",
        "when": "suggestWidgetHasFocusedSuggestion && suggestWidgetVisible && textInputFocus"
    },
    {
        "key": "ctrl+shift+numpad_subtract",
        "command": "editor.foldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+0",
        "command": "-editor.foldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+shift+numpad_add",
        "command": "editor.unfoldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+k ctrl+j",
        "command": "-editor.unfoldAll",
        "when": "editorTextFocus && foldingEnabled"
    },
    {
        "key": "ctrl+d",
        "command": "editor.action.duplicateSelection"
    },
    {
        "key": "shift+alt+down",
        "command": "editor.action.moveLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "alt+down",
        "command": "-editor.action.moveLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "shift+alt+up",
        "command": "editor.action.moveLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "key": "alt+up",
        "command": "-editor.action.moveLinesUpAction",
        "when": "editorTextFocus && !editorReadonly"
    }
]

We all know that we can't code as efficiently as on a computer, but in some situations where we need to do some coding but don't have a computer, we can use our mobile in this way to do our work.

I hope you find this post helpful and informative. For any suggestions, ideas, and questions, feel free to comment below. Until next time, happy coding!