Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jaredpalmer/react-email-workflow
Newsletter design tool
https://github.com/jaredpalmer/react-email-workflow
Last synced: about 2 months ago
JSON representation
Newsletter design tool
- Host: GitHub
- URL: https://github.com/jaredpalmer/react-email-workflow
- Owner: jaredpalmer
- Created: 2016-01-26T17:05:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-06T13:55:08.000Z (2 months ago)
- Last Synced: 2024-07-07T13:56:35.846Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 664 KB
- Stars: 178
- Watchers: 9
- Forks: 23
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Email Workflow
[](https://travis-ci.org/jaredpalmer/react-email-workflow) [](https://codeclimate.com/github/jaredpalmer/react-email-workflow) [](https://codeclimate.com/github/jaredpalmer/react-email-workflow/coverage) [](https://david-dm.org/jaredpalmer/react-email-workflow) [](https://david-dm.org/jaredpalmer/react-email-workflow#info=devDependencies) [](https://codeclimate.com/github/jaredpalmer/react-email-workflow) [](http://standardjs.com/)
A drag-and-drop newsletter design tool.
#### Features
- Drag and drop support
- Worker services for web scraping and CSS inlining connected through RabbitMQ
- Livereload both rendered and HTML view.
- Basic Components: Link, Heading, Text, and custom HTML (with Codemirror editor)
### Screenshot
### Development
#### Under the Hood
- React
- JSXStyle
- Redux
- Babel ES6 / Webpack
- Express
- Node
- RabbitMQ
- Premailer
#### Getting started
Open up your terminal and navigate to the directory of your choice. Clone the repository and install its dependencies.
```bash
git clone https://github.com/jaredpalmer/react-email-workflow.git MyEmailApp
cd MyEmailApp
npm install
# if you don't have RabbitMQ installed locally yet...
brew services install rabbitmq
```
Create a `.env` file in your root directory as follows. If you are not running RabbitMQ locally,
also enter your CLOUDAMQP_URL.
```bash
# .env
CLOUDAMQP_URL=XXXXXXXXXXXXXXXXXXXX # RabbitMQ URL
```
#### Run in development mode
Enter the following command in your terminal:
```bash
brew services start rabbitmq
heroku local -f Procfile.local
```
This will start an Express server with Webpack Dev + Hot Middleware and on `localhost:5000`.
It will watch for changes from the `client` dir.
#### Run in production mode
```bash
heroku local
```
#### Testing
As a one off thing:
```bash
npm test
```
I like to put `mocha` in `watch` mode when I am writing reducers etc.
```bash
npm test -- --watch
```
#### Styles
When you examine the codebase you'll notice a lack of CSS files, except for `global.css`. I encourage you read up on the documentation. 90% of the time, jsxstyle is fantastic. However, due to a lack of psuedo selectors, certain things can get annoying...like hover states. Checkout `components/Button.js` to see how to work around this.
#### Email Template
This is left up to you. Basically, you are in charge of your templating functions and converting the element tree into your own email. Checkout `services/premail/createHTML.js`.
### Deployment
This is meant for Heroku at the moment
### Troubleshooting
The following will cover 95% of issues:
1. Clear your browsers `localStorage`.
- `rm -rf node_modules` and then `npm i`
### Roadmap
- [] Real Database, not just local storage
- [] Save elements
- [] Save templates
- [] Tag, or search elements and templates
- [] Images
- [] From URL, Upload to S3 / CDN
- [] Document how to setup a thumbor instance
- [] Auth Flow
- [] Custom CSS in HTML component
- [] Button component
- [] Spacer component
- [] Drop React-dnd, up/down arrows would be more efficent
- React-DnD-HTML5 also negated any hopes of mobile support, so this isn't very responsive, different ordering ui would change that.
- [] WSYISWYG component (via draftjs??)
- [] Test emails! (use nodemailer)