blog
This commit is contained in:
Stefan Pejcic
parent
707c465505
commit
e179d849f7
|
|
@ -4,7 +4,7 @@ description: Public beta is released!
|
||||||
slug: openpanel-public-beta-released
|
slug: openpanel-public-beta-released
|
||||||
authors: stefanpejcic
|
authors: stefanpejcic
|
||||||
tags: [OpenPanel, news, tutorial]
|
tags: [OpenPanel, news, tutorial]
|
||||||
image: https://refine.ams3.cdn.digitaloceanspaces.com/website/static/img/placeholder.png
|
image: https://openpanel.co/img/panel/v1/dashboard/dashboard.png
|
||||||
hide_table_of_contents: false
|
hide_table_of_contents: false
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -17,51 +17,10 @@ Link to blog..
|
||||||
|
|
||||||
<!--truncate-->
|
<!--truncate-->
|
||||||
|
|
||||||
All the steps described are in this [repo](https://github.com/refinedev/refine/tree/master/examples/blog-job-posting).
|
text here..
|
||||||
|
|
||||||
## Intro
|
## Intro
|
||||||
|
|
||||||
[NestJS](https://github.com/nestjs/nest) is a framework for building efficient, scalable Node.js server-side applications. With [nestjsx/crud](https://github.com/nestjsx/crud) we can add CRUD functions quickly and effortlessly on this framework.
|
|
||||||
|
|
||||||
## NestJS Rest Api
|
<img src="https://openpanel.co/img/panel/v1/dashboard/dashboard.png" alt="openpanel_job" />
|
||||||
|
|
||||||
To start playing with NestJS you should have node (>= 10.13.0, except for v13) and [npm](https://nodejs.org) installed.
|
|
||||||
|
|
||||||
**Create Project Folder**
|
|
||||||
|
|
||||||
```bash
|
|
||||||
mkdir job-posting-app
|
|
||||||
cd job-posting-app
|
|
||||||
```
|
|
||||||
|
|
||||||
Setting up a new project is quite simple with the [Nest CLI](https://docs.nestjs.com/cli/overview). With npm installed, you can create a new Nest project with the following commands in your OS terminal:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm i -g @nestjs/cli
|
|
||||||
nest new api
|
|
||||||
```
|
|
||||||
|
|
||||||
[TypeORM](https://github.com/typeorm/typeorm) is definitely the most mature ORM available in the node.js world. Since it's written in TypeScript, it works pretty well with the Nest framework. I chose mysql as database. TypeORM supports many databases (MySQL, MariaDB, Postgres etc.)
|
|
||||||
|
|
||||||
To start with this library we have to install all required dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install --save @nestjs/typeorm @nestjs/config typeorm mysql2
|
|
||||||
```
|
|
||||||
|
|
||||||
- Create an [.env.example](https://github.com/refinedev/refine-hackathon/tree/main/job-posting-app/blob/master/api/.env.example) file. Here we will save the database information.
|
|
||||||
- Create and configured a [docker-compose](https://github.com/refinedev/refine-hackathon/tree/main/job-posting-app/blob/master/api/docker-compose.yml) file for MySQL.
|
|
||||||
- Create a [ormconfig.ts](https://github.com/refinedev/refine-hackathon/tree/main/job-posting-app/blob/master/api/ormconfig.ts) file for migrations.
|
|
||||||
- Add the following scripts to the `package.json` file for migrations.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
"typeorm": "ts-node -r tsconfig-paths/register ./node_modules/typeorm/cli.js",
|
|
||||||
"db:migration:generate": "npm run typeorm -- migration:generate",
|
|
||||||
"db:migration:run": "npm run typeorm -- migration:run",
|
|
||||||
"db:migration:revert": "npm run typeorm -- migration:revert",
|
|
||||||
"db:refresh": "npm run typeorm schema:drop && npm run db:migration:run"
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2021-10-4-admin-panel-with-nestjs/refine_job.png" alt="refine_job" />
|
|
||||||
<br />
|
<br />
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,11 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const BannerExamples: FC<Props> = ({
|
export const BannerExamples: FC<Props> = ({
|
||||||
title = "Open-source Retool alternative for enterprise",
|
title = "Next Generation Hosting Panel",
|
||||||
description = "Build React-based internal tools, dashboards & B2B apps with unmatched flexibility",
|
description = "Effortlessly install new PHP versions, modify server configurations, view domain logs, restart services, and more.",
|
||||||
button = {
|
button = {
|
||||||
text: "Discover Refine",
|
text: "Discover OpenPanel",
|
||||||
href: "https://s.refine.dev/blog-retool?ref=banner-retool-alternative",
|
href: "https://openpanel.co/features?ref=banner-openpanel-alternative",
|
||||||
onClick: undefined,
|
onClick: undefined,
|
||||||
},
|
},
|
||||||
}) => {
|
}) => {
|
||||||
|
|
|
||||||
|
|
@ -29,16 +29,16 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const BannerModal: FC<Props> = ({
|
export const BannerModal: FC<Props> = ({
|
||||||
title = "refine's app scaffolder offers +720 customizable CRUD app codebase combinations.",
|
title = "OpenPanel offers a distinct advantage over other hosting panels by providing each user with an isolated environment and tools to fully manage it.",
|
||||||
variant = "purple",
|
variant = "purple",
|
||||||
image = {
|
image = {
|
||||||
src: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/banners/playground.gif",
|
src: "https://openpanel.co/img/admin/openadmin_dashboard.png",
|
||||||
alt: "refine App screenshot",
|
alt: "OpenPanel dashboard screenshot",
|
||||||
href: "https://s.refine.dev/banner-modal?ref=banner-modal",
|
href: "https://openpanel.co/demo?ref=banner-modal",
|
||||||
},
|
},
|
||||||
button = {
|
button = {
|
||||||
text: "Try online",
|
text: "Try online",
|
||||||
href: "https://s.refine.dev/banner-modal?ref=banner-modal",
|
href: "https://openpanel.co/demo?ref=banner-modal",
|
||||||
onClick: undefined,
|
onClick: undefined,
|
||||||
},
|
},
|
||||||
}) => {
|
}) => {
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,11 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
|
||||||
const data = [
|
const data = [
|
||||||
{
|
{
|
||||||
description:
|
description:
|
||||||
"Refine is a React Framework used by over monthly 15K developers for building enterprise internal tools, dashboards, and B2B apps",
|
"Deliver a VPS-like experience to your users at a fraction of the cost, with all-inclusive features such as resource limiting, and enhanced security seamlessly integrated for worry-free hosting.",
|
||||||
image: {
|
image: {
|
||||||
src: "https://refine.ams3.cdn.digitaloceanspaces.com/website/static/banners/banner-tweet.jpg",
|
src: "https://openpanel.co/img/admin/openadmin_dashboard.png",
|
||||||
alt: "X tweet about Refine",
|
alt: "OpenPanel Enterprise edition",
|
||||||
href: "https://s.refine.dev/blog-twitter?ref=banner-twitter",
|
href: "https://openpanel.co/beta/?ref=banner-admin-panel",
|
||||||
},
|
},
|
||||||
button: {
|
button: {
|
||||||
text: "Learn more",
|
text: "Learn more",
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,11 @@ import { LandingRainbowButton } from "@site/src/refine-theme/landing-rainbow-but
|
||||||
import clsx from "clsx";
|
import clsx from "clsx";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
const text = "Struggling with internal tools?";
|
const text = "Struggling with hosting panels?";
|
||||||
const description =
|
const description =
|
||||||
"Explore refine’s limitless possibilities in crafting CRUD apps, CRM solutions, HR dashboards, and more!";
|
"Boost your hosting service: Try OpenPanel Community edition and elevate your clients experience to new heights!";
|
||||||
const image =
|
const image =
|
||||||
"https://refine.ams3.cdn.digitaloceanspaces.com/website/static/banners/app-crm.png";
|
"https://openpanel.co/img/panel/v1/dashboard/dashboard.png";
|
||||||
|
|
||||||
export const BannerSidebar = ({ shouldShowBanner }) => {
|
export const BannerSidebar = ({ shouldShowBanner }) => {
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
|
|
@ -40,7 +40,7 @@ export const BannerSidebar = ({ shouldShowBanner }) => {
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
to={"https://s.refine.dev/blog-sidebar?ref=banner-sidebar"}
|
to={"https://openpanel.co/demo?ref=banner-sidebar"}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className={clsx(
|
className={clsx(
|
||||||
|
|
|
||||||
|
|
@ -6,61 +6,13 @@ export const RefineLogoSeal = (props: SVGProps<SVGSVGElement>) => (
|
||||||
width={34}
|
width={34}
|
||||||
height={34}
|
height={34}
|
||||||
fill="none"
|
fill="none"
|
||||||
|
viewBox="0 0 213.000000 215.000000"
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<g opacity={0.5}>
|
<g transform="translate(0.000000,215.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
|
||||||
<path
|
<path
|
||||||
fill="url(#a)"
|
d="M990 2071 c-39 -13 -141 -66 -248 -129 -53 -32 -176 -103 -272 -158 -206 -117 -276 -177 -306 -264 -17 -50 -19 -88 -19 -460 0 -476 0 -474 94 -568 55 -56 124 -98 604 -369 169 -95 256 -104 384 -37 104 54 532 303 608 353 76 50 126 113 147 184 8 30 12 160 12 447 0 395 -1 406 -22 461 -34 85 -98 138 -317 264 -104 59 -237 136 -295 170 -153 90 -194 107 -275 111 -38 2 -81 0 -95 -5z m205 -561 c66 -38 166 -95 223 -127 l102 -58 0 -262 c0 -262 0 -263 -22 -276 -13 -8 -52 -31 -88 -51 -36 -21 -126 -72 -200 -115 l-135 -78 -3 261 -3 261 -166 95 c-91 52 -190 109 -219 125 -30 17 -52 34 -51 39 3 9 424 256 437 255 3 0 59 -31 125 -69z"
|
||||||
fillRule="evenodd"
|
></path>
|
||||||
d="M20.834 10a3.5 3.5 0 1 0-7 0v14a3.5 3.5 0 1 0 7 0V10Zm-3.5 2.666a2.667 2.667 0 1 0 0-5.333 2.667 2.667 0 0 0 0 5.333Z"
|
</g>
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
fill="url(#b)"
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M33 17c0 8.837-7.163 16-16 16S1 25.837 1 17 8.163 1 17 1s16 7.163 16 16ZM17.334 5a5 5 0 0 0-5 5v14a5 5 0 0 0 10 0V10a5 5 0 0 0-5-5Z"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
stroke="url(#c)"
|
|
||||||
strokeOpacity={0.15}
|
|
||||||
d="M21.334 10a4 4 0 0 0-8 0v14a4 4 0 1 0 8 0V10ZM19.5 10a2.167 2.167 0 1 1-4.333 0 2.167 2.167 0 0 1 4.333 0ZM17 33.5c9.113 0 16.5-7.387 16.5-16.5S26.113.5 17 .5.5 7.887.5 17 7.887 33.5 17 33.5ZM12.834 10a4.5 4.5 0 1 1 9 0v14a4.5 4.5 0 1 1-9 0V10Z"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<linearGradient
|
|
||||||
id="a"
|
|
||||||
x1={17}
|
|
||||||
x2={17}
|
|
||||||
y1={1}
|
|
||||||
y2={33}
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stopColor="#14141F" />
|
|
||||||
<stop offset={1} stopColor="#14141F" stopOpacity={0.5} />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="b"
|
|
||||||
x1={17}
|
|
||||||
x2={17}
|
|
||||||
y1={1}
|
|
||||||
y2={33}
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stopColor="#14141F" />
|
|
||||||
<stop offset={1} stopColor="#14141F" stopOpacity={0.5} />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
id="c"
|
|
||||||
x1={17}
|
|
||||||
x2={17}
|
|
||||||
y1={1}
|
|
||||||
y2={33}
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop stopColor="#fff" stopOpacity={0} />
|
|
||||||
<stop offset={1} stopColor="#fff" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -59,11 +59,11 @@ export default function BlogPostItems({
|
||||||
"text-gray-500 dark:text-gray-400",
|
"text-gray-500 dark:text-gray-400",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<b>Refine technical blog</b> - a resource for
|
<b>OpenPanel technical blog</b> - a resource for
|
||||||
Refine, front-end ecosystem, and web development.
|
OpenPanel, admin and end-users.
|
||||||
Here, we publish insightful articles that demystify
|
Here, we publish insightful articles that demystify
|
||||||
complex concepts, explore new trends, and provide
|
complex concepts, explore new trends, and provide
|
||||||
helpful tips to enhance your coding journey.
|
helpful tips to improve your hosting business.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<TagsList tags={tags} />
|
<TagsList tags={tags} />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue