Frederico Maia

Posted on May 10, 2023 • Updated on May 11, 2023

Meteor.js with Vite, Solid, and Tailwind CSS

#meteor #solidjs #vite #tailwindcss

In the world of web development, choosing the right tools can make a significant difference in the efficiency and quality of your projects. In this blog post, we will learn how to create a new project using four powerful tools: Meteor.js, Vite, Solid, and Tailwind CSS. This combination can elevate our development experience.

Meteor.js is a full-stack platform that simplifies the development of web applications by providing a unified approach to building both the front-end and back-end. With real-time data updates, Meteor.js speeds up the development process and ensures you can create powerful applications.

Vite is a next-generation build tool that significantly enhances development. Integrating Vite with Meteor.js and Solid can further boost development efficiency and application performance.

Solid is a unique JavaScript library designed for creating user interfaces more efficiently. Rather than using a Virtual DOM like many other frameworks, Solid compiles its templates to real DOM nodes and updates them with precise reactions.

Tailwind CSS is a utility-first CSS framework that enables developers to quickly design responsive, modern websites and applications without writing repetitive CSS code. By providing a set of predefined utility classes, Tailwind CSS streamlines the styling process, allowing you to focus on the overall layout and design.

When combined, Meteor.js, Vite, Solid, and Tailwind CSS create a powerful synergy that can dramatically enhance your web development experience.

Before diving into the tutorial, you should know that it's possible to quickly generate a Meteor.js + Vite + Solid app using the following command:

meteor create meteor-solid-app --solid

However, in this tutorial, we'll guide you through each step to provide a deeper understanding of the process.

Create your Meteor.js project

Start by creating a new Meteor project using the --minimal flag. If you don't have Meteor.js installed yet, follow our instructions here. This option generates a project with the minimum required Meteor packages. Upon creation, a subdirectory with the same name is also created. Please navigate to the project folder and run it to ensure the proper setup.

meteor create meteor-solid-app --minimal
cd meteor-solid-app
meteor npm start

You should see a simple app as below:

To use the most recent dependencies, review your package.json file and update your dependencies accordingly:

...
"dependencies": {
  "@babel/runtime": "^7.21.5",
  "meteor-node-stubs": "^1.2.5"
},
...

Run meteor npm i to install the newly added dependencies above.

Install Vite and Solid

Execute the commands below to install Vite and Solid:

meteor add vite:bundler
meteor npm i -D vite vite-plugin-solid
meteor npm i solid-js

Create a Vite configuration file (vite.config.js) in your project root and import the Solid plugin. Since we are not using a standard Vite index.html file, specify an entry point to a new file that will be created inside the ui folder called main.jsx:

import { defineConfig } from 'vite'
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [
    solidPlugin(),
  ],
  meteor: {
    clientEntry: 'ui/main.jsx',
  },
})

Write your code from this entry point, and let Vite handle it! ⚡️

Create the entry point

Create the ui folder and the file ui/main.jsx with the following content:

import { render } from 'solid-js/web';
import { Meteor } from "meteor/meteor";
import { App } from "./App";

Meteor.startup(() => {
  render(() => <App/>, document.getElementById('root'));
});

We will create the App component later. Now, replace the contents of client/main.html with:

<head>
    <title>Meteor.js with Vite, Solid, and Tailwind CSS</title>
</head>
<body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
</body>

Delete the content from client/main.js and add a comment as follows:

    // The main entry point for the app can be found in ui/main.jsx.

Install and Configure Tailwind CSS

Install tailwindcss and its peer dependencies via npm, then run the init command to generate both tailwind.config.js and postcss.config.js.

meteor npm i -D tailwindcss postcss autoprefixer
meteor npx tailwindcss init -p

In your tailwind.config.js file, add the paths to all of your template files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./ui/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Include the Tailwind directives in your client/main.css file:

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

Create Your First Solid Component

Create the file ui/App.jsx with the following content:

export const App = () => (
  <div className="p-4">
    <h1 className="text-3xl font-bold text-indigo-800">
      Meteor + Solid + Tailwind
    </h1>
  </div>
);

From the app folder, run the meteor npm start command to launch your app. You should see a simple heading with an indigo color.

Using Signals

Signals are the foundation of reactivity in Solid. They contain values that change over time; when you update a signal's value, anything that uses it is automatically updated.

To create a signal, import createSignal from solid-js and call it from your App component. Additionally, create an increment function that will be called when a user clicks a button.

import { createSignal } from "solid-js";

export const App = () => {
  const [counter, setCounter] = createSignal(0);
  const increment = () => {
    setCounter(counter() + 1);
  };
 ...
}

Enhance your component to display the counter on the screen and include a button to increment the counter. Your complete App component should resemble the following:

import { createSignal } from "solid-js";

export const App = () => {
  const [counter, setCounter] = createSignal(0);

  const increment = () => {
    setCounter(counter() + 1);
  };

  return (
   <div className="p-4">
    <header>
      <h1 className="text-3xl font-bold text-indigo-800">
        Meteor + Solid + Tailwind
      </h1>
    </header>
    <section>
      <p className="py-4 font-semibold">You've pressed the button {counter()} times.</p>
      <button
        onClick={increment}
        type="button"
        className="rounded bg-indigo-800 px-2 py-1 text-sm text-white"
      >
        Click Me
      </button>
    </section>
   </div>
  );
}

Great! From the app folder, run meteor npm start to launch your app.

Deploy Your App and Share with Friends

Create a Meteor Cloud account by using this URL, log in from your terminal, and execute the command below to deploy it for free:

meteor login
meteor deploy meteorsolidapp.meteorapp.com --free --mongo

You could also create a Git repository with your project and deploy it from there. Learn how to do it by reading our guide.

By using a meteorapp.com domain, there's no need to register one just for testing your app. The --free --mongo flags deploy an app using our free plan, including MongoDB.

Keep in mind that the subdomain meteorsolidapp.meteorapp.com is already in use, so you'll need to choose a different one for your app. Now, please share it with your dev friends!

Enjoy exploring the complete source code for this tutorial on this GitHub repository. If the code has changed since the time of this post, you can always refer to this specific release for the original version.

Conclusion

In this blog post, we walk you through creating a Meteor project with Solid, Vite, and Tailwind CSS. We cover setting up the appropriate configuration and making your first Solid app.

Let us know if you would like to see part 2 of this blog post, showing how to connect subscriptions and methods from Meteor to Solid. Remember that you can already see an example app by generating it from the command line using the --solid flag.

Feel free to share your feedback or ask questions in the comments below. Happy coding!