Getting started... until you're ready to build

[andrecasal]

When you create a new installation and deploy, you still have quite a few steps until you're ready to start building. I suggest adding a checklist of sorts to the getting started documentation to guide fellow devs:

• Define your design system in tailwind.config.ts and tailwind.css
• Replace static assets with your own (fonts, favicon, apple-touch-*, etc)
• Delete routes, utils, and Prisma models you won't be using

After that, you're 100% ready to start building your own thing 🚀

Is there anything else you guys see as needed before one starts to build?

[andrecasal]

P.S.: I'd be happy to open a PR with a thorough checklist.

[kentcdodds]

Thank you!

[kentcdodds]

I think this is a great idea 👍 Let's just start with everything we can think of and eventually we'll think of more things.

We'll definitely also want something about setting up email and sentry (or removing it).

[cr101]

It would be great if the CLI gave the option to install a different UI component library like Mantine

[kentcdodds]

That would go against our guiding principle of "Only one way" to do things. So that probably won't happen.

[andrecasal]

I'm taking a while on this and #146 because I'm creating this checklist as an upgrade path to get the Epic Stack's latest updates on existing projects (and testing it on one of my projects).

As it stands, styling is the biggest source of friction at the moment, but I think #146 could remove most of that friction with CSS Variables.

[kentcdodds]

Thank you!

[andrecasal]

Ok, I think it would be useful to discuss and clean this up a little bit before creating a PR. Here's the process I've registered:

1. Preparation
   1. Delete fly instances (⚠️ only for myself)
   2. Save/prepare assets from previous app (⚠️ only if you're coming from a previous app)
      1. .env
         1. EMAIL_SERVICE_DOMAIN
         2. EMAIL_SERVICE_SENDING_KEY
         3. EMAIL_SERVICE_ENDPOINT
      2. .prettierrc.cjs
      3. tailwind.css
      4. tailwind.config.ts
      5. Everything in the /public folder (except the /build folder)
      6. Components
2. Install with npx create-remix@latest --typescript --install --template epicweb-dev/epic-stack
3. Copy assets from previous app carefully to not overwrite anything important
   1. Copy your assets into the /public folder
   2. Copy your environment variables to .env, add the variable name to env.server.ts and a fake name-value to .env.example
   3. .prettierrc.cjs (⚠️ only if you want a different config)
   4. tailwind.css (⚠️ This can be removed with Styling-with-css-variables #146)
   5. tailwind.config.ts (⚠️ This can be removed with Styling-with-css-variables #146)
4. Prepare styling
   1. Search and replace all instances of -night- with -muted- (⚠️ This can be removed with Styling-with-css-variables #146)
   2. Search and replace all instances of -day- with -muted- (⚠️ This can be removed with Styling-with-css-variables #146)
   3. Search and replace all instances of -accent-red with -danger (⚠️ This can be removed with Styling-with-css-variables #146)
   4. Search and replace all instances of focus:border-accent-purple with focus:border-ring (⚠️ This can be removed with Styling-with-css-variables #146)
   5. Search and replace all instances of hover:border-accent-purple with hover:border-ring (⚠️ This can be removed with Styling-with-css-variables #146)
   6. Search and replace all instances of bg-accent-purple with bg-primary (⚠️ This can be removed with Styling-with-css-variables #146)
   7. Search and replace all instances of bg-accent-purple with bg-primary (⚠️ This can be removed with Styling-with-css-variables #146)
   8. Search and replace all instances of active:border-accent-purple-lighter with active:border-primary (⚠️ This can be removed with Styling-with-css-variables #146)
   9. Search and replace all instances of -accent-yellow-muted with -secondary (⚠️ This can be removed with Styling-with-css-variables #146)
   10. Search and replace all instances of -accent-yellow with -primary (⚠️ This can be removed with Styling-with-css-variables #146)
   11. Search and replace all instances of -accent-red with -danger (⚠️ This can be removed with Styling-with-css-variables #146)
   12. Remove all instances of dark:. (⚠️ This can be removed with Styling-with-css-variables #146)
5. Prepare fonts (⚠️ Unless you want to use Nunito Sans)
   1. Remove /public/fonts/nunito-sans and add your own custom font to /public/fonts
   2. Replace the contents of font.css with your font's @font-face rules
6. Search for epic and replace it where appropriate
   1. Meta descriptions
   2. Replace hello@epicstack.dev for your own email on /app/utils/email.server.ts and /tests/e2e/onboarding.test.ts
   3. Fix site.webmanifest
      1. Change name and short_name to your own app's name
      2. Add "start_url": "./", to site.webmanifest (⚠️ Fixed with Fix site.webmanifest start_url #188)
      3. Remove the optional theme_color and background_color fields (I'm not sure why this is here?)
   4. Replace https://epicstack.dev/ in vitest-utils.ts with your own domain
7. Delete stuff you won't be using
   1. Routes
   2. Notes feature (unless you're making a note-taking app 😄)
      1. Delete the /app/routes/users+/&username_+ folder
      2. Delete /app/routes/resources+/delete-note.tsx
      3. Delete /app/routes/resources+/note-editor.tsx
      4. Delete the "My notes" button from /app/routes/users+/&username_+/$username.tsx
      5. Delete the "Notes" link from the UserDropDown in /app/root.tsx
      6. Delete the notes key-value from the /prisma/seed.ts file
      7. Delete the CREATE TABLE "Note" and CREATE UNIQUE INDEX commands from Prisma's migration.sql (⚠️ Doesn't have an effect because the migration has already been applied. Can we ignore this?)
      8. Delete the Note model and remove it from the User model in /prisma/schema.prisma
      9. Run npx prisma generate to regenerate a new client without the Note model
8. Deploy
   1. Check that all tests pass locally (⚠️ After fixing a flaky logout, we're still having flaky tests)
   2. Commit code
   3. Rename branch to 'main' (We could add the 'master' branch to deploy.yml or rename the branch on the install script?)
   4. Publish branch and check GitHub Action
9. Start building the app 🎉

[kentcdodds]

This is very good! Sure looks like a lot of steps 😅 That will motivate us to find ways to make fewer steps. I'm definitely looking forward to #146 👍

I think we should have two different paths for "migrating to the Epic Stack" and "starting a new app with the Epic Stack" because there are some things you only really care about if you're migrating an existing app to the epic stack that you wouldn't do if you were starting a new app. Things like updating the prettier config or copying things over to the /public directory.

As for the forms.module.css, that definitely exists for a reason. It's responsible for the styled forms. Now, if we go all in on shadcn which I think we will then maybe we can do away with that, but for now it's definitely necessary unless people want to change those completely.

[andrecasal]

Yeah, me too! Just need to fix a production issue on Fly.io (seems to be quite slow at the moment) and I'll get #146 done.

As for the forms.module.css I searched for an exact class name match in DevTools, and when I didn't find it, assumed it was not being applied. Realized it's there with post- and prefixes 😅

[andrecasal]

Was hoping to get to it today, but the prod issue took me the whole day. Hopefully tomorrow 🤞

[vinstah]

I'm happy that this list exist, are you opposed to a PR to address the points not covered in #146 using the scripts in remix.init, e.g set sitename