DEV Community: Ryan

🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🚀 Bonus: deploy - part 7/7)

Ryan — Mon, 04 Feb 2019 02:51:40 +0000

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

🏗️ Setup (part 1)
🏠 Restaurants (part 2)
🍔 Dishes (part 3)
🔐 Authentication (part 4)
🛒 Shopping Cart (part 5)
💵 Order and Checkout (part 6)
🚀 Bonus: Deploy (part 7) - current

Note: the **source code* is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

🚀 Bonus: deploy

At this point, we only need to deploy our API and our web app.
Strpi can be hosted on any major provider offering node deployments (AWS, Heroku, DO). Read further about deployment of Strapi here:
https://strapi.io/documentation/3.x.x/guides/deployment.html

Note: for deployment you will need to change your URLs and connection strings from the default localhost:1337 we were using in the tutorial to the absolute server URL your deploying to.

In a real world application, it would be advised to use webpack environment variables to prevent having to manually change the URL every time you deploy to production

Bonus:Bonus AWS File Upload

If deploying your backend to a provider that does not persist storage on the server like Heroku, the default Strapi local server upload will not work as your files on the server are automatically wiped periodically.

Strapi does supports easy file upload to S3, to enable it follow the instructions below.

Strapi Docs: https://strapi.io/documentation/3.x.x/guides/upload.html#examples

To install the strapi-aws-upload package go to the root of your folder you created Strapi in:

cd backend
npm install strapi-upload-aws-s3@alpha --save

After the package is installed you can navigate in your browser to:
http://localhost:1337/admin/plugins/upload/configurations/development

You should see configuration options for your file upload storage options for the respective environment

Select Amazon Web Service S3 from the Provider dropdown

Enter your respective AWS Access Key ID, Secret, Region and Bucket name, also make sure the enable file upload is flipped to ON

In the frontend code, make sure to remove the localhost:1337 from your img src attribute. You can now just use res.image.url to grab the S3 image link

You will have to do this for both the RestaurantList index.js component and restaurants.js page

Example:

Thats all it takes to enable S3 file uploads with Strapi!

Backend

Init a git project and commit your files:

cd backend
rm package-lock.json # May involved errors if not removed
git init
git add .
git commit -am "Initial commit"

Make sure the Heroku CLI is installed on your computer and deploy:

heroku create
heroku addons:create mongolab:sandbox --as DATABASE
git push heroku master

To get Strapi working on Heroku you will need to set your database connection strings:

You will need to add these config variables in order for Strapi to connect to the DB.

These config variables can be deconstructed from the standard DATABASE_URI value you will see on this page.

Create new values breaking down the connection string as followed below:

Note: your values will differ from these, but be similar structure:

DATABASE_AUTHENTICATION_DATABASE = value starting with heroku_ all the way to the colon of your string (i.e. heroku_2dcnd31p)

DATABASE_NAME = same as DATABASE_AUTHENTICATION_DATABASE (i.e. heroku_2dcnd31p)

DATABASE_HOST = string starting with ds followed by numbers ending in .mlab.com (i.e. ds244132.mlab.com)

DATABASE_PORT = 5 digits following the colon of the host name (i.e. 25432)

DATABASE_USERNAME = same as DATABASE_NAME

DATABASE_PASSWORD = random character string after colon of the DATABASE_USERNAME, all the way to the @ sign

You can view your Strapi backend by visiting the URL/route provided by heroku /admin (https://yourapp.com/admin).

Note: you will have to redefine your permissions rules from the interface. This workflow will be improved in the near future.

Next Deployment

You can easily host your front end on Heroku as well. You will need to modify your packages.json file to add in a heroku-postbuild option that will be run once the code is deployed to start your app. You can also add in the -p $PORTflag to your start command

Modify the scripts section if your packages.json file to match:

packages.json

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js -p $PORT",
    "heroku-postbuild": "next build"
  }

Heroku assigns a port dynamically, this is accessible from process.env.PORT. We will need to tell our express server to listen on this port or the default assigned 3000 port.

This will allow us to run locally on port 3000 and in production to the dynamically assigned Heroku port.

process.env.PORT || 3000

Full server.js file:

Now create the git repo for the frontend:

Init a git project and commit your files:

cd ..
cd frontend
rm package-lock.json # May involved errors if not removed
git init
git add .
git commit -am "Initial commit"

Then deploy to Heroku:

heroku create
git push heroku master

Your command line should show the URL for the application where you can view your app!

