... | @@ -6,30 +6,33 @@ Our team uses [Visual Studio Code](https://code.visualstudio.com) (VSCode) as ou |
... | @@ -6,30 +6,33 @@ Our team uses [Visual Studio Code](https://code.visualstudio.com) (VSCode) as ou |
|
|
|
|
|
## Setup of the basic application
|
|
## Setup of the basic application
|
|
|
|
|
|
To set up the root application, we use Next.js.
|
|
To set up the root application, we use Next.js. At first, we have to install Node.js (version 10.13 or later). After that, we use the console and direct to a new folder for our project (we could also open the folder in VSCode and use the terminal) and run the command:
|
|
At first, we have to install Node.js (version 10.13 or later). After that, we use the console and direct to a new folder for our project (we could also open the folder in VSCode and use the terminal) and run the command:
|
|
|
|
```js
|
|
```js
|
|
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
|
|
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
|
|
```
|
|
```
|
|
|
|
|
|
Now, an example app from Next.js is being created in this directory:
|
|
Now, an example app from Next.js is being created in this directory:
|
|
|
|
|
|

|
|

|
|
|
|
|
|
To run the application, we have to change into the directory called **nextjs-blog**:
|
|
To run the application, we have to change into the directory called **nextjs-blog**:
|
|
|
|
|
|
```sh
|
|
```sh
|
|
cd nextjs-blog
|
|
cd nextjs-blog
|
|
```
|
|
```
|
|
|
|
|
|
Then we run the command:
|
|
Then we run the command:
|
|
|
|
|
|
```js
|
|
```js
|
|
npm run dev
|
|
npm run dev
|
|
```
|
|
```
|
|
which starts the Next.js app's development server on port 3000.<br>
|
|
|
|
|
|
which starts the Next.js app's development server on port 3000.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
To check if the app is working properly, we can just open http://localhost:3000 from our browser, which should look like this:
|
|
To check if the app is working properly, we can just open [http://localhost:3000](http://localhost:3000) from our browser, which should look like this: 
|
|

|
|
|
|
|
|
|
|
## Database
|
|
## Database
|
|
|
|
|
... | @@ -60,3 +63,23 @@ To simplify object access in MongoDB for our project, we utilize [Mongoose](http |
... | @@ -60,3 +63,23 @@ To simplify object access in MongoDB for our project, we utilize [Mongoose](http |
|
This will install the Mongoose package and add it as a dependency to your project. You can check the **package.json** file.
|
|
This will install the Mongoose package and add it as a dependency to your project. You can check the **package.json** file.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
|
|
## Hardhat
|
|
|
|
|
|
|
|
To develop and deploy our smart contract we are using Hardhat, a popular development environment that offers tools for testing, compiling and deployment of Ethereum smart contracts. It also offers a built in test network, the hardhat network that allows us to ..... without having to worry about gas fees before deploying the smart contract to a real Ethereum network.
|
|
|
|
|
|
|
|
To add hardhat to your project, ensure that you're in the **nextjs-blog** directory and run the following command:
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
You can verify that the dependency has been added correctly by checking the **package.json** file.
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
Then run the command:
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
and choose the option to create an empty **hardhat.config.js** file to configure your Hardhat development environment. Here you can define various settings such as the version of the solidity compiler that Hardhat uses to compile your smart contracts and put in the test networks that are going to be used for contract deployment.
|
|
|
|
|
|
|
|
(insert picture of hardhat.config.js here) |
|
|
|
\ No newline at end of file |