Creating a Modern Web App from Scratch with SolidJS — Host a PWA on Deno

Welcome to the world of web development! If you’re looking to create a modern web app from scratch, you’ve come to the right place. In this article, we’ll be introducing you to two powerful tools: Deno and SolidJS. With their help, you’ll be able to streamline your development process and create a stunning web app in no time. So buckle up, because it’s time to revolutionize your web development journey with SolidJS!

Dinosaur playing with a Sol(eno)id

Before we dive into using SolidJS, let’s briefly discuss Vite. Vite is a local development server that provides hot reloading for your HTML, TypeScript, and CSS. You can find a boilerplate called “Vitesse” that utilizes Vue.js. However, we will be using SolidJS because it offers built-in fine-grained reactivity. Fortunately, there is also a boilerplate available for SolidJS called “bat”.

Pre-requesites:
1. pnpm (https://pnpm.io/)
2. git (https://github.com/git-guides/install-git)
3. github account (https://github.com/signup)
4. deno account (https://deno.land/signin)

Now, in your terminal…

pnpx degit olgam4/bat my-bat-mobile

Congratulations, you’ve just created your first web app! Now, let’s deploy it to Deno using the included CI and GitHub Actions.

First, navigate to your app directory with cd my-bat-mobile and init the git repo using git init . Then, create a new empty repository on github and follow the instructions for a new remote.

Add your remote

Second, go to https://deno.com/deploy and create a new empty project. This will generate a unique project ID for you, which you should make note of. For example, your ID might be “fat-hedgehog-16”.

Next, click on your profile and create a new access token in the “Access Tokens” section. Make note of this token as well. Then, go back to your GitHub repository and navigate to the “Settings” tab. Under “Secrets”, create two new repository secrets:

• DENOLAND: your-previously-created-access-token
• PROJECT: your-randomly-generated-project-id

Now, the next time you deploy your app, it should be available at your-project-id.deno.land (e.g. fat-hedgehog-16.deno.land). Just remember to replace "your-project-id" with the actual ID that was generated for you.

But how do you deploy your app? Well you simply have to push on the main branch from github.

Open the file located under my-bat-mobile/src/routes/index.tsx and modify the file by changing between the tags <Title>bat</Title> to <Title>my-bat-mobile</Title> and then in your command prompt:

git add -A
git commit -m "My first commit"
git push

At last, navigate to your deno hosted app atyour-project-id.deno.land (e.g. fat-hedgehog-16.deno.land) and voilà!

Welcome to your first hosted web app!