Webflow pages | SuperTokens Docs

important

This is a contributors guide and NOT a user guide. Please visit these docs if you are using or evaluating SuperTokens.

Managing Webflow files#

Keep one main file where each project is added as a separate page.
Have another project which is the currently working page
For homepage and pricing page, having separate projects is fine
For a new page on website remove the existing page in currently working page and put it inside the main file as another page.
Now you can work on the new page in this project so you avoid creating multiple projects

Overall changes when making changes to a existing file#

Download the Webflow file
Open terminal
Go to main website folder
Go to master branch (git checkout master)
Then you get latest version of the master branch, so you do (git pull)
Now create your own branch from the master branch (git checkout -b name-of-your-branch)
Main website…. Go to webflow folder and delete the files that you are replacing and then copy the new files inside that particular folder.
Do git status to check what has changed
Npm run start
Go to localhost: 9001 and go to the page you have changed.
It should be completely screwed up. If it is not screwed up you need to reset everything in main-website. Run this command git reset —hard. Do from step 5
Open a new terminal and go to main website again. Go to cd automate_webflow/
WEBFLOW_PAGE_PATH=folder/ npm run start
Go back to the webpage and then you should see all your changes implemented. Remember to refresh the page
Sometimes the changes will not be reflected, if that the case go to the old terminal and stop the process (command +C ) and restart by doing npm run start. And check again if the changes have come. If changes not updated then run ./buildMainSite on a new terminal
If changes are done do git add — all
Go one directory back (main-website)
Then, git commit -m”Name of the change”
Do git push
Copy and paste new command that you get in the terminal
Compare and pull request on GitHub main website

Overall changes when adding a new file#

Tell Joel to make backend changes.. Give him the folder name that’ll be there in the main website folder, Also give him the full url.
Inside the Webflow file, in custom fonts section, add the google font url for fonts used inside that file. For blog noto serif and Rubik both should be there.
Then, download the Webflow file
Open terminal
Then do these steps to update backend website server:
cd supertokens-backend-website
git reset --hard
git clean -f -d
git pull
Go to main website folder (cd ../)
Go to master branch (git checkout master)
Then you get latest version of the master branch, so you do (git pull)
Now create your own branch from the master branch (git checkout -b name-of-your-branch)
Main website…. Go and create the folder with the exact naming convention as what you gave Joel and paste in the files you downloaded from Webflow inside that particular folder.
Add the OG image inside the assets folder -> meta images. For adding a new blog go to assets folder -> meta images -> blog and paste it there.
If adding a new page on website, you need to change the index.tsx file, the consonants.tsx file and the notfoundwhitelist file. If simply adding a new blog, then these changes are not required.
Go the sitemap and meta excel sheet and update information there.
Do git status to check what has changed
Npm run start
Go to localhost: 9001 and go to the page you have changed.
It should be completely screwed up. If it is not screwed up you need to reset everything in main-website. Run this command git reset —hard. Do from step 14
Open a new terminal and go to main website again. Go to cd automate_webflow/
WEBFLOW_PAGE_PATH=folder/ npm run start
Go back to the webpage and then you should see all your changes implemented. Remember to refresh the page
Sometimes the changes will not be reflected, if that the case go to the old terminal and stop the process (command +C ) and restart by doing npm run start. And check again if the changes have come. If changes not updated then run ./buildMainSite on a new terminal.
Now suppose if changes are reflected, but they are not proper and you want to redo the changes then do, git reset —hard, then git status and then remove the new untracked files by using rm path_of_file OR you can go back one directory to cd …/. It’ll take you to main website and there you can do git clean -f -d
If changes are done do git add — all
Go one directory back (main-website)
Then, git commit -m”Name of the change”
Do git push
Copy and paste new command that you get in the terminal
Compare and pull request on GitHub main website
Test everything

Then remember, only after the website has been pushed to production, you go to https://supertokens.com/update-seo-content and update the seo content. If the link navigates you to homepage, go to the website, inspect element and paste this in console : localStorage.setItem('st_antcs', 'st-team-udid1234') After that you can check the link again
To check if everything is working fine, https://socialsharepreview.com/

Steps to detect instances of SuperTokens.io#

Search for SuperTokens.io on the downloaded Webflow folder file
In the case, where you pushed and merged and if the deployment fails then Tell Joel
If Joel confirms that it is because of duplicate instances, then go to main website, and then paste “grep -r --exclude-dir={docs,supertokens-backend-website,node_modules} "supertokens.io" | wc -l” without the quotes
This will list by word count all the occurrences. Now to see where these occurrences took place, remove the “| wc -l” from the above link
Then find the occurrences in the new page and change the Webflow file accordingly
Then commit the changes again on a different branch

Steps to update backend website to include urls for new pages#

Open the SuperTokens backend website inside vscode
Go to the indexNode.ts folder
Copy the else if statement and change the url’s accordingly
Create new branch inside the SuperTokens-backend-website folder
Add, commit and push changes