Extra:

NOW serverless deployment:

only follow if you want to deploy your next project as a static build site without custom routing/logic

Note: The following deployment method will only deploy your project as a static hosted site on the NOW serverless platform. Your custom express server will not be created following this method. *leaving in for reference if needed for your needs*

You can host next projects anywhere a node project can be deployed as it is just a node pacakage. For this tutorial we will deploy to NOW, a serverless deployment provider:
https://zeit.co/now

Init a git project and commit your files:

cd ..
cd frontend
rm package-lock.json # May involved errors if not removed
git init
git add .
git commit -am "Initial commit"

First install the NOW command line:

npm i -g now

Follow the instructions to confirm your email.

Add the following Dockerfile which will:

Install all the dependencies
Build the application for production
Remove non-production dependencies
Create a new lighter Docker image to reduce boot time
Pull built files and production dependencies from previous steps
Expose the port 300 and run the application

Create the Dockerfile at the root of the project:

touch Dockerfile

Add:

FROM mhart/alpine-node:10 as base
WORKDIR /usr/src
COPY package.json yarn.lock /usr/src/
RUN yarn install
COPY . .
RUN yarn build && yarn --production

FROM mhart/alpine-node:base-10
WORKDIR /usr/src
ENV NODE_ENV="production"
COPY --from=base /usr/src .
EXPOSE 3000
CMD ["node", "./node_modules/.bin/next", "start"]

Then, create a now.json file at the root:

touch now.json

Contents:

{
  "type": "docker",
  "public": true,
  "features": {
    "cloud": "v2"
  }
}

Run command now for deployment

Conclusion

Huge congrats, you successfully achieved this tutorial. I hope you enjoyed it!

The source code is available on GitHub: https://github.com/ryanbelke/strapi-next.

Still hungry?

Feel free to add additional features, adapt this projects to your own needs and give your feedback in the comments section.

Share your meal!

You enjoyed this tutorial? Share it around you!

🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 💵 Order and Checkout (part 6/7)

Ryan — Mon, 04 Feb 2019 02:49:52 +0000

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

🏗️ Setup (part 1)
🏠 Restaurants (part 2)
🍔 Dishes (part 3)
🔐 Authentication (part 4)
🛒 Shopping Cart (part 5)
💵 Order and Checkout (part 6) - current
🚀 Bonus: Deploy (part 7) -

Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

💵 Order and Checkout

You must start being starving... I am sure you want to be able to order!

Define Content Type

We need to store the orders in our database, so we are going to create a new Content Type in our API.

Same process as usual:

Navigate to the Content Type Builder (http://localhost:1337/admin/plugins/content-type-builder).
Click on Add Content Type.
Set order as name.
Click on Add New Field and create the followings fields:
- address with type String.
- city with type String.
- dishes with type JSON.
- amount with type Integer (decimal).
Click on Save.

Allow access

To create new orders from the client, we are going to hit the create endpoint of the order API. To allow access, navigate to the Roles & Permissions section (http://localhost:1337/admin/plugins/users-permissions), select the authenticated role, tick the order/create checkbox and save.

Stripe setup

In this section you will need Stripe API keys. To get them, create a Stripe account and navigate to https://dashboard.stripe.com/account/apikeys.

Add logic

If you already used Stripe, you probably know the credit card information does not go through your backend server. Instead, the credit card information is sent to the Stripe API (ideally using their SDK). Then, your frontend receives a token that can be used to charge credit cards. The id must be sent to your backend which will create the Stripe charge.

Not passing the credit card information through your server relieves you the responsibility to meet complicated data handling compliance, and is just far easier than worrying about securely storing sensitive data.

In order to integrate the Stripe logic, we need to update the create charge endpoint in our Strapi API. To do so, edit backend/api/order/controllers/order.js and replace its content with:

Path: /backend/api/order/controllers/order.js

Note: in a real-world example, the amount should be checked on the backend side and the list of dishes related to the command should be stored in a more specific Content Type called orderDetail.

Install the stripe package inside the backend directory:

cd ..
cd ..
cd ..
cd backend 
npm i stripe --save

Do not forget to restart the Strapi server.

Note: if an error occurs, run npm i strapi-hook-mongoose.

To interact with the Stripe API, we will use the react-stripe-elements which will give us a StripeProvider and Elements components to style our credit card form and submit the information properly to Stripe.

Checkout page

Create a new page: pages/checkout.js/,

cd ..
cd frontend
yarn add react-stripe-elements
cd pages
touch checkout.js

Path: /frontend/pages/checkout.js

Now we are going to create the checkout form and card section component to capture the credit card info and pass it to Stripe using the react-stripe-elements package:

Create the checkout form files:

cd ..
cd components
mkdir Checkout
cd Checkout
touch CheckoutForm.js

Path: /frontend/components/Checkout/CheckoutForm.js

Now create a CardSection.js file to use the React Elements in, this will house the input boxes that will capture the CC information.

touch CardSection.js

Path: /frontend/components/Checkout/CardSection.js

Now if you select a dish and click order you should see:

Now if you submit your order, you should see the order under the Strapi dashboard as follows:

Explanations 🕵️

Note: explanations of code samples only, do not change your code to match this as you should already have this code this is simply a snippet

For server side rendering with react-stripe elements, some modifications need to be made as Stripe will only be available on the client not the server.

To account for this, the stripe pk_key is set in the ComponentDidMount lifecycle hook that only fires on the browser:

Stripe will use a <StripeProvider> component that will take in your stripe pk_key as a prop. This allows the children of the component access to the stripe key.

To use the integrated stripe components we will wrap our CheckoutForm component in the <Elements> component.

The downstream import { injectStripe } from "react-stripe-elements" inside the CheckoutForm component is required for the Elements children components to pass the CC information to Stripe.

Stripe will automatically detect which components are generating the CC information and what information to send to receive the token.

This submitOrder function will first make the call to Stripe with the CC information and receive back the Token if the CC check passed. If the token is received we next call the Strapi SDK to create the order passing in the appropriate information and token id.

This is what creates the order in Stripe and creates the DB entry in Strapi. If successful you should see your Stripe test balances increase by the amount of the test order.

You are now able to let users submit their order.

Bon appétit! 🇫🇷

🚀 In the next (and last) section, you will learn how to deploy your Strapi app on Heroku and your frontend app on NOW : https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----bonus-deploy---part-77-1i8e

🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🛒 Shopping cart (part 5/7)

Ryan — Mon, 04 Feb 2019 02:48:01 +0000

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

🏗️ Setup (part 1)
🏠 Restaurants (part 2)
🍔 Dishes (part 3)
🔐 Authentication (part 4)
🛒 Shopping Cart (part 5) -current
💵 Order and Checkout (part 6)
🚀 Bonus: Deploy (part 7)

Note: the **source code* is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*

🛒 Shopping Cart

All of these dishes look so tasty! What if we could add some of them in a shopping card?

Next, we create a new component named Cart.js:

cd ..
cd components
mkdir Cart
cd Cart
touch Cart.js

Path: /frontend/components/Cart/Cart.js

React Context

To keep track of our items added to our cart across pages we will use the React Context API. Context will allow us to manage the state of items in a provider component that will be re-used on the checkout page. The only thing React Context will not take care of for us is saving items on a page refresh, for that you would want to save the items to a cookie and restore the items from the cookie. I will work to implement this soon if requested.

The items are currently saved to a cookie called items, but the items are not restored on refresh.

Create a new directory inside our components folder:

Note: you can name your AppProvider anything related to the context you are storing (i.e. ItemsContextProvder). This would allow you to use and keep track of multiple providers/consumers throughout the app if your needs grow.

cd ..
mkdir Context
cd Context
touch AppProvider.js

Path: /frontend/components/Context/AppProvider.js

Now we will need to make some changes to use our Context throughout the application and on the dishes page.

Update the _app.js and /pages/restaurants.js files to use the AppProvider/Consumer components:

Path: /frontend/pages/_app.js

Path: /frontend/pages/restaurants.js

Now if you refresh the page you should see the Cart component to the right of the dishes.

Your Layout header should also update with the username of the logged in user and show a logout button if you are logged in.

To actually place an order the isAuthenticated prop must pass to true, in a real world app you would want to secure these routes on the server side rather than on the client side. Any props/state on the client can be altered and therefore should not expose real world data without server validation.

For the sake of the tutorial we are not currently implementing this.

Good job!

💵 In the next section, you will learn how to setup Stripe for checkout and create orders: https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----order-and-checkout-part-67-fph

🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🔐 Authentication (part 4/7)

Ryan — Mon, 04 Feb 2019 02:46:43 +0000

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

🏗️ Setup (part 1)
🏠 Restaurants (part 2)
🍔 Dishes (part 3)
🔐 Authentication (part 4) -current
🛒 Shopping Cart (part 5)
💵 Order and Checkout (part 6)
🚀 Bonus: Deploy (part 7) -

Note: the **source code* is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

🔐 Authentication

For authentication, we can use the Strapi SDK to register and login our users. Strapi will return a JWT token that can be used to verify transactions on the server (although we will not setup server validation in this tutorial you should in a real world application).

The strapi documentation on users can be found here: https://strapi.io/documentation/1.x.x/users.html.

Authentication

For authentication we are going to use 2 higher order components defaultPage.js and securePage.js to wrap our pages and pass an isAuthenticated prop down to the necesseray components.

Make a new directory in the root of the project:

mkdir hocs
cd hocs
touch defaultPage.js
touch securePage.js

Path: /frontend/components/hocs/defaultPage.js

Path: /frontend/components/hocs/securePage.js

To setup our authentication functions we will create a new file under the /lib folder called auth.js that will allow us to control and change authentication functionality in one place.

As you will, three new dependencies are imported in the upcoming files, so you need to install them:

cd ..
yarn add jwt-decode js-cookie strapi-sdk-javascript 

cd lib
touch auth.js

Path: /frontend/lib/auth.js

Why cookies? 🍪

Nothing related to this food tutorial...

Most of the time, progressive web apps store a JSON Web Token (JWT) in the local storage. That works pretty well, and this is what the Strapi JavaScript SDK does by default (it also stores it as a cookie).

The fact is that we would like to display the username in the header (coming later in this tutorial). So we need to store it somewhere.

We could have store it in the local storage, but since Nuxt supports server-side rendering, which has not access to the local storage, we need to store it in the cookies.

Register

To register a user we will pass a username, email and password with the Strapi SDK. This will register a user in Strapi and log the user in. Inside of our signup page we will call the strapiRegister function inside of our auth.js file to register the user then set the appropriate JWT and username cookies inside the browser.

Path: /frontend/pages/signup.js

Logout

Inside of our Layout.js component we check for an authenticated user using the isAuthenticated prop, and if a user is detected we display the username and a logout button.

The logout button will call the unsetToken function to delete the cookies and re-route to the home page.

Path: /frontend/components/Layout.js

Login

Similar to our login page, the sign-in page will use the Strapi SDK to login in the user and set the appropriate username and JWT cookies for later use.

Path: /frontend/pages/signin.js

Now update your index.js page to use the newly created defaultPage HOC.

Path: /frontend/pages/index.js

Next we wil setup React Context for our shopping cart, and allow our Layout header bar to recognize a user is logged in and display the username

🛒 In the next section, you will learn how to create a full featured shopping cart: https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----shopping-cart-part-57-2h1e

🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🍔 Dishes list (part 3/7)

Ryan — Mon, 04 Feb 2019 02:45:41 +0000

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

🏗️ Setup (part 1)
🏠 Restaurants (part 2)
🍔 Dishes (part 3) -current
🔐 Authentication (part 4)
🛒 Shopping Cart (part 5)
💵 Order and Checkout (part 6)
🚀 Bonus: Deploy (part 7)

Note: the **source code* is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

🍔 Dishes list

Congratulations, you successfully displayed the list of restaurants! This was the first major step.

Define Content Type

Every restaurant sells dishes, which also must be stored in the database. So, we now need a new Content Type, obviously named dish. Since you already know how to create it, I am going to give only its attributes:

name with type String.
description with type Text.
image with type Media.
price with type Number (integer).
restaurant with type Relation: this one is a bit more specific. Our purpose here is to tell to Strapi that every dish can be related to a restaurant. To do so, create a one-to-many relation, as below.

Here is the final result:

Add some entries

Then, add some dishes from the Content Manager: http://localhost:1337/admin/plugins/content-manager/dish. Make sure they all have an image and are linked to a restaurant.

Display dishes

We will use a new route for /restaurants that will take in the ID of restaurant and return the list of dishes for that restaurant:

cd ..
cd ..
cd pages
touch restaurants.js

Path: /frontend/pages/restaurants.js

Now you should see your list of dishes associated with that restaurant if you navigate via the browser.

We will add the cart in the upcoming sections, hang tight!

You will notice that if you navigate to the restaurant route and hit refresh, you will get a 404 page. This is because when you click the Link component the client is handling the routing, but on refresh the route is not found by the server.

To handle this we can setup an express server coupled with Next to render the route properly.

yarn add express

Next create a file server.js inside the root of your project directory.

cd ..
touch server.js

Path: /frontend/server.js

To use the custom express server edit your packages.json file and replace the script section with:

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }

Restart the dev server,
now with a refresh you should see the appropriate dishes as expected on a page refresh.

🔐 In the next section, you will learn how to authenticate users in your app (register, logout & login): https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----authentication-part-47-eho

🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🏠 Restaurants list (part 2/7)

Ryan — Mon, 04 Feb 2019 02:44:56 +0000

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

🏗️ Setup (part 1)
🏠 Restaurants (part 2) -current
🍔 Dishes (part 3)
🔐 Authentication (part 4)
🛒 Shopping Cart (part 5)
💵 Order and Checkout (part 6)
🚀 Bonus: Deploy (part 7)

Note: the **source code* is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

🏠 Restaurants list

First of all, we need to display the list of restaurants in our web app. Of course, this list is going to be managed through our API. So, we are going to start configuring it.

Define Content Type

A Content Type, also called a model, is a type of data. A Strapi API includes, by default, the user Content Type. Right now, we need restaurants, so our new Content Type is going to be, as you already guessed, restaurant (Content Types are always singular).

Here are the required steps:

Navigate to the Content Type Builder (http://localhost:1337/admin/plugins/content-type-builder).
Click on Add Content Type.
Set restaurant as name.
Click on Add New Field and create the followings fields:
- name with type String.
- description with type Text with Rich Text Editor (in the Advanced Settings section of the modal, select Display as a WYSIWYG).
- image with type Media.
Click on Save.

At this point, your server should have automatically restarted and a new link Restaurant appears in the left menu.

Add some entries

Well done! You created your first Content Type. The next step is to add some restaurants in your database. To do so, click on "Restaurant" in the left menu (http://localhost:1337/admin/plugins/content-manager/restaurant).

You are now in the Content Manager plugin: an auto-generated user interface which let you see and edit entries.

Let's create a restaurant:

Click on Add New Restaurant.
Give it a name, a description and drop an image.
Save it.

Create as many restaurants as you would like to see in your apps.

Allow access

Having the items in database is great. Being able to request them from an API is even better. As you already know, Strapi's mission is to create API (I have got a super secret anecdote for you: its name is coming from Boot*strap* your API 😮).

When you were creating your restaurant Content Type, Strapi created, behind the scene, a few set of files located in api/restaurant. These files include the logic to expose a fully customisable CRUD API. The find route is available at http://localhost:1337/restaurants. Try to visit this URL and you will be surprised to be blocked by a 403 forbidden error. This is actually totally normal: Strapi APIs are secured by design.

Don't worry, making this route accessible is actually super intuitive:

Navigate to the Roles & Permissions section of the admin plugin (http://localhost:1337/admin/plugins/users-permissions).
Click on the Public role.
Tick the find and findone checkboxes of the Restaurant section.
Save.

Important: do the same thing for the authenticated role.

Now go back to http://localhost:1337/restaurants: at this point, you should be able to see your list of restaurants.

Enabling GraphQL

By default, API generated with Strapi are best on REST conventions. What if I would tell you that you could transform them into GraphQL within 10 seconds?

Well, let me prove you that.

A GraphQL plugin, which will make all the work for you, is available for Strapi. Install it with the Strapi CLI:

navigate to your backend folder where strapi is installed and install graphql using the strapi install command:

cd backend
strapi install graphql

Or click "Marketplace" on your admin dashboard and select GraphQL

And that's it, you are done installing GraphQL.

Make sure to restart your strapi server if it does not auto restart

Important:

Downgrage graphql-js dependency

With the current implementation you will receive a GraphQL error when trying to query a MongoDB _id field:

This is currently being fixed by the graphql-js maintainers but as of time of writing has not been fixed (github issue linked below).

message: "ID cannot represent value: { _bsontype: "ObjectID", id: }"

This is caused by a breaking change in the graphql-js update on how the ID's from a MongoDB are serialized: https://github.com/graphql/graphql-js/issues/1518.

Based on the comments it looks like the maintainers are working on a fix but as of the time of writing (10/12/2018) the fix is to downgrade your graphql package to: GraphQL 0.13.2.

The dependency package is in the /backend folder under the GraphQL plugin folder listed at: /backend/plugins/graphql/.

cd plugins/graphql
npm install graphql@0.13.2 --save

Inside of your packages.json file your graphql dependency should be listed as "graphql": "0.13.2"

Until the issue is fixed if you upgrade your packages inside the server you will break the implementation.

Restart your server, go to http://localhost:1337/graphql and try this query:

{
  restaurants {
    _id
    name
  }
}

Display restaurants

It looks you are going to the right direction. What if we would display these restaurants in our Next app?

Install Apollo in the frontend of our application, navigate to the /frontend folder:

cd ..
cd ..
cd ..
cd frontend
yarn add react-apollo next-apollo graphql gql recompose

To connect our application with GraphQL we will use Apollo and the next-apollo implementation to wrap our components in a withData HOC to give them access to make apollo data queries.

There are a couple differnt approaches to implementing GraphQL into a Nextjs app, the approach we will take is extracting the Apollo logic into lib file and wrapping our components with a Higher Order Component called withData to handle the GQL queries inside each respective components.

Example repo detailing the Apollo Next.js implementation:
https://github.com/adamsoffer/next-apollo-example.

Create a lib directory in the root of the project:

mkdir lib
cd lib
touch apollo.js

Path: /frontend/lib/apollo.js

We will generate the list of Restaurants inside a RestaurantList file as:

cd ..
cd components

mkdir RestaurantList
cd RestaurantList
touch index.js

Path: /frontend/components/RestaurantList/index.js

Now update your /pages/index.js home route to display the Restaurant list:

Path: /frontend/pages/index.js

We will need to update our _app.js file to wrap our application with the Apollo Provider that will enable GraphQL to make queries:

Path: /frontend/pages/_app.js

Now you should see the list of restaurants on the page.

Well done!

🍔 In the next section, you will learn how to display the list of dishes: https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----dishes-list-part-37-5eh/

🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🏗️ Setup (part 1/7)

Ryan — Mon, 04 Feb 2019 02:43:43 +0000

This tutorial will be adapted to use Next.js (React) over Nuxt (Vue) on the front end, complete with GraphQL, Stripe, Strapi and React Context.

Get ready to develop a Deliveroo clone, using amazing technologies: Next.js (React), GraphQL, Stripe and Strapi! From signup to order, you are going to let users discover restaurants, dishes and select their happy meal.

The demo of the final result should make you hungry:

Note: the **source code* is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

Screenshots of final product:

Strapi:

Strapi is the most advanced open-source Node.js Headless Content Management System used to build scalable, secure, production ready API's quickly and efficiently saving developers countless hours of development.

With its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. Unlike online CMS, Strapi is 100% open-source (take a look at the GitHub repository), which means:

Strapi is completely free.
You can host it on your own servers, so you own the data.
It is entirely customizable and extensible, thanks to the plugin system.

Next.js:

Next is a lightweight development framework to create static, server rendered applications in React. Next.js will take care of the heavy lifting of the application such as code splitting, HMR (hot module replacement) and SSR (server side rendering) and allow us to focus on the application.

React:

React is one of the most popular front end Javascript frameworks, developed by facebook and used by countless tech companies including Netflix, Airbnb and Github to build applications. React is a declarative library that makes it easy to create interactive user interfaces, keeping the code base organized through its component based architecture.

GraphQL:

GraphQL is a query language also developed by Facebook to allow the front end of an application to easily query an application's API. Each query requests only the data needed to be rendered by the current view. This allows the developer to craft a great user experience across multiple devices and screen sizes.

Stripe:

Stripe is one of (if not the largest) payment processor's for application today. Stripe has developed the tools and SDKs to allow developers to craft and integrate secure, compliant payment processing into any app with easy.

🏗️ Setup (part 1) -current
🏠 Restaurants (part 2)
🍔 Dishes (part 3)
🔐 Authentication (part 4)
🛒 Shopping Cart (part 5)
💵 Order and Checkout (part 6)
🚀 Bonus: Deploy (part 7) ## 🏗️ Setup

To setup Next.js we will need an empty directory to install the library and host our project root.

We will split our project into two parts, one for the front end (Next.js code) and one for the backend (Strapi code).

mkdir strapi-deliveroo
cd strapi-deliveroo
mkdir frontend
cd frontend

yarn add next react react-dom

Note: I am using yarn as my package manager, you can also use npm and execute npm install --save next react react-dom.

Add the following to your package.json file:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

So that your file looks like this (your package dependencies may have different versions depending on the time of install):

{
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Next.js uses any JavaScript file in the /pages directory as the routes for the application. To setup simply create the /pages directory and add an index.js file with:

mkdir pages
cd pages
touch index.js

Now that we have our main route (index.js), this will be loaded each time the browser URL is at the root (i.e. www.yourapp.com). To test this you can insert the following into the index.js file:

export default () => <div>Welcome to next.js!</div>

To view the application running, start the local dev server using:

yarn dev

Your application should now be visible at http://localhost:3000.

Be sure to create a .gitignore in the project root and add .next and node_modules directories to it:

cd ..
touch .gitignore

/* .gitignore */
node_modules
.next

Adding Bootstrap

For this tutorial, we will use react-strap to implement Bootstrap 4 into our application. For the CSS styling we will import directly from a CDN.

First install Reactstrap:

yarn add reactstrap bootstrap

reactstrap is simply a front end library to easily create Bootstrap components and styling.

To import the CSS and share a Layout component across all our pages we will use a custom _app.js file inside the pages directory.

This file will serve to override the default App.js used by Next and be rendered on each page, allowing us to set global styles/shared components in one place.

You can read more about the _app.js handling here: https://nextjs.org/docs/#custom-app.

This will allow us the ability to import a <Head> component and globally set the stylesheet inside the header.

cd pages
touch _app.js

Path: /frontend/pages/_app.js

Now if we add in some reactstrap components inside of index.js we should see the bootstrap styling applied once we restart our server.

Path: /frontend/pages/index.js

Restart your server to apply the new changes.

Designing the page

Now that we have Bootstrap running inside of our Next.js project, we can begin to style the basic shared front end components like the navbar.

First create a folder to store our components and create our layout component:

cd ..
mkdir components
cd components
touch Layout.js

Nextjs uses the <Link> component to perform the client side routing between pages. The Link component is just a Higher Order Component and can accept any html tag that can handle an onClick handler (<a>,<button>,<div> etc.).

This will cause us to have to make a few modifications outside of the reactstrap documentation. To style our navbar we can use the built in CSS in JS <style jsx> shipped by default with nextjs.

Inserting CSS in JS as:

<style jsx> {`
  a { color: yellow }
`}
</style>

Allows us to scope CSS to the components the style tag is rendered in, you can also pass in the global option to set a global style: <style jsx global>

You can read more on CSS in JS in the Next documents here.

Open the Layout.js file and create the shared layout components and insert the Stripe script (for later) as follows:

Path: /frontend/components/Layout.js

Edit the index.js file to use the new Layout component:

Path: /frontend/pages/index.js

You should now have a shared header bar across all your pages:

We will create two additional pages to allow users to sign in and sign up at /signin and /signup respectively.

You will need to create the corresponding files inside the /pages directory for next to recognize the routes.

cd ..
cd pages

touch signin.js
touch signup.js

Populate the files with the following code that we will come back to once our Strapi server is setup.

Path: /frontend/pages/signup.js

Path: /frontend/pages/signin.js

You should now see the routes at http://localhost:3000.

Strapi

Having a frontend is good, but your app obviously needs a backend to manage users, restaurants, dishes and orders. To make the magic happen, let's create a Strapi API.

Install Strapi

Requirements: please make sure to use Node 9 (or more) and have either MongoDB, Postgres or MySQL installed and running on your machine.

Install Strapi using npm:

npm i strapi@alpha -g

Note: Strapi v3 is still an alpha version, but it will be fine for this tutorial.

Generate a Strapi project

Scaffold your API inside the strapi-deliveroo through a single command line:

Install a strapi server in a directory called backend:

cd ..
cd ..
strapi new backend

The CLI will ask you to choose your database: select MongoDB, Postgres or MySQL. Then, fill the database information in (if you choose a DB other than mongo you will need to alter the _id field to id in the preceding GraphQL queries). The default values should work if you correctly installed the database system on your machine.

Note: This tutorial uses MongoDB, once you create the strapi project you will be asked to start the Mongo instance before you can start your strapi server.

Navigate to the installation of your MongoDB (default on MacOS)

cd ~./data/db
mongod

This will start you MongoDB server on your local machine and you can now start your Strapi Server.

Start the server

Launch the Node.js server:

cd backend
strapi start

Starting now, you should be able to visit the admin panel of your project: http://localhost:1337/admin.

Create your first User

Add your first user from the registration page.

Good job, you successfully setup both Next.js and Strapi projects! 🎉

🏠 In the next section, you will learn how to display the list of restaurants: https://dev.to/ryanrez/-cooking-a-deliveroo-clone-with-nextjs-react-graphql-strapi-and-stripe----restaurants-list-part-27-10ce

Protect your environment variables at all cost

Ryan — Wed, 30 Jan 2019 02:03:22 +0000

What is the problem being solved?
The problem being solved is the accidental exposure of API keys, passwords or other sensitive data being exposed accidentally in a git repo

Who is this for?
Beginners working with Git/Node.

Speaking with a fellow dev recently, it was mentioned how he was updating an old github project and had accidentally pushed his AWS keys to github after adding the credentials.yml file to the project level .gitignore (hint, your git cache needs to be cleared if you add a file to the .gitignore file of an already tracked repo).

Within 4 hours a notification email from Amazon had came that his account had been comprised, accompanied by the appropriate mitigation steps (change password, 2FA, check unauthorized instances and shut them down manually).

Looking through his AWS account the next morning he found 20 EC2 instances had been started in every single region, US, EU, South Korea you name it. Data transfer usage billed in less than 24 hours sat at ~$10,000 with a projected monthly usage much much higher.

A quick search on Google resulted in several Quora answers with similar results of being comprised and that Amazon was crediting back for the unauthorized usage, some with data transfer bills as high as $250,000.

This is what inspired this article on the best practices to protect one of the most important aspects of a project, your environment variables. My hope is that you will implement these strategies and protect yourself or your employer from a security breach.

Environment Variables

API keys should avoid being hard coded in code at all costs as these values could easily be uploaded to a shared git repository by accident, giving unvetted access to your account with the API provider.

Environment variables can be managed in a separate .env/credentials file locally in the project, stored in your system variables on your machine and secured in production on the server as an environment variable.

This allows the credential file to be added to a local .gitignore or a global .gitignore to prevent accidental upload.

The following steps are what I recommend to help secure you and your teams credentials.

Global .gitignore

Project .gitignore files are well known, but the lesser known more important .gitignore file can be setup on your machine and apply to every git repository you track.

To setup, open the terminal and type:

$ git config --global core.excludesfile ~/.gitignore_global

Now you can add any files or extensions you want to make sure don't make it to a git repository.

You can open the file from the command line with:

$ vim ~/.gitignore_global

Once inside vim editor hit i to insert text and :q to save/exit when finished

Some common entries that would be used for credentials include .env variables.env credentials.yml /node_modules depending on your project/coding language.

An extensive list of recommend file extensions can be found here:
https://gist.github.com/octocat/9257657

Local project .gitignore

This is the most common type of .gitignore and can be found in the git project root directory.

This file is simply created after running git init

Any file extensions, files or folders listed in this file will be ignored from git tracking.

https://git-scm.com/docs/gitignore

Clearing the git cache

If you have already initialized your git repo and want to add files to your .gitignore after having already tracked files you will need to clear the git cache using:

$ git rm -r --cached .
$ git add .`
$ git commit -m "new files added to .gitignore not being tracked"

If you forget to clear the cache and add a file you don't want tracked to the gitignore and do a normal git add . git commit -m "file will be added to git" your file will be pushed to git unless you have setup the global .gitignore with the proper extension.

Clearing Your Mistakes With BFG

If you do happen to expose an API key by mistake, all hope is not lost. Make sure to cancel and rotate the key so no damage can be done. You can also remove text/folders from a git repo easily using BFG

https://rtyley.github.io/bfg-repo-cleaner/

Install on Mac:

$ brew install bfg

Now you can remove text from your git commit history using:

$ bfg --replace-text variables_file.env
$ git add .
$ git commit -m 'text removed'
$ git push --force

This will insert REMOVED for text of this file like so:

Please read the instructions printed for BFG as this won't delete the file you will have to do that manually, this will only remove the text from your commit history.

You can also remove the entire file/folder
$ bfg --delete-folders .git --delete-files .git --no-blob-protection my-repo.git

Dotenv (.env)

All this talk on how to protect your API keys, but how do actually prevent hard coding your keys?

Simple, using an NPM package called dotenv

Install with:

# with npm 
$ npm install dotenv

# or with Yarn 
$ yarn add dotenv

Now in your application, typically at the top of the server.js file use:

$ require('dotenv').config()

Create a .env file in the root of your project structured as:

API_KEY=3nds234nds2

Now you have access to the key using process.env.API_KEY which will be converted to your key value when your code is built. Any commit to git will see proccess.env.API_KEY rather than your actual key value.

Now you can sleep at night knowing your keys are protected!