Github Code Spaces Template

[Alek99]

If anyone if familiar with GitHub code spaces it would be awesome if we have a template with Pynecone preloaded so new users can experiment as fast as possible. We can also put a link to the template in the readme.

[rahulbagai]

@Alek99 could you please assign this to me, I am looking to contribute to this project. thanks!

[rahulbagai]

@Alek99 I have the template repository and the readme instructions ready. Here is the template repository - https://github.com/rahulbagai/pynecone-template

and here is the README instructions

You can also access this project in a fully configured development environment using Github Codespaces. Click the following link to create a new Codespace:

[![Open in Codespaces](https://img.shields.io/badge/Open%20in-Codespaces-blue?logo=github&style=for-the-badge)](https://github.com/codespaces/new?template_repository=rahulbagai/pynecone-template)

Could you please help review and allow me to make the contributions to pynecone repos. thanks!

[Alek99]

Awesome thanks! I'll test this, after I confirm it works the next steps have a couple options:

a) We make a subfolder in the main Pynecone repo and add this code there.

b) I make another public repo under the Pynecone organization just to have this code.

[Alek99]

I tried this with the counter app and it seems that state is not working with code spaces. Based on a discord discussion I had with a user I think it may require some special configuration for code spaces to support web sockets?

Is the counter example working with your code spaces instance?

[rahulbagai]

@Alek99 Ah my bad! I was working on local devcontainer and it worked fine there. I will test it out in codespaces as well, make necessary changes and send the change request.

[rahulbagai]

@Alek99, I've been investigating a challenge I've encountered and would appreciate your guidance.

I've been running a Pynecone application (counter app) in Github Codespaces. However, I've noticed that while the app runs locally on localhost:3000, there might be some necessary adjustments or configurations required to make it fully compatible with Codespaces, which provides a cloud-based development environment, especially regarding the support for WebSockets.

I've confirmed this based on the following browser logs:

[blocked] The page at https://rahulbagai-miniature-broccoli-4qvxg4pxxwcqvv9-3000.preview.app.github.dev/ was not allowed to run insecure content from ws://localhost:8000/event/?EIO=4&transport=websocket.

The issue seems to be mixed content, which occurs when a webpage loaded over a secure HTTPS connection attempts to load resources via an insecure HTTP or WebSocket connection.

To mitigate this, I believe we should switch to a secure WebSocket connection (wss://) rather than an insecure one (ws://). However, I'm unsure whether Pynecone currently supports this functionality.

Upon inspecting the constants.py file for any possible configurations, I noted a segment in the Endpoint class related to URL replacement and WebSocket protocol switching. I suspect this might be contributing to the insecure content issue.

Here are a few potential solutions I've considered:

1. Secure Server Usage: Hosting the application on a server that uses https:// and supports wss:// for WebSocket connections could prevent mixed content issues by ensuring all connections are secure. Does Pynecone currently support any such configurations in the pcconfig.py file?

2. Source Code Modification: Theoretically, we could modify the Pynecone source code to always use wss:// instead of ws://. However, this would require detailed understanding of the library's internals, which I might not be equipped for at the moment.

3. Proxy Server Implementation: Using a proxy server that accepts wss:// connections and forwards them as ws:// connections to the Pynecone server could also solve the mixed content problem. The client would only ever see the secure wss:// connections. However, this method would require additional setup and could potentially introduce additional latency.

Could you please advise on the best way to proceed? I would greatly appreciate your insights.

[rahulbagai]

@Alek99

I hope you're doing well. I am following up on the issue related to the integration of Pynecone. I'd like to know if there have been any updates or progress.

Specifically, I would appreciate any information on the following:

1. Compatibility with GitHub Codespaces: Have you encountered any guidelines or suggestions from the GitHub Codespaces environment that could help resolve the WebSocket compatibility issue? Understanding any platform-specific considerations would be beneficial in determining the best solution.

2. Community Input: Has any feedback or insights from other contributors or maintainers within the Pynecone community regarding WebSocket support in GitHub Codespaces? Their experiences or suggestions could provide valuable guidance in addressing this issue.

3. Next Steps: Based on our previous discussions, I would like to know how to resolve this issue. Are there any specific steps or recommendations you have in mind? I'm eager to contribute and make progress on this task.

I appreciate your time and support throughout this process. Any updates or guidance you can provide would be highly appreciated.

Thank you!

[rahulbagai]

@Alek99 I have submitted a pull request for this feature. Would you kindly review it?