|
1 |
| -[](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=816765904) |
| 1 | +# uMock (MicroMock) |
2 | 2 |
|
3 |
| -# 🐍📜 PyScript with GitHub Codespaces and Copilot |
4 |
| - |
5 |
| -_Create, customize and deploy your own [PyScript](https://pyscript.net) |
6 |
| -website in minutes._ ✨ |
7 |
| - |
8 |
| -In this template repository we have the development environment and base set |
9 |
| -and ready to go. So that you can immediately launch your |
10 |
| -[Codespace](https://github.com/features/codespaces/) environment and start |
11 |
| -customizing your site using [Copilot](https://copilot.github.com) to help you |
12 |
| -write code faster. |
13 |
| - |
14 |
| -* **Who is this for?** __Anyone__ looking to create a |
15 |
| - [PyScript](https://pyscript.net/) site, learn web development, or test out |
16 |
| - Codespaces. |
17 |
| -* **How much experience do you need?** __Zero__. You decide how much you want |
18 |
| - to customize based on your experience, and time available. |
19 |
| -* **Tools needed:** _None_. No need to install anything! All you need is a web |
20 |
| - browser. |
21 |
| -* **Prerequisites:** _None_. This template includes your development |
22 |
| - environment and deployable web app for you to create your own site. |
23 |
| - |
24 |
| -## About this PyScript template |
25 |
| - |
26 |
| -This template includes the minimal viable PyScript application, from which you |
27 |
| -can build. |
28 |
| - |
29 |
| -### Quick Start |
30 |
| - |
31 |
| -1. Click the **Use this Template** button and then **Create a new repository** as can be seen in the image below. |
32 |
| - Note: Make sure you've signed in to GitHub otherwise, you wouldn't see the **Use this Template** button. |
33 |
| - |
34 |
| -1. Select the repository owner (e.g. your GitHub account) |
35 |
| -1. Enter a unique name for your new repository |
36 |
| -1. Click the **Code** button |
37 |
| -1. Click **Create Codespace on main** button |
38 |
| -1. Customize your PyScript site with Copilot |
39 |
| -1. [Deploy your site](#-deploy-your-web-application) |
40 |
| - |
41 |
| -<details> |
42 |
| - <summary><b>🎥 To learn more about Codespaces, watch our video tutorial series</b></summary> |
43 |
| - |
44 |
| - [](https://aka.ms/CodespacesVideoTutorial "Codespaces Tutorial") |
45 |
| -</details> |
46 |
| - |
47 |
| -## 🗃️ PyScript template |
48 |
| - |
49 |
| -This repo is a GitHub template to build a PyScript web application. The goal is |
50 |
| -to give you a template that you can immediately utilize to create your own |
51 |
| -PyScript website through Codespaces. |
52 |
| - |
53 |
| -The repo contains the following: |
54 |
| - |
55 |
| -* `.devcontainer/devcontainer.json`: Configuration file used by Codespaces to |
56 |
| - configure Visual Studio Code settings, such as the enabling of additional |
57 |
| - extensions. |
58 |
| -* `config.json`: the |
59 |
| - [PyScript configuration](https://docs.pyscript.net/2024.6.1/user-guide/configuration/) |
60 |
| - used by your application. |
61 |
| -* `index.html`: the |
62 |
| - [HTML page](https://docs.pyscript.net/2024.6.1/user-guide/first-steps/) |
63 |
| - used to load your PyScript application. |
64 |
| -* `main.py`: the [Python script](https://pyscript.net/) to run. |
65 |
| -* `mini-coi.js`: a |
66 |
| - [utility](https://docs.pyscript.net/2024.6.1/user-guide/workers/#http-headers) |
67 |
| - to ensure all PyScript's features are available. |
68 |
| -* `README.md`: this file (that you're reading right now). |
69 |
| - |
70 |
| -## 🚀 Getting started |
71 |
| - |
72 |
| -This PyScript project contains everything you need so that you can immediately |
73 |
| -open Codespaces, see it running, and deploy at any point. |
74 |
| - |
75 |
| -Your development environment is all set for you to start. |
76 |
| - |
77 |
| -* Visual Studio Code with the [Python plugin](https://code.visualstudio.com/docs/languages/python) enabled. |
78 |
| -* The [LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) plugin (so you can view your site). |
79 |
| -* GitHub [copilot support](https://github.com/features/copilot) (if you have it enabled for your account). |
80 |
| - |
81 |
| -### Create your PyScript app |
82 |
| - |
83 |
| -1. Create a repository from this template. Use this |
84 |
| - [create repo link](https://github.com/ntoll/codespaces-project-template-pyscript/generate). |
85 |
| - Select the repository owner, provide a name, a description if you'd like and |
86 |
| - if you'd like the new repository to be public or private. |
87 |
| -1. Before creating the Codespace, enable GitHub Copilot for your account. |
88 |
| -1. Navigate to the main page of the newly created repository. |
89 |
| -3. Under the repository name, use the Code drop-down menu, and in the |
90 |
| - Codespaces tab, select "Create codespace on main". |
91 |
| -4. Wait as GitHub initializes the Codespace. |
92 |
| -5. When complete you will see your Codespace load with a terminal section at |
93 |
| - the bottom. Codespaces will install all the required extensions in your |
94 |
| - container. Once the package installs are completed, you'll be able to start |
95 |
| - editing and start a LiveServer to see your site. |
96 |
| - |
97 |
| -## 🏃 Deploy your web application |
98 |
| - |
99 |
| -Project includes the setup needed for you to deploy **FREE** to either |
100 |
| -[Azure Static Web Apps](https://azure.microsoft.com/products/app-service/static/?WT.mc_id=academic-79839-sagibbon) |
101 |
| -_**or**_ [GitHub Pages](https://pages.github.com/)</a>. Instructions are |
102 |
| -included below for Azure. The following YouTube video demonstrates how to get |
103 |
| -your Codespace up and running, then deployed to GitHub Pages in under two |
104 |
| -minutes: |
105 |
| - |
106 |
| -[](https://www.youtube.com/watch?v=dmIWFcJ2UTI) |
107 |
| - |
108 |
| -### Azure Static Web Apps |
109 |
| - |
110 |
| -[Azure Static Web Apps](https://azure.microsoft.com/products/app-service/static/?WT.mc_id=academic-79839-sagibbon) |
111 |
| -is Microsoft's hosting solution for static sites (or sites that are rendered in |
112 |
| -the user's browser, not on a server) through Azure. This service provides |
113 |
| -additional opportunities to expand your site through Azure Functions, |
114 |
| -authentication, staging versions and more. |
115 |
| - |
116 |
| -You'll need both Azure and GitHub accounts to deploy your web application. If |
117 |
| -you don't yet have an Azure account you can create it from within during the |
118 |
| -deploy process, or from below links: |
119 |
| - |
120 |
| -* [Create a (no Credit Card required) Azure For Students account](https://azure.microsoft.com/free/students/?WT.mc_id=academic-79839-sagibbon) |
121 |
| -* [Create a new Azure account](https://azure.microsoft.com/?WT.mc_id=academic-79839-sagibbon) |
122 |
| - |
123 |
| -With your project open in Codespaces: |
124 |
| - |
125 |
| -1. Click Azure icon in the left sidebar. Log in if you are not already, and if |
126 |
| - new to Azure, follow the prompts to create your account. |
127 |
| -1. From Azure menu click “+” sign and then “Create Static Web App”. |
128 |
| -1. If you are not logged into GitHub you will be prompted to log in. If you |
129 |
| - have any pending file changes you will then be prompted to commit those |
130 |
| - changes. |
131 |
| -1. Set your application information when prompted: |
132 |
| - 1. **Region**: pick the one closest to you |
133 |
| - 1. **Project structure**: select "React" |
134 |
| - 1. **Location of application code**: `/` |
135 |
| - 1. **Build location**: `dist` |
136 |
| -1. When complete you will see a notification at the bottom of your screen, and |
137 |
| - a new GitHub Action workflow will be added to your project. If you click |
138 |
| - “Open Action in GitHub” you will see the action that was created for you, |
139 |
| - and it is currently running. |
140 |
| - |
141 |
| -1. To view the status of your deployment, find your Static Web App resource in |
142 |
| - the Azure tab in the VS Code left side bar. |
143 |
| -1. Once deployment is complete, you can view your brand new new publicly |
144 |
| - accessible application by right clicking on your Static Web App resource and |
145 |
| - selecting "Browse Site". |
146 |
| - |
147 |
| -> **Issues?** When creating your Static Web app, if you are prompted to select |
148 |
| -> an Azure subscription and are not able to select a subscription, check the |
149 |
| -> "Accounts" tab in VS Code. Make sure to choose the "Grant access to ..." |
150 |
| -> options if those options appear. Should you receive the error-message |
151 |
| -> "RepositoryToken is invalid. ..." switch to Visual Studio Code for the Web |
152 |
| -> (vscode.dev) and repeat the steps there. |
153 |
| -
|
154 |
| -> 🤩 **Bonus**: [Setup a custom domain for your Azure Static Web App](https://learn.microsoft.com/en-us/shows/azure-tips-and-tricks-static-web-apps/how-to-set-up-a-custom-domain-name-in-azure-static-web-apps-10-of-16--azure-tips-and-tricks-static-w/?WT.mc_id=academic-79839-sagibbon) |
155 |
| -
|
156 |
| -## 🔎 Found an issue or have an idea for improvement? |
157 |
| -Help us make this template repository better by [letting us know and opening an issue!](/../../issues/new). |
| 3 | +MicroMock is a very simple and small module for mocking objects in MicroPython |
| 4 | +with PyScript. |
0 commit comments