Light

nteract / create-nteract-app Goto Github PK

View Code? Open in Web Editor NEW

34.0 12.0 6.0 326 KB

:zap: Create an nteractive application with zero configuration

License: BSD 3-Clause "New" or "Revised" License

JavaScript 100.00%

nteract mybinder nextjs mdx react

create-nteract-app's Introduction

create-nteract-app

⚠️ This project is now archived due to new directions for the open source project, particularly to reduce our maintenance burden. ⚠️

~~Create an nteractive application backed by next.js, mybinder and react with zero configuration.~~

Installation

Install create-nteract-app globally

npm i -g create-nteract-app

Getting Started

Create an nteract app and run the development server.

create-nteract-app myApp
cd myApp
yarn dev

Now, navigate to http://localhost:3000/ and you should see the following:

Batteries included 🔋

An app bootstrapped with create-nteract-app comes with:

@nteract components for interactive computing apps/pages
automatic webpack and babel configuration through next.js
live hot reloading
mdx
every .js or .md file in ./pages becomes a route that gets automatically processed and rendered!

This means you can write your app in js, markdown or even both! 😄

Your new nteract app will have the following strucure,

.
├── __tests__
│   └── index-spec.js
├── components
│   ├── code-state.js
│   └── presentation-cell.js
├── next.config.js
├── package.json
├── pages
│   ├── _document.js
│   └── index.js
├── scripts
│   └── test-setup.js
└── yarn.lock

Commands 🤖

yarn dev

This will start the next.js server on port 3000 by default. Note, to change the port, run yarn dev -p YOUR_PORT
yarn test

This will kick off the Jest test suite. By default, we have included a snapshot test.
yarn build

This will produce an optimize set of code for production.
yarn start

This will run your optimized app on port 3000.
yarn export

This will export your code as a static HTML app.

Contributing 🎉

Thanks for your interest in contributing! If you get stuck at any point, don't hesitate to reach out to the nteract team on slack or through the issue tracker.

To get started hacking on create-nteract-app, clone the repo and install dependencies.

git clone https://github.com/nteract/create-nteract-app.git
cd create-nteract-app
yarn

Now, make your changes and try them out with, yarn dev your-test-app

This will run create-nteract-app with any modifications you have made. Test your changes with yarn test.

See CONTRIBUTING.md for more details.

create-nteract-app's People

Contributors

Stargazers

Watchers

Forkers

afcarl lilisoonbeats cedkim isabella232 alexrogalskiy jeremyd88

create-nteract-app's Issues

make contributor friendly

add code of conduct as in other nteract projects
add contributing.md

consider adding sensible default repos

I initially added in a language argument here with the intention being the user could specify a language (Python, R, Julia...) and we would insert a corresponding repo for them here. My thinking is that we could pick out a solid binder repo for each language and insert it depending on user input.

We could also just leave the basic Python one in there, but for folks that don't know about binder, it could be nice to have some carefully chosen options for some of the more popular languages ¯\(ツ)/¯.

consider including testing in cna

Should we consider adding Jest as a dependency in the template and include a basic test in the same way create-react-app does?

It might be good to impose a best practice by default, but it would also make our dependencies larger 🤔.

CodeMirror cannot find "navigator"

CodeMirror breaks the default build.

Error

ReferenceError: navigator is not defined
    at /Users/ericeasthope/Desktop/myApp/node_modules/codemirror/lib/codemirror.js:18:19
    at /Users/ericeasthope/Desktop/myApp/node_modules/codemirror/lib/codemirror.js:11:83
    at Object.<anonymous> (/Users/ericeasthope/Desktop/myApp/node_modules/codemirror/lib/codemirror.js:14:2)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/ericeasthope/Desktop/myApp/node_modules/@nteract/editor/lib/index.js:13:38)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)

Steps to reproduce

create-nteract-app myApp
cd myApp
yarn dev

Edit: could this be related? -> JedWatson/react-codemirror#77

styled-jsx has wrong ID on build

When building with

yarn build
yarn start

We get the following:

Probably related to react-hot-loader. I think this is the same issue as this, and this etc...

We should be able to track this down quickly enough, but maybe it's an opportunity to consider a different styling option. We started playing around with styled-components over in ion and it could be a good option here, too. Just a thought 🤔.

built unchanged app...does not run

I ran this sequence of commands:

npm i -g create-nteract-app
create-nteract-app 
create-nteract-app firstMeetingApp
cd firstMeetingApp/
yarn build
yarn start

The final built app fails when loaded, with the following error.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Update dependency prettier to v3

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency commander to v11
Update dependency fs-extra to v11
Update dependency husky to v9
Update dependency jest to v29
Update dependency lint-staged to v15
Click on this checkbox to rebase all open PRs at once

Detected dependencies

circleci

.circleci/config.yml

circleci/node 8.12.0-browsers

npm

package.json

chalk ^2.4.1

commander ^2.16.0

cross-spawn ^6.0.5

fs-extra ^7.0.0

husky ^2.0.0

jest ^23.5.0

lint-staged ^7.2.0

prettier 1.15.2

Check this box to trigger a request for Renovate to run again on this repository

consider adding ability to specify binder repo

Similar to #9, it might be nice to let the user specify a binder repo as an command line arg. Could be overkill, though, as it's really just changing one line 🤔.

docs!

We should get some docs going 😄.

I am not sure what format, but we could consider:

a user guide
a simple static site (maybe even built with create-nteract-app? 🤪)
even just improving the readme

However it goes, some things I think it might be nice for folks to learn:

what the basic structure of a create-nteract-app app is
the fact that pages can be built using jsx or mdx
how styling works (styled-jsx currently)
how to add typing with flow
information about building/deploying their app
maybe even some simple example apps bootstrapped with create-nteract-app

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.