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 quickstartcommand 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 statusand modify the package.json file insidemicroservices/ui/app/package.json. Assign your cluster name toREACT_APP_CLUSTER_NAMEenvironment variable. - Run
git add .,git commit, andgit 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/srcand edit theHasuraExampleApp.jsfile inhasuraExamplesfolder according to your app. - Commit the changes, and perform
git push hasura masterto deploy the changes.
To test and make changes to this app locally, follow the below instructions.
- Open Terminal and
cdinto the project folder - Run
npm installto install all the project dependencies - Run
npm startandnpm buildin 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 uiYou 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.jsonor the build directory location has changed, but in most cases, it won't be required. - Commit, and run
git push hasura masterto 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.
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.