Step-by-step tutorial for people that are new to frontend development?

[coding-red-panda]

Hello,

I was wondering if someone can help me out getting this set up?
I'm not familiar with frontend development at all, and trying to understand how to configure Vite and VueJS for a private project to expand my knowledge about these frameworks.

I've followed the guide for the gem and added the relevant entries to my Gemfile:

gem 'vite_rails'

So per the instructions of the gem, I've ran the following 2 commands:

bundle install
bundle exec vite install

And this seems to have created the required configuration files, added the comment entries for the CSP, and prepared the package.json to include all required dependencies.
When I fire up my Rails dev server locally, as well as the bin/vite dev command I can see both running just fine, so no errors are being generated.

Opening the development tools in the browser, I can also see the Vite Ruby being mentioned.
So at this point, I assume that the setup is done correctly.

In my entrypoint/application.ts I added the following line: console.log('test')
However this never seems to be outputted at all when reloading my page through the Rails server.
So what am I missing to make this work and finalize the setup?

[coding-red-panda]

So after asking a friend, I found the problem....

When using entrypoint/application.ts you need to load the file with vite_typescript_tag.
When using the vite_javascript_tag and NOT having the required JS file, it injects the dummy template.

Perhaps the gem should throw an error here instead when the relevant entrypoint is missing?

[ElMassimo]

NOT having the required JS file, it injects the dummy template.

The installation process will always create a sample application.js entrypoint.

If the entrypoint did not exist, the gem would indeed throw an error 😃

[ElMassimo]

Hi Arne!

This is documented in the tag added during installation, as well as in the example entrypoint, and is also covered in the docs.

---

I don't mean to discourage you from asking questions though 😅

Getting started with frontend development—as well as learning new tools—can be a bumpy road.

The docs might not be the best source when you are getting started—it's too condensed and it's easy to miss important information by skipping a paragraph or two.

A tutorial for beginners would be a nice complement, but I haven't found the motivation to write one. Perhaps folks that find this thread can like this comment 👍, as a way to gauge if there's enough interest in a step by step tutorial.

[coding-red-panda]

Well it's still not working for me at all.
With the change to using vite_typescript_tag I can get the console statement to work, but my Vue.js is not being loaded.

[coding-red-panda]

Well a few hours later, I managed to get "Greetings" finally displayed on the page using a Single File Component.
None of this was obvious to get working

[ElMassimo]

@coding-bunny If you still need some help with Vue, I highly recommend the Vue Land Discord server 😃