fflow is an easy-to-use open-source tool for all developers to create their React application.
Supercharge your React development process
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Give a ⭐️ if our project helped or interests you!
React is the most popular library used by frontend developers today. Yet, getting a React application started requires a too much boilerplate code and unnecessary time.
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI. It combines the most compelling features of Create React App, React ES6 snippets, and a beautiful user experience. We are really excited to launch this alpha version and hope you will download, play around with it, and provide us with feedback.
Here is a medium article describing the philosophy behind fflow and you can download it here.
Visit our website here 👉 https://fflow.dev
💫💫 Coming soon to Windows 💫💫
The following instructions are split into two sections for:
Please download the latest release of fflow for MacOS or Windows.
💫 Linux version coming soon. 💫
Mac users: After opening the dmg and dragging fflow into your Applications folder, CTL + Click
the icon and 'Open' from the context menu to open the app. This extra step is necessary since we don't have an Apple developer license yet.
Windows users: Install the application by running fflow setup 1.0.0.exe.
git clone https://github.com/oslabs-beta/fflow
npm install
./node_modules/.bin/electron-rebuild
in your terminal or .\node_modules\.bin\electron-rebuild.cmd
on Windowsnpm run start
npm run package
npm run build
|| yarn run build
) npm run prod
Note there is currently an issue where the Monaco Code Editor keeps showing 'loading...' in development mode. We are working to solve this. In the meantime, when you drag HTML tags onto canvas you can still see the code editor's contents in the Developer Tools.
Electron, React and Redux tests can be run using npm run test
Below is the generated directory structure of the React and Webpack application that is created when you export your application.
├── dist # Compiled files
│ └── index.html
├── src # Source files
│ └── App.js
│ └── index.js
│ └── styles.css
├── webpack.config.js # Webpack configuration
├── .babelrc # Babel configuration
├── .gitignore # Git ignore file
├── package.json # Dependencies file
└── README.md # Boilerplate README file
cd
into the Exported Project in your Downloads
foldernpm install
npm run start
Localhost:8080
does not open automatically in your default browser, navigate to the specified port to see your running app with Hot Module Reloading and a pre-configured webpackAdding Sass to your exported project requires updating webpack configs and adding necessary loaders.
sass-loader
and node-sass
webpack.config
with the following: {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
styles.css
to styles.scss
Adding Tailwind to your exported project requires updating webpack configs, adding necessary loaders and tailwind config.
npm install tailwindcss
npm install -D postcss-loader autoprefixer
src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
postcss.config.js
file and copy the following code inmodule.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')],
};
'postcss-loader'
to the css rules in webpack.config
This boilerplate names your project Exported Project
. You can change the app title by inserting the app title within the <title> </title>
tags in index.html
.
Project Links: Github | Linkedin | Media
Contributions are what make the open source community an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.
If you have a suggestion of how to make fflow better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
git checkout -b
yourgithubhandle/AmazingFeature)git commit -m
'Add some AmazingFeature')git push origin
yourgithubhandle/AmazingFeature)Licensed under MIT License © fflow.