Meteor.js with Vite, Solid, and Tailwind CSS
Tags: meteor, solidjs, vite, tailwindcss
Published: 2023-05-10 14:55:04

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 with Vite, Solid, and Tailwind CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxnc73l1sd5yoyorui49.png)

[Meteor.js](https://meteor.com/) 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](https://vitejs.dev/) 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](https://www.solidjs.com/) 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](https://tailwindcss.com/) 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:


```shell
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](https://meteor.com/) project using the `--minimal` flag. If you don't have Meteor.js installed yet, follow our [instructions here](https://docs.meteor.com/install.html). 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.


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


You should see a simple app as below:

![Minimal Meteor app screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7jast2eug2wtq144ts7.png)

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

```javascript
...
"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:

```shell
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`:

```javascript
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:

```jsx
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:

```jsx
<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:

```jsx
    // 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`.

```shell
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:

```javascript
/** @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:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Create Your First Solid Component

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

```jsx
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.

![Screenshot of the app with the title "Meteor + Solid + Tailwind"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9czpzg48122yxjyjm2n0.png)

## 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.

```jsx
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:

```jsx
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.

![Animated Gif clicking on the button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjw1ul7ydhr2h9ag84tc.gif)

## Deploy Your App and Share with Friends

Create a Meteor Cloud account by using [this URL](https://cloud.meteor.com/?isSignUp=true), log in from your terminal, and execute the command below to deploy it for free:

```shell
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](https://cloud-guide.meteor.com/deploy-to-galaxy.html).

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](https://webflow.meteor.com/cloud#pricing-section), including MongoDB.

Keep in mind that the subdomain [meteorsolidapp.meteorapp.com](https://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](https://github.com/fredmaiaarantes/meteor-solid-app). If the code has changed since the time of this post, you can always refer to [this specific release](https://github.com/fredmaiaarantes/meteor-solid-app/tree/milestone-1.0) 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!