GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → angineering → Fullstacktemplate

angineering / Fullstacktemplate

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

Programming Languages

javascript
184084 projects - #8 most used programming language
python
139335 projects - #7 most used programming language

Labels

reactwebpacknpm

Projects that are alternatives of or similar to Fullstacktemplate

Instacam
Instant canvas video
Stars: ✭ 106 (-52.47%)
Mutual labels:  webpack, npm
Book
《现代化前端工程师权威指南》https://guoyongfeng.github.io/book/
Stars: ✭ 141 (-36.77%)
Mutual labels:  webpack, npm
Simple Boilerplate
A simple webpack boilerplate for your comfortable work with HTML, JS and CSS.
Stars: ✭ 116 (-47.98%)
Mutual labels:  webpack, npm
Mailgo
💌 mailgo, a new concept of mailto and tel links
Stars: ✭ 978 (+338.57%)
Mutual labels:  webpack, npm
Angularjs Webpack Starter
🚀 A modern frontend setup for AngularJS projects using NPM, TypeScript and Webpack.
Stars: ✭ 173 (-22.42%)
Mutual labels:  webpack, npm
React Webpack Tutorial
This is a tutorial on how to get started developing a client side application using ReactJS, Webpack and Npm
Stars: ✭ 54 (-75.78%)
Mutual labels:  webpack, npm
Webpack Guide
Webpack Handbook
Stars: ✭ 136 (-39.01%)
Mutual labels:  webpack, npm
Kotlin Frontend Plugin
Gradle Kotlin (http://kotlinlang.org) plugin for frontend development
Stars: ✭ 578 (+159.19%)
Mutual labels:  webpack, npm
Reactn
React, but with built-in global state management.
Stars: ✭ 1,906 (+754.71%)
Mutual labels:  webpack, npm
Goa
基于Beego开发的问答系统
Stars: ✭ 154 (-30.94%)
Mutual labels:  webpack, npm
Luna
Manage npm dependencies through a modern UI.
Stars: ✭ 948 (+325.11%)
Mutual labels:  webpack, npm
Webpack Static Html Pages
Webpack template/example with multiple static html pages
Stars: ✭ 202 (-9.42%)
Mutual labels:  webpack, npm
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+201.79%)
Mutual labels:  webpack, npm
Npm Pipeline Rails
Use npm as part of your Rails asset pipeline
Stars: ✭ 93 (-58.3%)
Mutual labels:  webpack, npm
Articles Translator
📚Translate the distinct technical blogs. Please star or watch. Welcome to join me.
Stars: ✭ 606 (+171.75%)
Mutual labels:  webpack, npm
Php Sf Flex Webpack Encore Vuejs
A simple app skeleton to try to make every components work together : symfony 4 (latest stable at the date, but work with sf 3.3+ if you just change the versions in composer.json), symfony/flex, webpack-encore, vuejs 2.5.x, boostrap 4 sass
Stars: ✭ 118 (-47.09%)
Mutual labels:  webpack, npm
Front End Doc
前端文档汇总（觉得对您有用的话，别忘了star收藏哦^_^ ！）
Stars: ✭ 372 (+66.82%)
Mutual labels:  webpack, npm
Phaser Ce Npm Webpack Typescript Starter Project
Project to get you started with your Phaser-CE (using the npm module) game using Typescript and Webpack for building! No hassle asset management, Google Web Font loader, live server, development vs distribution build pipeline, Electron packaging for desktop builds, and more...
Stars: ✭ 414 (+85.65%)
Mutual labels:  webpack, npm
Modern Wasm Starter
🛸 Run C++ code on web and create blazingly fast websites! A starter template to easily create WebAssembly packages using type-safe C++ bindings with automatic TypeScript declarations.
Stars: ✭ 140 (-37.22%)
Mutual labels:  webpack, npm
100 Days Of Code Frontend
Curriculum for learning front-end development during #100DaysOfCode.
Stars: ✭ 2,419 (+984.75%)
Mutual labels:  webpack, npm
View All Similar Projects ➔

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: Simple Website

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].