Job Announcement Website: Environment Variable & Database
Tags: javascript, webdev, react, opine
Published: 2022-08-11 08:11:00

{% embed https://dev.to/sokhavuth/table-of-contents-2o4e %}
GitHub: [https://github.com/Sokhavuth/opine-job](https://github.com/Sokhavuth/opine-job)
Deno Deploy: [https://khmerweb-job.deno.dev](https://khmerweb-job.deno.dev/)
<br/>
<p>
Opine web framework is the exact copy of Express framework in Node.js environment. So, if we already have enough experiences in using Express.js, it will not be any problem for us to use Opine web framework, because we will do the same things in Opine as we did in Express.js.
</p>
<p>
When we create a project, Opine CLI builds a minimum requirement for us to start building our application. However, we need to add more files step by step for our application to have necessary functionalities to be a complete job announcement website.
</p>
<p>
In addition, to store data in a database, we need to have an account in a database server. And for the purpose of learning, we can use MongoDB Atlas as the main database to store various data. To have a free database account, we can signup with MongoDB Atlas, by going to its website at <a href="https://deno.land/x/sessions@v1.5.4">https://www.mongodb.com/atlas/database</a>. Moreover, we will also use Redis as a lightweight database to store data relating to application session. We can signup to have a free Redis database account at <a hre="https://redis.com/">https://redis.com/</a>.
</p>
<p>
Finally, to use MongoDB and Redis databases, we need to connect our application to those databases when the application starts up by writing necessary code in a file called “setting.js" for example in the root directory.
</p>
```ts
// app.ts
 
import {
    dirname,
    fromFileUrl,
    join,
    json,
    opine,
    serveStatic,
    urlencoded,
} from "./deps.ts";
 
import indexRouter from "./routes/index.ts";
import usersRouter from "./routes/users.ts";
 
const app = opine();
 
import { setting, mydb, myredis } from "./setting.js";
app.use(async (req, res, next) => {
    req.mydb = await mydb;
    req.myredis = await myredis;
    req.mysetting = await setting;
    next();
});
 
const __dirname = fromFileUrl(dirname(import.meta.url));
 
// Handle different incoming body types
app.use(json());
app.use(urlencoded());
 
// Serve our static assets
app.use(serveStatic(join(__dirname, "public")));
 
// Mount our routers
app.use("/", indexRouter);
app.use("/users", usersRouter);  
 
export default app;
```

```js
// setting.js
 
function setting(){
    const configure = {
        site_title: "Ever Job",
        page_title: "Home",
        message: "",
        dasPostAmount: 10,
        homePostAmount: 12,
    }
 
    return configure
}
 
 
import { config } from "./deps.ts";
await config({export: true});
 
 
import { MongoClient } from "./deps.ts";
const client = await new MongoClient();
await client.connect(Deno.env.get('DATABASE_URI'));
const mydb = client.database(Deno.env.get('DB_NAME'));
 
 
import { connect } from "./deps.ts"
const myredis = await connect({
    hostname: Deno.env.get('REDIS_URI'),
    port: parseInt(Deno.env.get('REDIS_PORT')),
    password: Deno.env.get('REDIS_PASSWORD'),
});
 
 
export { setting, mydb, myredis }
```

```ts
// deps.ts
 
export {
  dirname,
  fromFileUrl,
  join,
} from "https://deno.land/std@0.151.0/path/mod.ts";
export {
  json,
  opine,
  Router,
  serveStatic,
  urlencoded,
} from "https://deno.land/x/opine@2.2.0/mod.ts";
 
export { config } from "https://deno.land/std@0.147.0/dotenv/mod.ts";
export { Bson, MongoClient } from "https://deno.land/x/mongo@v0.30.1/mod.ts";
export { connect } from 'https://deno.land/x/redis@v0.26.0/mod.ts';
```

```
// .env

SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
DATABASE_URI=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
DB_NAME=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
REDIS_URI=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
REDIS_PASSWORD=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
REDIS_PORT=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```