import express from 'express';
I'll trying to import express to my Vue + Vite App but i got an error below, can i import express without using require?
First of, require is gone in modern days where you can use import everywhere.
Then, Express will not help you a lot in a Vue app because both are not meant to work together: SPA app + backend. The can work separately tho, with the Vue app consuming the Express one as an API.
Finally, showing us the result will not help us finding out the issue. Some configuration needs to be shown.
PS: what you're trying to achieve could be useful too, so that you don't spend time doing something that may not be the best way.
Related
Developing a Windows Desktop application that uses Chromium Embedded Framework for the UI frontend, but I assume this would apply equally to Electron and similar platforms as well.
The application will have multiple pages, each implemented as its own component. In a traditional SPA this would typically be implemented using Vue Router, but I assume the main benefits of Vue Router are the ability to route to the appropriate resource based on URI, parse URI query parameters, and enable the forward and back buttons with history.
Since none of these really apply to my Desktop application, I am thinking that Vue Router will bring little to the table and just add more boilerplate noise to the codebase. If I'm missing something and there is a significant benefit in Vue Router for my use case, please let me know.
Side note: I do plan on using Vuex to allow the different page components to work on the same set of state data without a lot of tedious prop/event binding.
I would still opt for vue-router, since it provides a standardized way for in-app routing in Vue apps. It is not some sort of exotic dependency you are introducing.
If your app is growing and you need things like nested routes and dynamic routing, passing props to a route, having navigation guards like ‘beforeEach’, you can just use it, without creating your own solution or rework the app to use the router. Also, another vue developer immediately understands the app routing and so do you, if you have to change something in the app after a year not working on it. And it is all well documented.
And you are developing a desktop app, which makes a few kB more or less in the bundle not a concern, I would think.
Automatic active link CSS classes
HTML history with back/forward navigation support
Nested components
etc.
Could I just import and enable some mocker in main.js of Vue.js project?
May it be after:
import Vue from 'vue'
import App from './App'
?
How it can get started, anyway?
Thank you, in advance. Share your opinions.
There are a number of great libraries already written that will intercept your API requests and return fake data.
The most complete libraries (in my opinion) that accomplish this goal are:
Mirage.js - you tell it which API returns what response, and external requests for data are routed to Mirage. I love this because this is very similar to the solution I built before Mirage was available, so it's a natural fit for me.
JSON Server - This runs as a server and returns your JSON files in response to API calls. This is cool because it simulates actual network traffic, even though it just loops back to localhost.
Faker.js looks like as the most complete library for generating fake data, so you may want to use it in conjunction with one of the above solutions, or if you replace your API calls with data requests to Faker, you can get around needing those other solutions.
There are a number of great articles on this technology. I loved reading Valentino Gagliardi's 4 ways to fake an API in frontend development and LogRocket's How to test code that depends on external APIs in Node.js.
I'm a bit of a noob to the 'backend' part of Nuxt. But I'm trying to learn. I've set up a bot that's linked with Twitch. Their server sends a post to my own environment whenever someone follows or subscribes to a channel. I catch and handle this post with Express and would like to show that event on my Nuxt frontend. Unfortunately, I've yet to figure out how to get that data from the express server middleware to Nuxt whenever it comes in from Twitch. I've tried to find examples on the web, but haven't come across anything that seems to do this... Or I'm just too much of a noob to identify them as solutions.
I figured I'd use something like a WebSocket (Socket.io) to do this, however when instantiating the Express post handler I don't have access to Nuxt. And if I try it after I hand Nuxt to Express with (app.use(nuxt.render)) the post no longer gets passed through.
I also tried to add a store or adding a property to the Nuxt object itself, but again, I'd need Nuxt and the latter wouldn't give me the automatic pushing of data I'm looking for (hence the WebSocket idea).
Currently, the project is set up with a server/index.js where express is handed Nuxt to run the bot. I also have a WebSocket being initialised there. For now, I also handle the post-call there since I thought I'd at least be 'close' to the elements I need (Nuxt / Express) but I just don't see the way forward.
Any tips in the right direction would be much appreciated. If I need to add code to this post I can, at this point though I'm not sure what would help give this question a good answer.
Thanks in advance.
I've been learning both Angular2 and VueJS just to see which I prefer, I can safely say I prefer VueJS just with its ease of use, its great documentation, its speed etc
I'm trying to do some API calls using Axios in Vue. These were going perfectly when using the JSON placeholder data from:
https://jsonplaceholder.typicode.com
I'm now trying to do more 'real world' example, the call I'm trying to do requires headers to be sent with the request.
I tried to add these, but of course how I've currently been calling them is from the Client Side part of the app (CORS blocks this).
With Angular2 I ran my app alongside Express, from Express I ran the calls which then passed the data to the view.
How would I best achieve the same result with Vue?
Edit: I've done some research and found NUXT.JS which seems to be SSR? However, I'm unsure how Nuxt helps me in this situation.
Thanks
I am aiming to build a project using the Express.Js engine and ember.js for the MVC structure.
I would like to know if anyone has any tips, or links to resources that can help me with setting up the file structure and how to integrate routing with the MVC.
We are using ember/express/node backed by riak, and in our solution the ember.js app will be talking to the express REST server. We're using this: https://github.com/nathanaschbacher/chinood
Basically the ember app downloads once and runs entirely in the client's browser, making api requests for data (from your express app) whenever needed. You can read about how ember data works here:
https://github.com/emberjs/data
Depending on what data store you are using, you'll most likely need to have some representation of your models in both the express app and the ember app. Ember presents the models in a relational way, so the models that are built in the express app may be a bit different depending on the way you're actually storing the data.
Also, we're using iridium to keep our files separate and the project organized. Here's a link:
https://github.com/radiumsoftware/iridium/
You can also have a look at Charles Jolley's convoy, which really nice integrates with Node (Better than Iridium, allowing you to easily share code [models, ...] between server & client sides).
(Sorry for the delay, but I think I finally come back with a good news :-)