Giter VIP home page Giter VIP logo

create-openmrs-app-prev's Introduction

create-openmrs-app PRs Welcome

OpenMRS Logo

This is a fork repository from Facebook create-react-app. It has been customized to generate boilerplate Openmrs Open Web Apps(OWAs) with a single line of command. Resulting OWA will be using openmrs-react-components library which includes common web UI components such as headers, footers, buttons, etc.

How to use:

How to create a Openmrs ReactJS OWA

You do NOT have to clone/download this repository in order to create an openmrs ReactJS app. Just run the following command anywhere in your computer.

npx create-react-app test-app --scripts-version openmrs-react-scripts
cd test-app
cp .env.skeleton .env
npm start

Note: You need to edit .env file by providing your OpenMRS server information. This is necessary that some react components communicate with OpenMRS server to fetch values.

  1. REACT_APP_SERVER_ADDRESS=[OpenMRS Server Address Goes Here]
  2. REACT_APP_SERVER_CONTEXT_PATH=[OpenMRS Server Context Path Goes Here]

OWA with example components

npx create-react-app test-app --scripts-version openmrs-react-scripts-example
cd test-app
cp .env.skeleton .env
npm start

How to contribute:

Setup locally

cd <Path_TO_THIS_REPOSITORY>
yarn

Make the changes you want to make then run,

yarn create-react-app test-app

This command builds a local copy of create-react-app, integrating your changes, then uses it to create a test-app project.

If all goes well, you can now explore the resulting test-app folder and try running the project locally:

cd test-app
yarn start

Associated files

This Repository differs from that of the CRA in terms of react-scripts.

Browse to packages/react-scripts in your editor. You’ll see a few key files and folders inside.

config – contains configuration for Jest, webpack builds and dev server

scripts – the scripts available for running in a create-react-app project, such as yarn start and yarn build

template – the files you actually see when you’ve run 

create-react-app – the base of every new project

Note: The file gitignore instead of .gitignore – this is to avoid ignoring files from the template itself, but will be automatically renamed when generating a project package.json – describes this package and its dependencies

Publish to npm package

When you’re happy with your changes, you just need to publish them to npm. This makes them publicly available and ready for consumption by anybody using create-react-app.

Navigate back to the packages/react-scripts directory.

Note: you’ll also need to increment the version number.

npm publish

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.