I get the console message You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.
I'm not using a webpack or any other bundler, it's just a static page just pulling from a CDN:
<script src="https://unpkg.com/vue#v3.1.1"></script>
just for context, we're instantiating Vue3 like this:
var vueApp = Vue.createApp({
data() {return {display: 'Hello World'}},
}).mount('#vapp');
Is there a minimized production version of Vue3 I can pull instead of vue#v3.1.1?
Instead of using
https://unpkg.com/vue#v3.1.1 which resolves to https://unpkg.com/vue#3.1.1/dist/vue.global.js
you can use https://unpkg.com/vue#3.1.1/dist/vue.global.prod.js
👇
<script src="https://unpkg.com/vue#3.1.1/dist/vue.global.prod.js"></script>
You can also use :
<script src="https://unpkg.com/vue#next"></script>
Use https://unpkg.com/vue/dist/vue.global.prod.js instead, it will redirect to latest version vue.global.prod.js.
// Example:
// https://unpkg.com/vue/dist/vue.global.prod.js
//
// If the latest version is 3.2.37,
// It will redirect to
// `https://unpkg.com/vue#3.2.37/dist/vue.global.prod.js`
<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
NOTE:
It works with the same rule for axios CDN url.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Related
I'm building Next.js app, my main page is 'hybrid' amp page
export const config = { amp: 'hybrid' };
export default function Home({ data }) {...}
export async function getStaticProps() {
return {
props: { data: {...} },
revalidate: 6000,
};
}
I'm deploying to serverless using npx serverless
When deployed the /index.html home page has in its <head> the reference to the amp version of the page, which is /index.amp
<link rel="amphtml" href="/index.amp">
When I got to the amp page /index.amp I got 404 page
Any one know what's the problem please
"next": "11.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
Instead of directly accessing /index.amp, add ?amp=1 to the end of the URL you want to load the AMP version of the page.
Ref- https://nextjs.org/docs/api-reference/next/amp
Edit:
Ref- I am not aware of any AMP logic as of now, so it should be unsupported.
After lots of debugging, I found that AMP is not supported for the hybrid approach in serverless-next, although it working fine AMP-only configuration export const config = { amp: true }. That's the reason why it's working on localhost but not on deploy.
You can achieve this behaviour using nextjs server-side redirects.
It's not officially supported as of version #19.0.0.
My serverless.yml file
myApp:
component: '#sls-next/serverless-component#1.19.0'
Edit 2:
Finally it's working when I don't specify version.
My changed serverless.yml file
myApp:
component: '#sls-next/serverless-component'
My working deployed serverless amp version url is here
Note- If you do not specify the version, it will use the latest tag, which refers to the latest stable version here (i.e not alpha versions).
I have been trying to get my node.JS file to serve my HTML app with static CSS and JS files included too but have ran into great difficulties (the HTML file is loading, but with no styling). From my searching it seems the main recommended method is to add the Express middleware to your node.JS and then add this line:
app.use(express.static(path.join(__dirname, 'static/')));
Before I go on too much further I will show you my directory set-up:
-static
-images
-favicon
-favicon.png
-logo.png
-style
-design.css
-theme.css
-w3.css
-source
-client
-style.js
-node_modules
-...
-index.html
-root.js
-package-lock.json
-...
The 'root.js' file is my node.JS file that I am running and it serves the 'index.html' page, but all the CSS and JS files my HTML page links to come up with this sort of error...
The stylesheet http://localhost:8080/static/style/design.css was not loaded because its MIME type, "text/html", is not "text/css".
Here is one example of a line in my 'index.html' where I try to link to that CSS file...
<link rel="stylesheet" type="text/css" href="static/style/design.css">
...and here is where 'index.html' is served in my 'root.js' file...
http.createServer(function (req, res) {
fs.readFile('index.html', function (err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(data);
return res.end();
});
}).listen(8080);
I am not too sure where I am going wrong as most guides on the topic seem to imply that when I add in the magic '__dirname' line to my node.JS that everything is meant to resolve itself. When I just run my HTML page locally by opening it in Chrome or Firefox it works fine. I am hoping you might be able to explain to me where I am going wrong, thank you.
I am working with Laravel Event Broadcasting and i am using pusher driver for broadcasting event and its working perfectly.
The public channel is subscribed successfully from client side using pusher provided js library
var pusher = new Pusher('xxxxxxxxxxxxxxxxxxxxx_my_app_key', {
encrypted: true
});
var channel = pusher.subscribe('TestPusher');
channel.bind('App\\Events\\TestPusher', function(data) {
alert(data.msg);
});
But when i use Echo in my client side code
Echo.channel('TestPusher')
.listen('TestPusher', (e) => {
console.log(e.msg, e.chatMessage);
});
It generates the error " Echo is not defined ".
I already installed the Laravel Echo library using npm install --save laravel-echo pusher-js in my application and also included the following code in resources/assets/js/bootstrap.js file as per the laravel provide documentation.
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'xxxxxxxxxxxxxxxxxxxxx_my_app_key'
});
So please help me how can i fix this problem.
My issue was that I was not compiling bootstrap.js together with the rest of the code because I had removed the line require('./bootstrap') from app.js. I added that line back and I was home and dry.
As described here
I had this problem a few days ago. My gulp installation was all messed up and Laravel versioning didn't help.
Sorry if this doesn't help, it's just my experience and most detailed as possible:
First, I'll consider you do have the js/app.js script included on you site.
Now, you're seeing this error because, as Josh mentioned, you're not compiling your js files. After editing 'resources/assets/js/bootstrap.js', this file needs to be compiled by running the asset compiler: gulp (named Laravel Elixir docs/5.3/elixir) in Laravel 5.3).
If you followed carefully this part of the tutorials, you shall be extra careful with laravel's npm dependencies versions, specially those used by Elixir (Once again, my gulp installation wasn't working at all even though no error messages showed up).
So, if this is a new project, you should consider updating to Laravel 5.4. If you can't or not willing to update all Laravel framework, perhaps this can be solved like I did. Staying at 5.3 but using the latest assets compiler on 5.4, named Laravel Mix. Now it runs on npm: npm run dev. (No gulp mentioned on doc.)
To achieve this, you should update to latest package.json on 5.4 and follow the 5.4 documentation to install Laravel Mix.
Your codes looks fine, Problem is your JS order so only you getting undefined issues
like
<script>
Echo.channel('TestPusher')
.listen('TestPusher', (e) => {
console.log(e.msg, e.chatMessage);
});
</script>
<script src="echo.js"></script>
so zigzag the order :)
widow object before each Echo.
window.Echo.channel('TestPusher')
.listen('TestPusher', (e) => {
console.log(e.msg, e.chatMessage);
});
remove defer from your app.js script tag
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
I have an existing ASP.NET MVC web site. www.foo.com
I want to create a whole new sub system of our site using Angular2 and I want it to go under www.foo.com/NewSubSystem.
I have downloaded the Angular2 Cli from https://cli.angular.io/.
When I run from the command line
ng build -dev
The output has all the javascript script tags looking this in the index.html file
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
I need the scr="www.foo.com/NewSubSystem/inline.bundle.js"
NOTE: I have tried to update the baseURL in the tsconfig.json
"compilerOptions": {
"baseUrl": "www.foo.com/NewSubSystem"
}
but this does not seem to make any difference.
Any suggestions or pointers would be nice. Thanks
Set the index file baseref
base href="NewSubSystem/"
Then just code like its the root.
I reset the baseref to dist/ with javascript depending on the env sensed
Change your index.js files update
<base href="/<you base url>/">
if you are working with webpack:
You should also update the file config/webpack.common.js, so that you assets folder content can be hosted from your new baseurl.
...
const METADATA = {
title: 'ng2-admin - Angular 2 Admin Template',
description: 'Free Angular 2 and Bootstrap 4 Admin Template',
baseUrl: '/<you base url>/',
isDevServer: helpers.isWebpackDevServer()
};
.....
I am getting started with Angular2.0. I have been following the 5 Min Quickstart and everything works fine although I am using grunt to compile my Typescript and some Sass etc.
I just have one problem I cant solve by myself. I want to move all the public files (generated Javascript and production node modules into a subdirectory. I need to have that, because I run different applications unter the same domian. The frontend depends on the user type that logged in. (backend is written with phalcon)
This is my public folder (the webserver's root)
So the whole Angular applications should live inside the "talent" directory.
The "index.html" contains the following:
<script type="text/javascript" src="/talent/node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="/talent/node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
baseURL: '/talent',
packages: {'app': {defaultExtension: 'js',}}
});
System.import('app/app');
</script>
SystemJs is able to load my app.js file correctly but then trys to import angular2:
import {bootstrap, Component} from 'angular2/angular2';
Corresponding Javascript:
var angular2_1 = require('angular2/angular2');
This sends a request to http://example.dev/talent/angular2/angular2 resulting in an 404 error.
When I move the node_modules folder and the app folder to the webserver's root and remove baseURL: '/talent' it works just fine.
Here are the requests made for both the working solution (everything at root) and the not working part (everything under /talent)
Working:
Not working:
Can you help me getting this to work?
Had this exact same problem, and just figured it out after several hours. The System config baseURL needs to be set BEFORE angular2.dev.js is loaded. This is because the System.register calls need to be aware of the baseURL at the time of registrations.
e.g.
System.config({ baseURL: '/talent' });
A cleaner way is to just add System.config({ baseURL: '/talent' }) to the very bottom of the system.src.js file.
You can set paths for each library :
System.paths = {
'angular2/*': '/talent/node_modules/angular2/*',
'app/*': '/talent/app/*'
};
Does this work for you?
'angular2/angular2' has been deprecated. Your code should reference 'angular2/core' or the appropriate module for your imports.
You should also not need to specify the path for the angular2 imports in your System.config as System will load them in from the <script> tag you have in the HTML.
You are most likely receiving the 404 error because the angular2.dev.js file is loading 'angular2/core', 'angular2/common', 'angular2/platform/browser', etc... and you are referencing 'angular2/angular2' which is not being registered and therefor SystemJS is attempting to go out and find it.
Change all of your import {...} from 'angular2/angular2' to the correct module import as well. You can find these on the API Preview page of angular.io, or hopefully your IDE will find it for you.
I don't know which version of Angular2 you use but now with beta versions you should use these Angular2 modules:
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
Then you need to configure SystemJS as described below:
<script>
System.config({
map: {
app: 'talent/app'
},
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
With this configuration, when trying to load the app/boot module, SystemJS will load the talent/app/boot.js file that was compiled before from the talent/app/boot.ts file. This behavior applies to all elements under the app module but not to other ones.
Modules like angular2/* will be found from files talent/node_modules/angular2/bundles/[something].js you included using <script> tags.
I made some tests and this configuration works for me ;-)
Thierry
I stumbled upon this question when trying to move from a local (dev) environment to a hosted server (CentOS) where the deployed URLs were all different to my local host. If you're in this situation and the accepted answer doesn't solve your problem (I was already importing the updated imports with Angular2 Beta 15) and using baseURL messes other things up (as it did in my situation) then use:
map: {
app: 'path/to/app/folder'
},
I saw this here and it worked for me (even though it was originally answering a MAMP environment question): Troubles with importing classes from Angular 2 modules with Typescript 1.7
Here's what worked for us:
Make the base ref point to the subdirectory containing the angular project. This will ensure that all the node_module dependencies are found, etc.
Configure the PathLocationStrategy with a different APP_BASE_HREF so that html5 mode still works for the actual angular app.
bootstrap(AppComponent, [..... bind(APP_BASE_HREF).toValue("/yardmap/planning")
ref: https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html
ref: https://angular.io/docs/ts/latest/guide/router.html
base href
Most routing applications should add a element to the index.html as the first child in the tag to tell the router how to compose navigation URLs.
<!DOCTYPE html>
<html>
<head lang="en">
<base href="/talent/">
......
</head>