Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🔨[refactor] [Configure Vanilla.js app to be a PWA.] #383

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

Ankitv003
Copy link
Contributor

@Ankitv003 Ankitv003 commented Oct 27, 2024

What type of PR is this? (check all applicable)

  • ♻️ Refactor
  • ✨ New Feature
  • 🐛 Bug Fix
  • 📝 Documentation Update
  • 👷 Example Application
  • 🎨 Design
  • 📖 Content
  • 🧪 Tests
  • 🔖 Release
  • 🚩 Other

Description

This PR adds PWA to Vanilla.js App

Related Tickets & Documents

Resolves #85

Mobile & Desktop Screenshots/Recordings

Added tests?

  • 👍 yes
  • 🙅 no, because they aren't needed
  • 🙋 no, because I need help

No tests? Add a note

Added to documentation?

  • 📜 readme
  • 📜 contributing.md
  • 📓 general documentation
  • 🙅 no documentation needed

No docs? Add a note

added comments in code

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

@Ankitv003
Copy link
Contributor Author

fix issue #85

@taniashiba taniashiba changed the title 🔨[refractor][Connverted Vanilla.js app to be a PWA.] 🔨[refractor] [Converted Vanilla.js app to be a PWA.] Oct 28, 2024
@taniashiba taniashiba changed the title 🔨[refractor] [Converted Vanilla.js app to be a PWA.] 🔨[refactor] [Converted Vanilla.js app to be a PWA.] Oct 28, 2024
@taniashiba taniashiba changed the title 🔨[refactor] [Converted Vanilla.js app to be a PWA.] 🔨[refactor] [Configure Vanilla.js app to be a PWA.] Oct 28, 2024
Copy link
Contributor

@blackgirlbytes blackgirlbytes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heyy @Ankitv003 !! Thanks for the contribution. Just a few merge conflicts to resolve so we can get this approved and merged. Thank you!!

Screenshot 2024-10-29 at 6 38 16 AM


test('should navigate to Home', async ({ page }) => {
await page.goto('/');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed "/" to "http://localhost:5173"

@@ -101,9 +101,9 @@ export default defineConfig({
* Use the preview server on CI for more realistic testing.
* Playwright will re-use the local server if there is already a dev-server running.
*/
command: 'pnpm run dev',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed to npm because i am using npm and the testcases were failing

"tailwindcss": "^3.4.13",
"vite": "^5.4.1",
"vitest": "^2.1.2"
},
"packageManager": "[email protected]+sha512.22721b3a11f81661ae1ec68ce1a7b879425a1ca5b991c975b074ac220b187ce56c708fe5db69f4c962c989452eee76c82877f4ee80f474cebd61ee13461b6228"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added serwist/next dependency


// Initial call to router to render the correct component on page load
document.addEventListener('DOMContentLoaded', router);
Copy link
Contributor Author

@Ankitv003 Ankitv003 Oct 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

registered service worker

@@ -11,7 +11,10 @@
name="description"
content="A Decentralized Web Application template"
/>
<link rel="stylesheet" href="dist/output.css" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this line is missing only

@Ankitv003
Copy link
Contributor Author

hey @blackgirlbytes , i have added some comments and i think the only main change required is in index.html file , everything else , either has some extra space or double inverted commas( " ") instead of single(' ').
Also, added some comments on the things i added to the codebase , please look into it , and i am really sorry i didn't mean to spam single comments , this is just my first time making any changes for a PR.

@blackgirlbytes
Copy link
Contributor

HI @Ankitv003 . Thanks -- Adding comments wont resolve the conflicts though. Here's some information on merge conflicts:

I cannot change your code for you because it's on your branch. Thank you!

@Ankitv003
Copy link
Contributor Author

i mean the main change is for index.html , i can change it and then add it for review again , the rest of the files are correct , so you can merge it from your end, right? @blackgirlbytes

@blackgirlbytes
Copy link
Contributor

blackgirlbytes commented Oct 29, 2024

@Ankitv003 if you want, you should come to our office hours in Discord..so we could help you. It's saying that you have merge conflicts in the index.html, package.json, main.js, and the main.spec.js.

I think you didn't pull the latest from main before you made changes, so you need to make the changes on all those files and then i can review and again and merge on my end :D

@Ankitv003
Copy link
Contributor Author

hey @blackgirlbytes discord link is not working , what are the office hours ? 👀 I will try to do resolve this by myself today , lets see!

@blackgirlbytes
Copy link
Contributor

@Ankitv003 hmm okay try discord.gg/tbd and then go to events. You will see our office hours. It's set to happen on Oct 30 at 1pm ET. If you join the discord, you will see it in your timezone

@Ankitv003
Copy link
Contributor Author

made some changes @blackgirlbytes , please check, if it is not ok, i will simply open a new branch,and add a new PR, been on it for most part of the day on a crappy laptop, my head will explode now.

@blackgirlbytes
Copy link
Contributor

Hey @Ankitv003!!! While I appreciate the updates, I been running the code and it doesn't look like it's working. I'm just seeing a blank page
Screenshot 2024-10-31 at 3 45 08 PM
Screenshot 2024-10-31 at 3 42 00 PM

@Ankitv003
Copy link
Contributor Author

i think service worker code is missing here , let me check @blackgirlbytes

@Ankitv003
Copy link
Contributor Author

yeah , service worker registeration in main.js was missing and import { Home, About, Settings, NotFound } from "./components.js"; this line was repeating , i fixed it but how should i add these, i am getting this while sync fork before adding my changes.
Screenshot (466)
@blackgirlbytes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Configure Vanilla.js app to be a PWA
2 participants