angineering / fullstacktemplate Goto Github PK

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

Python 24.73% HTML 9.62% JavaScript 56.16% CSS 9.49%

fullstacktemplate's Introduction

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:

Ensure you have npm, python and pip installed on your machine.
Go to the fullstack_template/static directory and execute "npm install". This will download and install the dependencies listed in package.json.
In the static directory, start the npm watcher to build the front end code. "npm run watch".
Create a python virtualenv.
Install flask (pip install flask).
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:

fullstacktemplate's People

Contributors

Stargazers

Watchers

Forkers

stephica xiaotong0202 stefanoeb pyzeon tangyiyong icella paulross somair marcuskeenan akilicarslan vinsonxing us1415 asad8855 youngkwonjo mrrachelwong wigcheng baudy2 kiidbrian avichalchadha lucrussell dpedowitz bksrhalid ronscoder sonsona dforcer awalin tanthml psibal boxrhcp rizen1892 xyicheng thoth-ky ultradio nadernasr dpeshevski irfan-akhan lhenderson22 thewondererr mindis danbgray tbaldwin8 tahoedesigner arvindsr23 prashanthgit aasthaluthra94 davidrsewell dashmeshwebworks deltahedge1 mohammed-sunasra aymanxd jk1324 shongsu rambleramblepie sanaemahtal aleksavidovic anniej42 jsheperd sarmchar bitgivingbot depley hakanaku1234 amr-eldfrawy chrisplyn dbdweeb nhuluong22122 whitesharkbrother wisemuji jefferyycc yds05238 ki4oir hhy5277 tramatejaswini akash0997 dmitriyvaletov kychri yufeigao6 daeqwonhunter1 kateyphi motazbellah bawapython jililidd pabloluceroschneider grahamjpark dantothomas hlmuludiang shirleyle3 lucasrpatten waka758 davidzhang92

fullstacktemplate's Issues

GET /hello not found

I have everything apart from the css and the css-loader. I have a live-server running on the terminal and every time I click the button, in the terminal it states "GET /hello 404". Is there a solution to this?

webpack does not reflect changes

Hi @angineering,

Whenever I make a change in static files,
I see on terminal that webpack is building new changes
But the when I load the webpage, I can't see any changes reflected.
Could you please provide assistance about how to fix this?

As you can see it is now "Alihan":

And I can see that webpack rebuilt it:

But unfortunately it is still shows "Rimini" String:

Great contribution to hobbyist developers btw, Thank you, Thank you and Thank you!
Cheers,

When customizing the static contents source path then...

Not an issue - suggestion / helper.

https://stackoverflow.com/questions/48722223/flask-cant-find-static-files-with-webpack/48722831#48722831

app = Flask(name, static_folder='../client/dist/', template_folder='../client/dist/', static_url_path="")

Set the static_url_path="" to empty string otherwise will not find the resources from the custom path.

"npm run install" fails

I'm trying to follow your tutorial but I got stuck midway when you add the App.jsx... so I decided to clone you repo instead but I quickly run into a problem:

$ npm run install

produces the following output for me:

lucas-mbp:static luca$ npm run install
npm ERR! missing script: install

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/luca/.npm/_logs/2017-09-10T20_33_01_743Z-debug.log

What am I doing wrong?

webpage is not loading

I cloned the "simple website" repository and followed all the steps as mentioned in README. But, the website is not loading.

npm run watch - runs till 64 % and the last message is this

64% building modules 453/454 modules 1 active ...ack_template/static/css/fullstack.css(node:11878) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
Hash: 9067f5fc162232cd71f4
Version: webpack 3.9.1
Time: 4004ms
Asset Size Chunks Chunk Names
1776662db43bd611e4eb11d2add6d1c6.jpg 1.24 MB [emitted] [big]
bundle.js 4.66 MB 0 [emitted] [big] main
styles.css 522 bytes 0 [emitted] main
[205] ./js/index.jsx 470 bytes {0} [built]
[305] ./js/App.jsx 3.02 kB {0} [built]
[306] ./js/Hello.jsx 4.23 kB {0} [built]
[447] ./images/header.jpg 82 bytes {0} [built]
[448] ./css/fullstack.css 41 bytes {0} [built]
[449] ./node_modules/css-loader!./css/fullstack.css 714 bytes [built]

447 hidden modules
Child extract-text-webpack-plugin:
1 asset
[0] ./node_modules/css-loader!./css/fullstack.css 714 bytes {0} [built]
[2] ./images/header.jpg 82 bytes {0} [built]
1 hidden module

After running python server.py, the local host page is blank nothing is loaded.

Am I missing something?

Pathing Error

I get this related to pathing so I know my package.json is in the static folder but I dont understand how to change npm to new pathing.

(vessel_env) PS D:\Openvessel\vessel-app> npm run watch
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\Openvessel\vessel-app\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'D:\Openvessel\vessel-app\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lesli\AppData\Roaming\npm-cache_logs\2020-06-04T18_47_18_813Z-debug.log