khtdr / svelte-redux-shopping-cart

Example Shopping Cart App using Svelte, Redux, and Webpack

Current Svelte is @v3, but this example repo uses Svelte@v2

You, yes you, should fork this repo, upgrade the Svelte dependendies to v3, and submit a PR!

A port of the Redux Shopping Cart example, from React to Svelte. The bindings between Svelte and Redux are provided by the svelte-redux package. The bundle is built with Webpack and is configured with hot-reloading enabled in development.

Getting Started

1. Clone the repo
2. Install dependencies
3. Start the server

git clone [email protected]:khtdr/svelte-redux-shopping-cart.git
cd ./svelte-redux-shopping-cart && yarn
yarn start

Or with degit

degit khtdr/svelte-redux-shopping-cart your-project
cd ./your-project && yarn
yarn start

Open: http://localhost:8080

❓ If port 8080 is taken, find and change the port number in package.json:

  "start": "http-server public -p 8080 -o"

If you want to run tests on a different port, fix accordingly:

grep -ir 8080 * | grep -v node_modules

Development and Testing

To enable hot-reloading, stop the server and run:

yarn run dev

Or to enable hot-reloading and open the Cypress test suite:

yarn run test

Open your browser to http://localhost:8080. Edit source files and the page will update.

Source Code Structure

• public/ Server Doc Root
• src/index.js Entry point
• src/api/ Mock API Wrapper
• src/components/ "Pure" Components
• src/layouts/ "Container" Components
• src/redux/ Redux Implementation
  • src/redux/actions/
  • src/redux/constants/
  • src/redux/reducers/
  • src/redux/store.js
• cypress/integration/ Cypress.io Tests