This repo is made up of a set of small demo examples which focus on individual capabilities which might fit together to build a full-stack web app. The complete app would be a python-backed compute presented through an API with a javascript web app, with access control. The part solutions are intended to provide bite-sized steps along the way to such a full-stack web app.
The running example is an app that gets specified start and end countries from a user and reports back a shortest path passing through neighbouring countries. The idea is that the logic for this path-finding is best set out in back-end server-side python code, perhaps using a database, while the best customer-facing front-end experience is presented using javascript frameworks.
This includes an HTML file for our game with input fields to fill in and a button to click.
When the button is clicked, a response is computed by calling an API.
You can run the page by loading the HTML file into a browser, or you can visit a statically-hosted version of the file here
Learn more HTML from the MDN docs here.
This image shows the page in a browser. The browser's Network panel shows some details about the call to the API when the Get Path button is clicked.
A demo of various css styling controls. Refer to https://www.w3schools.com/css/ for more. To run, load index.html into a browser and explore making changes.
You can run the page by loading the HTML file into a browser, or you can visit a statically-hosted version of the file here
Learn more CSS by following the w3schools tutorial here.
This image shows some of the rendered HTML. The HTML for the two sections is the same but different CSS styling has been applied for color, border, background and layout. The browser Elements tab shows details of the styling for selected page elements.
React is a javascript front-end library created by Facebook. React apps are built out of react components, and use JSX syntax, a kind of hybrid between HTML and js. They are designed to be .. reactive.
Learn more React by following the react tutorial and docs here.
This image shows the react app in action. A React development browser add-in showing details about components and props.
The pythonapp folder includes an algorithm in app/main.py, served using uvicorn. There are three scripts for running the python; one running directly, the second building a docker container, and the third builds and deploys a docker container in Google Cloud Platform (using Cloud Build and Cloud Run).
A deployed version of the game can be found here.
Learn more about Dockerizing python here and deploying on GCP here.
This image shows the served page and a view of the Cloud Run page for the corrensponding service, with its logs.
There is a node app which can be run directly, and uses fetch to call the python-backed API. Results are printed to the console.
The app queries for start and end countries and prints a path
Learn more about nodejs development in VSCode here.
This image shows the node app running in a local terminal.
A nodejs app which connects to a specified mongodb (mongo database) to perform some CRUD (create read update delete) operations. The mongo database requires a database called crudExample. Create a .env.local file in the monfoapp folder (your env file will be gitignored) and follow the pattern of .env.sample, to point the code at your mongoDB location.
Learn more from the mongodb node docs here.
This image shows the mongo app running in a local terminal and a web view of the mongo content.
Use the nextjs framework to write client-side HTML and server-side fetch calls to build a working web app that uses the python API call on the back end. The nextjs app will work with our python API endpoint even if the python API prohibits cross-origin requests, because the call to the python API is from our back-end server and not directly from the browser.
A deployed version of the app can be found here.
Learn more by following the nextjs tutorial here.
This image shows the nextjs app delivering content to the browser. In the Network panel we can see details about a call to the server side of the nextjs deployment.
Use the nextjs framework with Google Firebase Authentication to write an app with customer login, logout and a page which can only be accessed by a customer who has logged in.
This app has a configuration setting which is used to tell Google Firebase a 'continuation URL'. After someone has verified their email, this defines where the web page goes to to continue. That is, where is the site hosted? For local running, this is managed using a NEXT_PUBLIC_ environment variable set in .env. For docker (including Google Cloud Run), it's managed by setting an environment variable in the Dockerfile. Note that this setting is not a secret and must be known to the client code.
There are a huge number of tutorials and blog pages about firebase and authentication. We want to avoid using firebase hosting (so we can be free to host however we want) and we don't want to restrict users to log in with Google accounts (many tutorials have an outcome where anyone with a google account can log in). So tread carefully when seeking more information. This post is quite good here.
This image shows the login page, a page only accessible to authenticated users, and a view of the Firebase Console Users table.
A deployed version of the app can be found here.
A Typescript version of our javascript nextauthapp. Adding type definitions adds to code quality. Enforcing types revealed some bugs and weaknesses in the javascript implementation (passing a wrong argument to a function, assuming values are properly defined before using them without any guard to handle the undefined cases).
Learn more about typescript here.
This image shows a diff between the plain javascript version of the home page and a typescript version.
The customer-facing outcome of this app is the same as nextauthapp.
A Nextjs app working with files in a Google Storage bucket. Demonstrates upload and download of image files.
This image shows the web app and a browser view of the bucket contents.
A deployed version of the app can be found here.
A Nextjs app working with Firebase authentication and Firestore for a database (suitable for JSON-form data).
This image shows the sign in and data pages.
A deployed version of the app can be found here.
- handling of secrets
- nextjs routing, server-side work, middleware
- Testing with jest and Cypress
- Encryption of data
- Sending emails from code
- Cookie management
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent