Simple node app to create e-juice recipes
Clone or download

README.md

Vapour

Simple E-Juice Recipe Manager using Electron and React

Directory structure has been organised thanks to this post https://daveceddia.com/react-project-structure/

Screenshot

Install

# Clone the repository
$ git clone https://meganabigaildavidson@bitbucket.org/meganabigaildavidson/vapour.git

# Go into the repository
$ cd vapour

# Install dependencies
$ yarn

Usage

Run this two commands in two different prompts to start developing with hot reloading.

# Start  app
$ yarn start

# Webpack builds once and watches for changes to apply
$ yarn run dev

Build release

$ yarn dist


## Folder structure

├── electron-react-webpack/ # Your project's name

├── app/

    ├── build/                      # Webpack 2 will create and update this folder
        ├── bundle.css              # Bundled CSS
        ├── bundle.js               # Bundled JS
        ├── ...                     # Images will be copied here

    ├── src/
        ├── actions/                # Redux actions
            ├── ...
        
        ├── reducers/               # Redux reducers
            ├── ... 

        ├── assets/                 # Images
            ├── ...

        ├── components/             # React Components
            ├── Recipe.jsx
            ├── Flavours.jsx
        
        ├── containers/             # Simple stateless components (ones that just take props)
            ├── ...
        
        ├── database/               # Local indexdb
            ├── ...
        
        ├── services/               # Third party services, i.e. api
            ├── ...
                                          
        ├── styles/                 
            ├── Local.css           # Local CSS
            ├── Global.css          # Global CSS and constants
        
        ├── utils/                  #  Miscellaneous utility functions
            ├── ...
        
        ├── validator/              #  Validators
            ├── ...
                        
        ├── App.jsx                 # React main component
        ├── index.js                # App entry.
        ├── Initialiser.js          # Code that is run when the app is started.

    ├── index.html                  # Single Page Application HTML

├── index.js                        # Electron app
├── package.json
├── webpack.config.js               # Webpack 2 development setup
├── webpack.config.production.js    # Webpack 2 production setup

## Related
CSS is provided by [https://getbootstrap.com](https://getbootstrap.com)
JQuery https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack
https://github.com/jasny/bootstrap/issues/455