Submodules with Vercel and Next.js

Maciej Sulecki — Fri, 19 Nov 2021 10:44:23 +0000

Vercel is the team behind Next.js and they have their platform called Vercel, I frequently use it to deploy my Next.js projects and it works great, the concern I had was when I tried to deploy my repo with a submodule there.

See, Vercel does support submodules however only when these are public, which in my case was not an option. I would have to change my whole CI/CD pipeline, stop using the submodule or figure something out.

I started figuring something out.

https://github.com/vercel/vercel/discussions/4566#discussioncomment-125253

First there I've found a confirmation that my problem is real, there really is no support for private submodules on Vercel - and judging by the rate of Vercel bringing new updates to Next.js (very frequent) and the fact that this issue still hasn't been resolved I think that the private submodules still have a long way to come and are not quite high on the TODO list.

After thinking about it and checking out the Vercel docs to find out what are my limitations, I've finally started getting somewhere.

The solution I came up with is a simple script that you run instead of the default installation command on Vercel (instead of yarn or npm install). I've been using this script for half a year now and I have changed it and made it better countless times, now its fully working version works just like the real native private submodule would.

How to use it?

It's rather simple.

📋 Step by step 🚀

copy the ./vercel-submodule-workaround.sh to the root of your project
make sure the file is executable - run this command:
```
chmod u+x vercel-submodule-workaround.sh
```
in your package.json add a script:
```
{
    "scripts":{
        "vercel-install": "./vercel-submodule-workaround.sh && yarn --ignore-scripts --production=false",
    }
}
```
Info:

--production=false ensures that dev-dependencies will be installed, if you dont need your dev-dependencies to install then just delete this flag.

--ignore-scripts ignores pre and post install scripts if you want the scripts to run delete this flag.
Tell Vercel to use vercel-install instead of the defalt install command
- project -> Settings -> General => Build & Development Settings
- in INSTALL COMMAND type
```
yarn vercel-install 
# or 
npm vercel-install
```
- toggle OVERRIDE on
Create a Github access token
- Settings -> Developer settings -> Personal access tokens
- Generate new token
- set a note (eg. vercel)
- set expiration to whatever you see fit (eg. No expiration)
- select repo
  
  [x] repo - Full control of private repositories
- copy the generated token
Add the token to Vercel Environment Variables
- Project -> Settings -> Environment Variables
- add a new variable called GITHUB_ACCESS_TOKEN and with value of the token you just copied

+ Post Scriptum

I haven't added support for multiple submodules but it should be easy enough, try edditing this part and then the rest of the script.

The code itself

I have thrown in a looooot of comments so that you can easily understand what's happening, it's always good to understand what you're using especially if its some bash script and especially if you're using it to run important code on production ;)

# github submodule repo address without https:// prefix
SUBMODULE_GITHUB=github.com/beeinger/vercel-private-submodule

# .gitmodules submodule path
SUBMODULE_PATH=library

# github access token is necessary
# add it to Environment Variables on Vercel
if [ "$GITHUB_ACCESS_TOKEN" == "" ]; then
  echo "Error: GITHUB_ACCESS_TOKEN is empty"
  exit 1
fi

# stop execution on error - don't let it build if something goes wrong
set -e

# get submodule commit
output=`git submodule status --recursive` # get submodule info
no_prefix=${output#*-} # get rid of the prefix
COMMIT=${no_prefix% *} # get rid of the suffix

# set up an empty temporary work directory
rm -rf tmp || true # remove the tmp folder if exists
mkdir tmp # create the tmp folder
cd tmp # go into the tmp folder

# checkout the current submodule commit
git init # initialise empty repo
git remote add origin https://$GITHUB_ACCESS_TOKEN@$SUBMODULE_GITHUB # add origin of the submodule
git fetch --depth=1 origin $COMMIT # fetch only the required version
git checkout $COMMIT # checkout on the right commit

# move the submodule from tmp to the submodule path
cd .. # go folder up
rm -rf tmp/.git # remove .git 
mv tmp/* $SUBMODULE_PATH/ # move the submodule to the submodule path

# clean up
rm -rf tmp # remove the tmp folder

That's it! 🎉

Thanks for reading, hope it has helped you!
The full repo containing this solution is available here:
https://github.com/beeinger/vercel-private-submodule
If you have some ideas how to improve this solution or you'd like to implement the support for more than one submodule, let me know!
I'll gladly cooperate!

How to: VSCode TS checks working project-wide & real-time

Maciej Sulecki — Mon, 08 Nov 2021 22:26:06 +0000

Update: I've created a VSCode extension that works even better! Get it here!

Being a coder I have never limited myself to one language, one framework and I didn’t want to have a milion code editors each specialised in different thing so I have always used VSCode. Keeping the theme, the look and feel of the editor with power of an IDE one plugin away no matter which language I want to jump into is the key factor that guided my choice.

However, I have tried JetBrains’ WebStorm before and just couldn’t get rid of one huge thing haunting me, the project-wide type checking.

The problem

In VSCode the typescript plugin works great but it only checks files that are currently opened in the editor! Other files inside the project are not being checked until opened 😕 Now this is a huge bump, having to run the check manually through console or build the whole app in order to check if one type alternation hasn’t influenced anything else? Madness…

The solution

This is when I decided to research this problem — and there really is no out of the box solution! After trying every way on the internet I have finally pieced together the final solution for this problem:

{
    "version": "2.0.0",
    "tasks": [
      {
        "label": "tsc-watch project",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "option": "watch",
        "problemMatcher": ["$tsc-watch"],
        "group": "build",
        "runOptions": {
          "runOn": "folderOpen"
        },
        "presentation": { "reveal": "never" }
      }
    ]
  }

This is an automated task for VSCode — it runs when the project folder is opened and keeps on running, checking the whole repo real-time based on the changes you make! Finally! 🎉

How to use it?

Update: Just get this extension, it does everything for you.

Put it in .vscode/tasks.json

Re-open the project folder and accept the popup asking whether Automatic Folder Tasks should be allowed
If the popup isn’t there do: ⌘⇧p -> Manage Automatic Tasks in Folder -> Allow Automatic Tasks in Folder

DEV Community: Maciej Sulecki

Submodules with Vercel and Next.js

How to use it?

📋 Step by step 🚀

+ Post Scriptum

The code itself

That's it! 🎉

How to: VSCode TS checks working project-wide & real-time

The problem

The solution

How to use it?

🎉 All done! Enjoy your VSCode with TypeScript better than ever! 🎉