Git Product home page Git Product logo

react-redux-typescript-webpack-jest-cucumber's Introduction

Reaction Repository

This is a repository for the following setup:

  1. TypeScript as the language extension
  2. Babel as the script compiler
  3. React as the framework
  4. Webpack for serving
  5. Redux for storehouse
  6. Jest-Cucumber for bdd

Preparation:

  1. Install nodejs if not installed.

    1. If you want a version controller, I recommend using nvm.

    2. You can simply install node by downloading it from the website or using the os's package manager.

      If you're installing on windows there's the option of WSL but be warned, WSL crashes a lot when installing npm libraries. Other options would be using cygwin, or using virtual machines. You will have different options. Here are a few:

      1. Hyper-V
      2. Virtualbox
      3. VMWare
      4. Virtual PC
  2. (Optional but highly recommended) Install a version control system (VCS). I recommend git, and creating a github account. Alternatively, you can host your own local repsoitory using solutions like gitlab. You do not need Enterprise edition necessarily, you can just use the free community edition.

  3. Choose an Integrated Development Environment (Highly recommended) or text editor. Here are a few options:

    IDEs:

    1. Visual Studio Code
    2. Eclipse
    3. NetBeans
    4. One of JetBrain's IDEs like WebStorm. I chose this one.
    5. Komodo Edit

    Text Editors:

    1. Sublime Text
    2. Atom
    3. Notepad++
    4. Vim
    5. Emacs
    6. UltraEdit
    7. TextMate
    8. TextWrangler
    9. Geany
    10. Bluefish
  4. Create Folder Structure as follows:

    1. Main project directory. eg. "reaction"
    2. A sub-directory for static public assets
    3. A sub-directory for sources
    4. A sub-directory under sources, for components
    5. A sub-directory under sources, for types
    6. A sub-directory under sources, for constants
    7. A sub-directory under sources, for api
    8. A sub-directory under sources, for redux
    9. A sub-directory under redux, for actions
    10. A sub-directory under redux, for reducers

    The final structure will be something like this:

    reaction/
    ├─ .gitignore *
    ├─ .babelrc *
    ├─ .quokka *
    ├─ images.d.ts *
    ├─ node_modules/ *
    ├─ public/
    │  ├─ fav.ico *
    │  ├─ index.html *
    │  └─ manifest.json *
    ├─ src/
    │  ├─ api
    │  ├─ components
    │  ├─ constants
    │  ├─ redux
    │  │ └─ actions
    │  │ └─ reducers
    │  └─ types
    ├─ package.json *
    ├─ README.md *
    ├─ tsconfig.json *
    ├─ tsconfig.prod.json *
    ├─ tsconfig.test.json *
    └─ tslint.json *
    

    '*' will be added later.

  5. (Optional) Create repository and add credentials.

    1. Create a github repository and follow instructions.

      cd reaction
      git init
      git config user.name "Your Name"
      git config user.email "Your Email"
      echo "Hello World!" > README.md
    2. Prepare credentials for remote project

      1. If you do not have multiple github user accounts:

        ssh-keygen -t rsa -b 4096

        Copy the contents of the id_rsa.pub file under ~/.ssh/ directory and add it to your github user's ssh keys.

      2. If you have multiple github accounts:

        ssh-keygen -t rsa -b 4096
        mv ~/.ssh/id_rsa ~/.ssh/id_rsa_your_github_user
        mv ~/.ssh/id_rsa.pub ~/.ssh/id_rsa.pub_your_github_user

        And create a file named config in ~/.ssh with the following contents:

        Host github.com-your_github_user
             Hostname github.com
             User git
             IdentityFile ~/.ssh/id_rsa_your_github_user
        

        Then you need to change permissions on the config file

        chmod 600 ~/.ssh/config

        Finally copy the contents of the id_rsa.pub_your_github_user file and add it to your github user's ssh keys.

    3. Add remote repository to local git setup:

      1. If you do not have multiple github user accounts:

        git remote add origin [email protected]:your_github_user/your_project_name.git
      2. If you have multiple github user accounts:

        git remote add origin [email protected]_github_user:your_github_user/your_project_name.git
    4. Create the .gitignore file in the root directory of the project and populate it with files and directory patterns you do not want to include in version control. This usually includes but is not limited to:

      1. IDE files
      2. Node Modules
      3. Debug logs
      4. Process ID files
      5. Grunt file
      6. Compiled Addons
      7. Packs

      For simplicity, you can just use the .gitignore file provided in this project and modify it as you wish.

  6. Install yarn and typescript globally.

    npm i -g yarn typescript 

react-redux-typescript-webpack-jest-cucumber's People

Contributors

smhabdoli avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.