i am new to aurelia, and when including it into my project as the api frontend i ran into an issue i need clarification about.
i followed the basic starting guide and made sure the code could load. which it does if i name the main.js as main.ts (and app.js also).
due to the fact, that i did not find any explanation or configuation option in the code nor "the internet" i wonder what i did do wrong
does someone else did have that problem.
it tries to load typescript even though the documentation says app.js there
Minimal Project
download http://aurelia.io/downloads/basic-aurelia-project.zip
copy the code in http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start as js
run any webserver with it. (e.g. python -m SimpleHTTPServer 8000)
The startup package is configured by default to work with TypeScript so to change this you need to replace the script
<script src="scripts/config-typescript.js"></script>
in index.html with
<script src="scripts/config-esnext.js"></script>
to use Javascript / ES next
This is mentioned in the documentation but may be easily missed, and the rest of the startup documentation follows the javascript approach.
Note that this tutorial is a quick startup - a more comprehensive one is http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial and some more alternative seeds (e.g. JSPM / webpack) can be found in this repo: https://github.com/aurelia/skeleton-navigation
Related
I've just created a Nuxt3 in static mode but I don't want to push it to Netlify everytime to preview it.
Here is my nuxt.config.js (nothing changed)
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
})
Also, I don't know why but yarn generate is not working as you can see below, it says
Preview is not supported for this build
Opening the index.html file directly is not helping because I do have a lot of errors + my API calls are not working.
If you want to preview your statically generated content, you will still need a light server to serve the assets + handle the API requests etc.
Even host providers like Netlify/Vercel do run a small server to serve static files.
The fastest solution is probably to use serve, you don't have to install it directly on your system (I didn't achieved to make it work myself).
You can run npx serve .output/public to have something working in no time and get a functional preview.
I have a very particular question, cause I wish to create a webpage that works without a server, and I'm trying to do it using vite, my whole project is using vue + vite.
if I try to use "vite build" command, the page deploy as blank, and the only way I can see the page is if I use "vite preview".
would it be possible, somehow, to load the content of the html page using vite, without needing the "vite preview"? just double clicking on index.html
Using vue-cli, this is possible by setting the publicPath in the vue.config.js file to an empty string, see: https://cli.vuejs.org/config/#publicpath
I've personally only used it with Vue 2, but from what I read online it should also be possible with Vue 3, if you're okay with switching to vue-cli.
Using Vite, I found this question and answer which shows a way by bundling all the scripts, css and images into a single file:
How to open a static website in localhost but generated with Vite and without running a server?
I did try that and it mostly works, but not currently for svg files which I use a lot of in my application. It might work fine for your use-case.
I did also need to add "type": "module", in my package.json to get rid of an error saying
"Error [ERR_REQUIRE_ESM]: require() of ES Module
/path/to/dist/index.js from /path/to/vite.config.inlined.ts not
supported."
If you open your page simply as an index.html, you will be limited regarding some API calls and alike. Nowadays, you will need a light server to be hosting it via a simple vite preview as you saw. This is mainly because the files are being worked with bundlers like Webpack and Vite.
I'm not sure that there is a way of loading the whole thing with just an index.html because files like .vue are not natively supported, you need a specific loader.
One simple solution would be to use Vue as a CDN, but it will limit your DX experience regarding SFC files, but you will be able to use Vue into a regular index.html file.
PS: your performance will also be worse overall (because of the required network requests).
If you want something really lightweight, you could of course also use petite-vue, maybe more suited towards super simple projects with a tiny need of reactivity.
I still recommend using something like Netlify or Vercel, to host your static site for free + having the whole Vue experience thanks to a server running vite preview for you.
I am wanting to build a website that will utilize a WYSIWYG such as ProseMirror. Their documentation is a bit clear that it is not such an easy process to build everything yet, as they have focused on other parts of development first. However, they do provide a project that you can clone and run.
I am not sure how to actually run this example however.
I have created a new folder inside my active MAMP directory, and have done npm install to get all of the items in the package.json. Then I have run npm run build so that the project is now built into the dist folder specified by default in the package.json.
However, how do I actually make it run in the browser? If I go to the browser, it is simply showing my a list of files and documents, rather than the actual application.
I have also tried running npm start but that doesn't have any linked commands in the package.json. I do see that this is using rollup.js. I have not used that before, perhaps that has some commands?
I created this guide for a friend. Hope this helps you and anyone looking for the same answer. It's not perfect but gets you up and running.
ProseMirror is a well-behaved rich semantic content
editor based on contentEditable, with support for
collaborative editing and custom document schemas.
The problem is that the documentation on how to set
it up from nothing to a hello world using the demo
examples is non existent. All documentation assumes
you have it set up and working.
This guide is to help you get to "hello world" stage
• First setup rollup. Follow the instructions for that here.
You should now have the project on your computer
from this and when you open the html file in your browser see the "hello world" style screen.
• cd into learn-rollup project folder and npm install prosemirror module packages:
prosemirror-state.
prosemirror-view.
prosemirror-model
prosemirror-schema-basic
prosemirror-schema-list
prosemirror-example-setup
• In the learn-rollup index.html file add the following html
html code to add to learn-rollup index.html
The link to the css file
The tag in body that has id=editor
learn-rollup folder structure
• Create a copy of src/scripts/main.js and rename it
mainbackup.js.
• Now replace everything in main.js with code from prosemirror.net first example.
• Run \node_module.bin\rollup -c
• Reload .html to see prosemirror working.
There is no 'Hello World' example that shows how to use the prosemirror libraries in themselves - the basic example linked to in the question still needs to be 'used', as shown in the closest thing that exists to a 'Hello World' example: https://prosemirror.net/examples/basic/ - which from the docs looks like it can be represented in a simpler way:
import {schema} from "prosemirror-schema-basic"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
let state = EditorState.create({schema})
let view = new EditorView(document.body, {state})
Instead you can look at wrapper libraries that provide copy/paste editors and that can be incorporated into your project.
Using ProseMirror core libraries requires that you read the docs - there is both an overview section: http://prosemirror.net/docs/guide/#intro, and a reference section: http://prosemirror.net/docs/ref/#top.intro
If you go to the basic example, you will see some code that uses the example project that you linked to.
That project needs to be better documented, IMHO. I don't think that it's supposed to be an example of running prose mirror, but more of an example of wiring all of the different parts up together.
All of the parts of ProseMirror are on NPM and can be installed that way, even the example project. Install the imports from NPM and then copy that code into either an index.js or HTML file and you should have a basic editor on screen. Study the basic example repo to better understand how the parts fit together.
To get a minimal editor up and running with rollup first install rollup:
npm i -g rollup
Install the rollup resolve plugin:
npm i #rollup/plugin-node-resolve
Then add the following to the rollup.config.js file:
import resolve from '#rollup/plugin-node-resolve'
export default {
input: 'main.js',
output: {
file: 'build.js',
format: 'iife'
},
plugins: [resolve()]
}
Install prosemirror basic libraries:
npm i prosemirror-schema-basic prosemirror-state prosemirror-view
Create the main.js file with the following content:
import {schema} from 'prosemirror-schema-basic'
import {EditorState} from 'prosemirror-state'
import {EditorView} from 'prosemirror-view'
let state = EditorState.create({schema})
window.view = new EditorView(document.querySelector('#editor'), {state})
Build your editor (to build.js):
rollup -c
Finally include build.js and optionally the styles in the prosemirror-view package into your HTML file and enjoy:
<html>
<body>
<div id="editor"></div>
<script src="build.js"></script>
</body>
</html>
I went through #Rob 's method and almost succeed. Just one thing, after completed all steps, I ran into an error(see below).
The code is from the official first example.
Don't know why that happened, I have to manually put a <div id="content"></div> after <div id="editor"></div> to get started.
But shouldn't <div id="content"></div> gets added automatically? #Rob or The official first example didn't mention you have to add this div, no clue what went wrong.
I'd like to compile ".vue" components (with contains html/js/css) into JS, but in browser side, without browserify/vuify/webpack or others ...
In a better world, i'd like to include my ".vue" component into my html app, like that, withoud need of compile things, server side:
<script type="vuejs/component" src="myComp.vue"></script>
It should be possible ?! no ?
(And I can't imagine that no one got this idea, or have done it already)
In fact, it's possible with http-vue-loader :
https://github.com/FranckFreiburger/http-vue-loader
It doesn't make sense to compile in the browser when it's so much more efficient to just pre-compile your component locally instead of relying on a visitor's client to do it.
In fact, the answer above regarding vue-http-loader says it's only for use in development and links to this article: https://vuejs.org/2015/10/28/why-no-template-url/
With that said, I created a vue-cli template that lets you pre-compile .vue files into a single .js files you can use in the browser. The single JS file contains the template, script, and styles. It uses webpack, but it's super easy to run and watches your files as you edit them.
$ vue init RonnieSan/vue-browser-sfc my-project
Repo at: https://github.com/RonnieSan/vue-browser-sfc
Instructions are in the README.
I'm using sails(http://sailsjs.com) to develop a little platform. Everything goes smoothly following the documentation. But being new to this javascript frameworks world and npm etc etc, i've been having a trouble including other node_modules and use them in the .ejs views...
I understand not all modules are to be included in the views but how can I manage to include some?
Trying to use https://www.npmjs.com/package/vue-slider-component
Thank you in advance and sorry if this error is just plain out stupid.
Your confusion is understandable. The issue is that, until relatively recently, things installed in node_modules were solely for use in the back end code; that is, your Sails.js controller actions, models, etc. After all, the node_modules folder has the word "Node" right in it, and it was created for use with NPM (the Node Package Manager) to help organize Node (i.e. server-side JavaScript) files!
While many front-end plugins were (and still are) published on Bower, newer frameworks like Angular 2 and Vue often publish their plugins to NPM because it reduces the number of moving parts for your app. The problem is, if you try to require('vue-slider-component') in your server-rendered .ejs view, the server (i.e. Sails.js) will try and load and run that code before it renders the view, where what you really want is for that plugin to run in the browser.
The long-term solution is to use something like Browserify or Webpack to compile all of your front-end JavaScript files into a "bundle". So for example if you have a file like assets/js/my-vue-app.js that includes the line:
import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
then Browserify will see that line, load up that vue2-slider.vue file, add it to the top of the my-vue-app.js file, perform some other magic, combine it with your other front-end .js files and output a file like browserified.js which you would then include via <script src="/path/to/browserified.js"> in your HTML.
Since new Sails apps use Grunt to organize and inject those <script> tags into your views for you, it can be kinda confusing as to how you would get something like Browserify or Webpack to work with Sails. For Sails 1.0, there's a seed project for using Webpack instead of Grunt. For Sails v0.12.x, you'll have to Google around to find some examples of using Broswerify or Webpack with Sails.
A short-term solution, and probably not as maintainable in the long run, is to save the contents of the minified vue-js-slider component into your assets folder (e.g. as assets/js/vue-slider-component.js), add it to your HTML with <script src="/js/vue-slider-component.js"> and access it in your code as window['vue-slider-component'].