tahoedesigner / fullstacktemplate

A Template for Creating a Full Stack Web Application with Python, NPM, Webpack and React

Creating a Full Stack Web Application with Python, NPM, Webpack and React

This project shows you how to build a basic web application using popular web technologies like NPM, Webpack, React and Python.

Let's Build It Together!

You can find a walkthrough of how to build this application from scratch on my blog.

Installing and Running

After cloning this repository to your computer, you need to perform the following steps to be able to run it:

1. Ensure you have npm, python and pip installed on your machine.
2. Go to the fullstack_template/static directory and execute "npm install". This will download and install the dependencies listed in package.json.
3. In the static directory, start the npm watcher to build the front end code. "npm run watch".
4. Create a python virtualenv.
5. Install flask (pip install flask).
6. Start the server. Go to the server directory and do "python server.py".

Jumping to Different Completion Points

You can use the git tags to jump to different completion points in the code.

Basic Setup

If you go to the BASIC_E2E_TEMPLATE tag, you will find the application as it will be when you've followed the first blog post to the end. You will have a basic web application with a Python backend and a React front-end, but they won't be passing any data between each other yet.

A Simple Website

If you go to the SIMPLE_WEBSITE tag, you get a simple website with a button requesting info from python and displaying the result. It has a nice design, as a background image and CSS support has been added.

When you click the button, 'Hello' will be displayed in a random European language.

This is what it looks like: