Creating a modern wedding website in 2022 Part 2: Setting up the repository and frameworks

Setting up Firebase

Setting up a Firebase project was actually a delightful experience.

First, create the project in the Firebase console. This step just takes a couple clicks.

After creating the project in the Firebase console, you need to hook something up to actually deploy and work with configurations from the command-line.

If you don’t have it already, install firebase-tools and log into the commandline interface:

npm install -g firebase-tools
firebase login

Once installed, we can log into firebase and initialize the database. Run the following command, select your project, and customize as you want. I didn’t change any of the defaults to get started.

firebase init firestore

Next, we are going to want hosting, because it’s free. Again, run the init and walk through the wizard.

firebase init hosting

From there, the initialization script actually walked through a few questions which didn’t seem patronizing for a wizard. Then it noticed that the origin for my git repo pointed to Github, so it asked if I wanted to set up automated Github actions to deploy on merge to main and stage deploys for PRs. Heck yes!

Parcel dev environment & bundling

Let me get one thing straight: using Parcel was the absolute most straightforward and easy dev/build framework that I’ve ever picked up. I don’t know that I needed to do anything more than point it at a root index.html file – and that was really it!

yarn add preact preact-router
yarn add --dev autoprefixer parcel postcss tailwindcss

Next we need some basic setup for Parcel, Preact, and Tailwind. Create the following files following this structure, with copypasta contents to follow:

wedding-app/
├─ src/
│  ├─ index.html
│  ├─ index.css
│  └─ index.jsx
├─ package.json
└─ tailwind.config.js

src/index.html This will be the main entrypoint for Parcel to run its development server and build for production.

src/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kelly & Paul’s wedding</title>
 
    // Parcel will pick up references to CSS files and compile them as necessary // This makes Tailwind setup in the
    next step a breeze
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    // This will be the root element that we use for the Preact application
    <div id="root"></div>
    // Parcel will pick up references to JavaScript files (or Typescript) and compile them
    <script type="module" src="./index.jsx"></script>
  </body>
</html>

./src/index.jsx

src/index.jsx

import { h, render } from 'preact';
import { App } from './App';
 
const root = document.getElementById('root');
render(<App />, root!);

Tailwind CSS

If you prefer a more in-depth setup, checkout Tailwindcss‘s installation guide.

./src/index.css

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

./tailwind.config.js

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{html,ts,tsx}'],
};

./postcssrc.json One little gotcha here: don’t forget to add a Postcss configuration for Parcel to pick up so that it knows it should be using Tailwind!

{
  "plugins": {
    "tailwindcss": {}
  }
}

That’s all!

./package.json We just need a couple quick scripts in our root package configuration in order to run the Parcel dev server and build for production

package.json

{
  "name": "wedding-app",
  "private": true,
  "scripts": {
    "start": "parcel src/index.html",
    "build": "rm -rf dist && NODE_ENV=production parcel build ./src/*.html --public-url /"
  }
}

Honestly, this was kind of everything that I needed to get started. I know this is a little nitty gritty into some weird details, but hopefully helpful for someone (or myself) down the line.

From here, we can run yarn start and see our application running in the browser immediately.