diff --git a/posts/fullstack-hono.md b/posts/fullstack-hono.md index 7b2319b..9b2fcf7 100644 --- a/posts/fullstack-hono.md +++ b/posts/fullstack-hono.md @@ -155,6 +155,50 @@ app.get( If the environment variable `DEPLOY_MODE` is set and the value is `DEVELOPMENT` then we can easily grab all the Posts, including Drafts, so I can see how my content will be rendered out to the page. +That's really it, there isn't much else to talk about in regards to how to develop this blog. Things will change when they are needed. + ## Deployment -We can simply depoy the application within a Docker container into Dokku. +A while back I had set up [Dokku](https://dokku.com/) on one of my VPS's. I was really impressed with how quick I could deploy some basic code and have it all set up behind NGiNX and handle the Let's Encrypt SSL for me. If you are reading this blog right now, I have set this up for the Bun application. + +### Setting Up The Container + +To get an application up and runnning on Dokku, the easiest way is to set up a container with the `Dockerfile`. This was pretty easy to set up but did trip me up in two ways when I was writing the `Dockerfile` - the first being that as I followed the [Official Bun Documentation on Docker]() and completely forgot my own advice from above - my `index.ts` for the entrypoint of the Blog application is now `index.tsx`. + +The other thing about the Docker set up that tripped me up was making sure that I had the `tsconfig.json` file included as well. This configuration is what allows us to actually write and render JSX within our application. + +```json +{ + "compilerOptions": { + "strict": true, + "jsx": "react-jsx", + "jsxImportSource": "hono/jsx", + "paths": { + "@blog/*": [ "./src/*" ] + } + } +} +``` +_The `tsconfig.json` that allows us to render JSX_. + +Another important point to make - that is not important to the deploymen to Dokku _at all_ is that we can set up custom import paths to keep TypeScript projects nice and neat. As you can see in the JSON above, I have opted for using `@blog/`, and you may have noticed in the code examples above that's how I'm organizing all my imports for the code I write. + +Okay - sorry for the tangent, let me get back to the deployment of Dokku. If you read the documentation for Dokku, you will notice that all you need to do on your code side (besides creating the `Dockerfile` for running your application) is a Git remote entry for your service. I am not going to go over setting up Dokku directly - the Documentation does a really good job on how to set this up. + +The first thing we need to do - after setting up Dokku - is to create the Blog application. + +```shell +$ dokku apps:create davesmithhayes.com +``` + +After that, I would need to set the new remote in my Git repository: + +```shell +$ git remote add dokku dokku@davesmithhayes.com:davesmithhayes.com +``` + +And simply do a: + +```shell +git push -u dokku main +``` diff --git a/src/index.tsx b/src/index.tsx index 2e47499..c3a0627 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -38,7 +38,7 @@ app.use('/static/*', serveStatic({ app.route('/', home); app.route('/posts', posts); -console.log("Starting the blog application"); +console.log("Starting the blog"); export default { port: process.env.APP_PORT || 3000, fetch: app.fetch