✔️ Learn how you can deploy website without cost
✔️ Explore Vercel x NextJS potential
✔️ Use professional tool to deploy your application
✔️ Build a basic REST API
✔️ Automate your continuous deployment
All the required information to start this workshop can be found in SETUP.md
You are a young developer with many ideas to change the world ! The first step is to create your own website but you want to do it fast because you are young and in a hurry.
Your idea is simple, create a blog to show what you can do to everyone. You want to share your skills in front, backend and operational.
But you have a problem, it will be boring and long to deploy all your stacks, set the SSL certificate and DNS to secure your blog etc...
Don't worry, you like the challenge, you search for some tools to easily set an environment and deploy your application. You see that Vercel or Netlify can be really cool to achieve your objective.
In this workshop, we will explore the power of CD as services. Here is a schema of the functioning of those services:
The objective is to deploy your own blog on Netlify or Vercel, here is a really basic example of a blog with some articles.
⚠️ The primary objective is to discover the power of those platform, don't judge the design.
For this workshop, we are going to use Vercel because it has a perfect integration with NextJS.
Let's start a simple Next project.
- Go to Vercel
- Create an account
- Link your Github account
- Create a new project with the NextJS template
- Wait until your project is deployed
💡 There are many templates available here
Your project is now deployed online.
Now, clone the Github repository in your computer.
It should have the following architecture:
.
├── app # Typescript source code
│ ├── favicon.ico
│ ├── global.css # Global styles
│ ├── layout.tsx
│ └── page.tsx
├── next.config.js
├── next-env.d.ts
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│ ├── next.svg
│ └── vercel.svg
├── README.md
├── tailwind.config.ts
└── tsconfig.json Thanks to NextJS we can both develop the frontend and the backend of our application.
You must install the dependencies with one of those commands:
Yarn: yarn
Npm: npm install
To design our blog, first we will need a backend to store our posts.
First, let's write a simple route to understand how NextJS and Vercel work with serverless functions.
NextJS can create an endpoint from a file, for example you can actually reach the endpoint
<your_website>/api/hello>in your project.
Create an api folder in the app folder, in the api folder, create a folder ping and in the ping folder create a route.ts file that will just respond pong when you hit the endpoint.
You can run your project with
yarn devornpm run dev.
Now the objective is simple: use an url parameter to say hello with a dynamic api route
Create a folder hello and a folder named [name] in this folder create a file route.ts.
It must:
- Retrieve the name in the
url parameter - Response with the string
Hello <parameter> !.
💡 Next will automatically reload your application, you don't need to restart your server.
You had some fun with Next backend, it's time to deploy your changes in public with Vercel!
To do it, just push your code, it should reload your application.
Go to your dashboard and click on the Visit button to reach your website.
You can now play with the url to test your backend. Try to share your url with your friend, they can also test your application.
- Creating an API with NextJS
- How to use a dynamic api route.
If you've done everything good, you should reach your endpoint through http://localhost:3000/api/ping. The command below should print Success.
curl -s http://localhost:3000/api/ping | grep "pong" > /dev/null && echo "Success" || echo "Fail"The command below should print Success
curl -s http://localhost:3000/api/hello/John | grep "Hello John \!" > /dev/null && echo "Success" || echo "Fail"It's time to create our backend to manage your post.
Your post must be represented like the following object:
{
"id": "the post id",
"title": "A title",
"content": "My content",
"created_at": "Date of creation"
}Originally, you should store your data in a database but it would be long so we will just store it.
Create a file named resources.ts that export a variable that stores data in an array named posts.
Create a folder posts in api and a route.ts in it that will be our REST endpoint to manage posts.
- On GET: Retrieve all posts stored in the API
- On POST: Create a new post
- The body of your request must have a
titleand acontent, you can generate thecreated_atwithDate.
- The body of your request must have a
- On GET: Retrieve the post identified by its
id - On PUT: Update post data
- On DELETE: Delete the post
You can retrieve the body with
req.body.
💡 You can use Postman to test your API.
💡 You should create some
fake datato easily feed your frontend for the next step
- What is a REST API?
You can now deploy your App on Vercel to update your application.
Now you got your backend, let's create the frontend !
To begin with, we will create the top bar to discover next syntax.
Take a look at a next frontend architecture:
├── app
│ ├── api
│ │ └── # your API
│ ├── favicon.ico
│ ├── globals.css # Global CSS style
│ ├── layout.tsx
│ └── page.tsx
├── next.config.js
├── next-env.d.ts
├── package.json
├── package-lock.json
├── postcss.config.js
├── public # Public assets
│ ├── next.svg
│ └── vercel.svg
├── README.md
├── src
│ ├── resources.ts
│ └── utils.ts
├── tailwind.config.ts
└── tsconfig.json
In your src folder create a components folder that will store all your components and now, to create the top bar we need 2 things: a component named TopBar wrote in a topBar.tsx file and a stylesheet named TopBar.module.css.
Here we go, first:
- Create a file named
topBar.tsxthat will export a component that displays a topBar.
You can
returnsimple html, it's not different from vanilla html for the moment.
-
Create a stylesheet named
TopBar.cssthat will apply some style to our component (e.g: position, size, colors, font-size...). -
Now you must display it to your website, go to
page.tsxand remove all the code in thereturn, replace it with your component, you can use it like a html tag (e.g:<TopBar/>).
You can now see your topBar 🥳, push your work and share your website url to your friends, so they can be impressed by your skills 🚀.
It's time to retrieve your posts and share them with the rest of the world.
To do it, you know the recipe, just create a new component named Posts and a stylesheet named Posts.module.css.
You will also need to fetch your data from your API. This documentation can help you to do it.
💡 To fetch your properties, you should use axios
💡 Thanks to the NextJS integration, you don't need to care about CORS.
Now you can publish your beautiful blog online and share it with your friends !
Now that you got the list of your posts, you should add a new button that will trigger a form to add a post.
You could also provide a little red cross that will delete the post when you click on it. It's up to you to customize your blog.
You are now an expert of Deployment as a Service. Why don't you try other websites like Netlify.
Deploy a new website in this platform, it's really easy.
Here are the steps to deploy on Netlify:
- Create a git repository
- Sign-in on Netlify
- Go to
New site from Git - Choose your repository
- Push
Deploy - It's done, your website is now online 🚀
- Deploy with GitHub Pages
- What is JamStack
- Next GraphQL
- How to configure Next
- Next Crud
- Typescript with Next
 Tom Chauveau |
 Adrien Fort |
|---|
🚀 Don't hesitate to follow us on our different networks, and put a star 🌟 on
PoC'srepositories.