graphql-nextjs (6 Part Series)
I had completed building the Indian Restaurant Billing App , which i started from the learning of Advanced React course by Wes Bos.
I also wrote four articles earlier related to the app, which included some of the problems which i faced and also some settings.
In this article i will give the way to install the app on localhost after taking it from my github . There is a prisma setup, transactional email setup , admin user generation.
I will also walk you through the app. My motive is to have this app serve as a basis of the more advanced Restaurant or general Point-Of-Sale app for anyone or to be used by small Restaurant owners. Fell free to fork it, use it, raise issue(and fix them)
So, go to your favorite terminal and clone the project.
Now, you will see two folders —backend and frontend. Go inside each folder and do npm install
Now, it’s time to setup a Prisma database. So, go to https://www.prisma.io/ and setup an account.
Once it is done, you can check your prisma dashboard.
We will do some of the deployment through the terminal, so go ahead in backend folder and first install prisma globally by npm i -g prisma
Now, while in backend folder only give command prisma login.
It will open your default browser, where you need to enter your credentials which were been used to create the prisma account.
Then it will ask to Grand Permission for use.
Once you click on Grant permission, it will ask you to close the browser. Once done you are authenticated in the console.
Now, we need to type prisma init to initialize a new Prisma service in the terminal. You will get some errors as below.
We are getting these errors because our project is already complete and have some of the prisma related auto-generated files.
You need to go ahead and delete some of them. Delete the below files.
.graphqlconfig.yml datamodel.prisma prisma.yml variables.env src/generated/prisma.graphql
Again type the prisma init and it will let you go through. Here use mouse keys to go down and enter Demo Server + MySQL database
Then choose the least latency one in next screen.
After that choose a name for your service and give stage as dev.
In select programming language give Don’t generate
And prisma created two files for us.
Let’s now open the prisma.yml and we will notice that prisma gave us an endpoint.
We will put this endpoint information, along with some other sensitive information to our environment file.
So, go ahead and create a variables.env in your backend folder. The PRISMA_ENDPOINT will be the endpoint we got from prisma.yml file. Put PRISMA_SECRET and APP_SECRET, anything of your choice.
Next, go to prisma.yml to use these variables. Notice that we have commented out the secret. It is done because we are in development and we don’t want the database to ask us password everytime.
We need to update our datamodel.prisma to the latest code. We had to delete it for prisma init to succeed. Get it from here.
Now in the backend folder run npm run deploy
If everything is successful, you can see the service in your prisma dashboard.
Click on the service and you will see all our datamodel items.
Before, we run our backend and frontend one last step is remaining. Prisma uses something called prisma.graphql, which we had to delete for prisma init to succeed. Get it from here.
Add it in src/generated/prisma.graphql
Now goto backend and frontend folder and run npm run dev
If both are successful your app will start in http://localhost:7777/
Now, in the app the admin user have the privilege to create new user. So, we have to create an admin user first from the backend via graphql playground.
Goto http://localhost:4444/ and give the below mutation to create an admin user.
Then head over to prisma dashboard and add an Admin privileges to this user. You need to click on the three dots beside permissions and click on ADMIN. Then click on the button Save to Database at the bottom
Now login with the Admin user by clicking on SIGNIN. You will see a lot of different admin options here.
Next, we will create a normal user. Click on the SIGNUP.
Create a user with real gmail credentials, as we have reset password facility also.
Next, we will do Transactional email setup for password reset. For this follow all steps from my earlier dev.to article here.
You will get three new values for CLIENT_ID, CLIENT_SECRET and REFRESH_TOKEN, which you will add in variables.env
Also, in Mutation.js add, the gmail id which you had used to setup the transactional email.
You need to restart the backend server and then click on RESET.
If it is successful and you will get the message.
You will get a nice email in your gmail account with the link, to reset the password.
You also need to setup an cloudinary account for image upload and management. Follow all instructions from my earlier dev.to article on it here.
Just change username with the one you got from following the steps in above mentioned article in CreateItem.js
It’s time to test some image uploads. Login with your ADMIN user and click on ADD DISH in hamburger menu. You can also create additional type of users from PERMISSIONS, who can just create and item, or delete or edit an item.
Click on Submit and the dish gets successfully added.
This completes the setup. Go ahead and check all the functionality of Billing, Admin privileges and others. Everything gets saved in the cloud in Prisma database.
If you like this project, please give me star on my GitHub link
Hope you liked this article and you want to deploy this project using heroku. Click here for the article on Deploying React NextJS GraphQL App in Heroku.
This open-source app has also been launched on Product Hunt. Please upvote it.