Getting Started with Project Initialization on PWSkills

Are you wondering why you need this guide to set up your project on PWSkills? It's a great question that I asked myself when I encountered issues in my sandbox. I realized that the outdated node version and npm version were causing errors, making it challenging to work on my NEXT.JS development. Since PWSkills was still relying on node version 16, which didn't meet the requirements of NEXT.JS, I decided to share my experience through this blog. Additionally, the templates provided were outdated, prompting the need for an updated guide.

Let's dive into the essential points:

1. Why PWSkills and This Blog?

   Answer: PWSkills Lab is a free platform, similar to GitHub Codespaces but older. As it's not widely known, my blog becomes essential in helping you set up your project on PWSkills.

2. Setting Up Your Project for the First Time:

   To start your project from the template store, search for the programming framework or language you want in the search bar. Click on the relevant result, input your project name, and if you have a Git repo, provide the public URL.

   Click the "Proceed" button and wait for the project to open. Once it does, navigate to the project workspace page.

   Remove all files except the .vscode folder, which is necessary for project setup.

3. Configuration in .vscode Folder:

   • extensions.json: This file is optional but sometimes comes with the project. You can delete it as we'll download all extensions through tasks.json. However, if you want to add specific extensions, save the extension marketplace names in this file.

     Example:

       {
         "recommendations": [
           "dsznajder.es7-react-js-snippets",
           "formulahendry.auto-close-tag",
           "formulahendry.auto-rename-tag",
           "xabikos.JavaScriptSnippets",
           "ms-vscode.vscode-typescript-next",
           "dbaeumer.vscode-eslint",
           "esbenp.prettier-vscode"
         ]
       }
     

   • settings.json: This file is essential for workspace settings. Modify it according to your preferences.

     Example:

       {
         // Terminal Settings
         "terminal.integrated.cursorBlinking": true,
         "terminal.integrated.fontSize": 16,
         "terminal.integrated.enableMultiLinePasteWarning": false,
         "terminal.integrated.fontFamily": "'Cascadia Code'",
         // Editor Settings
         "editor.fontSize": 20,
         "editor.fontFamily": "'Cascadia Code'",
         "editor.lineHeight": 1.5,
         "editor.fontLigatures": "'calt', 'ss01'",
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
         "editor.tabCompletion": "off",
         "editor.tabSize": 2,
         "editor.formatOnSave": true,
         "editor.formatOnPaste": true,
         // Debugging Settings
         "debug.openDebug": "openOnDebugBreak",
         // File and Language Settings
         "files.defaultLanguage": "",
         "files.autoSave": "onFocusChange",
         // Language-Specific Settings
         "[javascript]": {
             "editor.defaultFormatter": "vscode.typescript-language-features",
             "javascript.updateImportsOnFileMove.enabled": "always"
         },
         "[javascriptreact]": {
             "editor.defaultFormatter": "vscode.typescript-language-features"
         },
         "[css]": {
             "editor.defaultFormatter": "vscode.css-language-features"
         },
         "[html]": {
             "editor.defaultFormatter": "esbenp.prettier-vscode"
         },
         "[json]": {
             "editor.defaultFormatter": "vscode.json-language-features"
         },
         "[jsonc]": {
             "editor.defaultFormatter": "vscode.json-language-features"
         },
         "[typescriptreact]": {
             "editor.defaultFormatter": "vscode.typescript-language-features"
         },
         // Prettier Settings
         "prettier.singleQuote": true,
         "prettier.useTabs": true,
         "prettier.tabWidth": 4,
         "workbench.colorTheme": "One Dark Pro Mix",
         // Explorer Settings
         "explorer.confirmDelete": false,
         "explorer.confirmDragAndDrop": false,
         // Live Server Settings
         "liveServer.settings.donotShowInfoMsg": true,
         // Remote SSH Settings
         "remote.SSH.remotePlatform": {},
         // Miscellaneous Settings
         "rapidapi.terminalLink.enabled": false,
         "editor.accessibilitySupport": "off",
         "typescript.updateImportsOnFileMove.enabled": "always",
         "editor.minimap.size": "fill",
         "remote.SSH.defaultExtensions": [
             //remote ssh extensions
         ],
         "oneDarkPro.vivid": false,
         "editor.mouseWheelZoom": true,
         "editor.guides.bracketPairs": "active",
         "workbench.iconTheme": "material-icon-theme",
         "javascript.updateImportsOnFileMove.enabled": "always",
         "editor.minimap.enabled": false,
         "git.enableSmartCommit": true,
         "cSpell.customDictionaries": {
             "custom-dictionary-user": {
                 "name": "custom-dictionary-user",
                 "path": "~/.cspell/custom-dictionary-user.txt",
                 "addWords": true,
                 "scope": "user"
             }
         },
         "terminal.integrated.defaultProfile.windows": "Git Bash",
         "svg.preview.mode": "img",
         "[svg]": {
             "editor.defaultFormatter": "jock.svg"
         },
         "explorer.confirmPasteNative": false
       }
     

   • tasks.json: This file is crucial for downloading extensions and dependencies when you open the project. Understand it carefully.

     Example:

       {
         "version": "2.0.0",
         "tasks": [
           {
             "label": "Install Extensions,  nvm and dependencies",
             "type": "shell",
             "command": "bash",
             "args": [
               "-c",
               "code-server --install-extension formulahendry.auto-close-tag --install-extension formulahendry.auto-rename-tag --install-extension mgmcdermott.vscode-language-babel --install-extension aaron-bond.better-comments --install-extension streetsidesoftware.code-spell-checker --install-extension mikestead.dotenv --install-extension usernamehw.errorlens --install-extension dsznajder.es7-react-js-snippets --install-extension dbaeumer.vscode-eslint --install-extension sguerri.simple-hide-files --install-extension xabikos.javascriptsnippets --install-extension ms-vscode.vscode-typescript-next --install-extension pkief.material-icon-theme --install-extension christian-kohler.npm-intellisense --install-extension zhuangtongfa.material-theme --install-extension christian-kohler.path-intellisense --install-extension esbenp.prettier-vscode --install-extension bradlc.vscode-tailwindcss --install-extension britesnow.vscode-toggle-quotes && curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash && npm i"
             ],
             "presentation": {
               "reveal": "always",
               "panel": "new"
             },
             "runOptions": {
               "runOn": "folderOpen"
             },
             "problemMatcher": []
           },
         ]
       }
     

     In the "Install Extensions, nvm and dependencies" task, the code-server command is used to install extensions, the subsequent curl command installs nvm, and the subsequent npm i command installs all the dependencies.