shivamd20 / blind-coding-server Goto Github PK

React is a JavaScript library to create interactive user interfaces. The core library is focussed on the view layer. It is declarative and component based. This quickstart uses create-react-app to scaffold a react app with no build configuration.

• React.js Hello World Project
  • Automatic reloading and bundling
  • All create-react-app feature
  • react-scripts with inbuilt webpack bundling
• Deployed with the serve package
• Dockerfile (automatically used by Hasura for deployment)

FROM node:8

RUN apt-get update && apt-get install -y build-essential python

#Install deps
RUN mkdir /app
COPY app/package.json /app/package.json
RUN cd /app && npm install
RUN npm -g install serve

#Add all source code
ADD app /app/
RUN cd /app && npm run build

WORKDIR /app

#Default command
CMD ["serve", "-s", "build", "-p", "8080"]

• Press the Clone & Deploy button and follow the instructions.
• The hasura quickstart command clones the project repository to your local computer, and also creates a free Hasura cluster, where the project will be hosted for free.
• A git remote (called hasura) is created and initialized with your project directory.
• Now get your cluster name using hasura cluster status and modify the package.json file inside microservices/ui/app/package.json. Assign your cluster name to REACT_APP_CLUSTER_NAME environment variable.
• Run git add ., git commit, and git push hasura master.
• Run the below command to open your shiny new deployed react app.

$ hasura microservice open ui

• To make changes to the project, browse to /microservices/ui/app/src and edit the HasuraExampleApp.js file in hasuraExamples folder according to your app.
• Commit the changes, and perform git push hasura master to deploy the changes.

To test and make changes to this app locally, follow the below instructions.

• Open Terminal and cd into the project folder
• Run npm install to install all the project dependencies
• Run npm start and npm build in the terminal to build and run it.
• Make changes to the app, and see the changes in the browser

You can view the logs emitted by the ‘serve’ package by running the below command:

$ hasura microservice logs ui

You can see the logs in your terminal, press CTRL + C to stop logging.

• System dependencies, like changing the web-server can be made in the Dockerfile
• npm/yarn deps can be managed by editing package.json.

If changes have been done to the dependencies, git commit, and perform git push hasura master to deploy the changes.

• If you have an existing react app which you would like to deploy, replace the code inside /microservices/ui/src/ according to your app.
• You may need to modify the Dockerfile if your package.json or the build directory location has changed, but in most cases, it won't be required.
• Commit, and run git push hasura master to deploy your app.

Hasura comes with BaaS APIs to make it easy to add backend features to your apps.

Every project comes with an Authentication kit, you can restrict the access to your app to specific user roles. It comes with a UI for Signup and Login pages out of the box, which takes care of user registration and signing in.

Follow the Authorization docs to add Authentication kit to your app.

Hasura project is composed of a set of microservices. These include certain Hasura microservices like, postgres, nginx, data API, auth API and more but can also include your own microservices. This quickstart comes with one such custom service written in nodejs using the express framework. Check it out in action at https://api.cluster-name.hasura-app.io . Currently, it just returns a "Hello-React" at that endpoint.

• Adding Microservice

Hasura comes with set of Data APIs to access the Postgres database which comes bundled with every Hasura cluster. Detailed docs of data APIs can be found here.