jxnblk / ram

:atom_symbol: React Application Manager: create and run React (and other) applications – no command line or build setup required

RAM: React App Manager

BETA

Create and run React applications – no command line or build setup required. Powered by Electron & Create React App

Getting started

RAM requires Node.js v6 and npm v5.2 or later to be installed on your computer. Install the latest version of Node.js (which includes npm) here:

• Install Node.js

Download for MacOS:

• Download

RAM includes support for the following app types:

• Create React App
• Next.js
• Gatsby
• Razzle
• Vue.js
• Preact

To add support for another app, please open a pull request.

Motivation

I'm a firm believer in code literacy, and I've worked with many people throughout my career who have strong development skills with languages like HTML and CSS, but who might face barriers to entry with modern front-end development tools. When I think about the potential barriers to entry, a few things come to mind:

1. Scaffolding a full React (or similar) application requires a bit of setup
2. The terminal and command line interfaces can be intimidating at first
3. Node.js and npm can be foreign concepts to people new to front-end development

For the most part, Create React App has solved #1 for people who already know #2 and #3. It's an excellent tool and that's why RAM makes use of it.

RAM is aimed at abstracting away the terminal and npm aspects for beginners. If you're a professional front-end developer, I'd recommend using the command line tools directly instead of an application like this, as it's a very valuable and powerful skillset to utilize. If you do make use of this app, hopefully it can serve as a learning tool and can make some of these things less intimidating as you progress.

Remember: GUIs will never be as efficient or powerful as CLIs

How it works

All the magic comes from the underlying command line interfaces: npm and create-react-app. This application uses Electron to spawn child processes that run the commands to power these tools. The logs from stdio are passed back to the application for display. See the renderer/spawn.js and renderer/CreateForm.js modules for an example of how this works.

Alternative approaches

Some alternatives to this particular Electron setup include:

• Server running directly in electron
• Using zeit/pkg with a web interface

Caveats

• Requires Node.js v6+ and npm v5.2+
• Built in a few hours
• No tests
• Not tested on Linux or Windows

Alternatives

• Compositor Iso is a similar project aimed at solving a similar problem
• Use Create React App directly
• CodeSandbox is great for quick prototypes and demos with shareable URLs
• Guppy project by Josh Comeau

Roadmap

• Abstract create form to a more general purpose utility
• npm depencendy management

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Development

Install dependencies and start the app:

npm i && npm start

The main folder contains modules for the main process, and renderer includes all files for the renderer process. No Babel transpilation is used, so be sure to use Electron-compatible modules and syntax.

MIT License

ram's Issues

"this will run npm undefined"

just a visual bug, it still works fine!

seen when doing a regular create-react-app

Question: Can yarn be used to run tasks over npm?

Known Issues

• Might or might not even work...
• No warning in the UI when Node.js or npm are missing or incompatible
• File menu is not implemented
• Project menu is not implemented
• Remove project is not in the UI
• Recent projects are not added to the application store
• Port is hard-coded to 3000
• No UI for clearing logs
• npm uninstall is not implemented
• npm outdated/update is not implemented

Vue App option doesn't seem to work

RAM-0.0.9.dmg

[Bug] Cannot find module 'libnpx'

Hey !
This looks awesome and it works when I download the latest version but i forked it and tried to run it in my computer to add some more options and I get this error :(

npx create-react-app swinternal/modules/cjs/loader.js:596
    throw err;
    ^

Error: Cannot find module 'libnpx'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/npm/bin/npx-cli.js:3:13)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)

Has this happened to you ?

npm install doesnt seem to work

it just prints out the command, nothing happens

when i check the source, i can verify that the install hasn't succeeded.

[feature request] open in IDE

better than Open in Finder

there is relevant code to do this in create-react-app itself, to detect and open the IDE

How about React Native?

Can you please add or is it viable option to add support for Create React Native App?

[bug] main screen screenshot seems to fail after i have edited some stuff