I'm starting with es6 and capacitorjs.
I need to build a google auth for an app.
I followed this instructions here https://github.com/CodetrixStudio/CapacitorGoogleAuth.
Tried too many different things, looks like there is an issue about not serving the node_modules folder in my webserver, but I really can't figure out what is wrong.
I'm attaching an image which represents my directory structure:
The index.js file is declared in index.html file like this:
<html>
<head>
<meta name="google-signin-client_id" content="{your client id here}">
</head>
<body>
<h1>my title</h1>
</body>
<script src="capacitor.js"></script>
<script src="index.js" type="module"></script>
<script >
//this is working properly, but capacitor.js is declared here
console.log('element is loaded...')
Capacitor.Plugins.Storage.set({key:'test', value:'val'});
Capacitor.Plugins.Storage.get({ key: 'test' }).then(function(result) {
document.querySelector('h1').innerText = 'chave:' + result.value;
});
</script>
</html>
the index.js file goes below:
import "../#codetrix-studio/capacitor-google-auth";
import { Plugins } from '../#capacitor/core';
Plugins.GoogleAuth.signIn();
My console output:
My package.json file:
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"#capacitor/android": "^2.4.6",
"#capacitor/cli": "^2.4.6",
"#capacitor/core": "^2.4.6",
"#codetrix-studio/capacitor-google-auth": "^2.1.3",
"serve": "^11.3.2"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "yarn serve www"
},
"author": "",
"license": "ISC"
}
Found it.
Just needed to add a code transpiler.
In my case, i added parceljs.
yarn global add parcel-bundler
Later, i made a new folder to keep my source code.
mkdir frontend
Finally, added a new script called watch in my package.json file
"scripts": {
"watch": "parcel watch frontend/*.html --out-dir www"
}
Related
Every time that I add a class, to see the changes I have to stop running nuxt, reload the vs code window and run "npm run dev" again. Then I can see the changes
My tailwind.config.js :
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}'
],
theme: {
extend: {}
},
plugins: [require('daisyui')]
}
I place the tailwind.css file inside assets/css/tailwind.css
And import it inside my layout component: layouts/default.vue
My nuxt.config.ts:
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/assets/css/tailwind.css'],
build: {
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
}
}
})
My package.json:
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"nuxt": "3.0.0-rc.11",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"daisyui": "^2.31.0",
"firebase": "^9.10.0"
}
}
I think Nuxt.js is a framework that makes server-side rendering like NextJs for React.
In that way, all of the data and HTMLis rendered by the Nuxt server, which sends a generated "html/css" package to the client with only the css class that you used in your code.
So I would say it's normal to rebuild everytime you want to see your change for the css class you just add.
If you want to see directly the changes without rebuilding each time (like in the browser dev tool in order to write your css class easily), I would advise you to link in the HTML root file (index.html), the complete tailwind css sheet.
You can find a version on the tailwind doc page like this one : https://tailwindcss.com/_next/static/css/b606771d290f9908.css
Then you can remove the link at the end of your dev work.
I added vite to my project to run TailwindCSS. And now I am done and I wanted to build the project. But it only builds my index.html, not all my other pages (just using vanilla html and js). I know the line "npx tailwindcss init -p" to add the tailwind.config.js. Is there a command like this for Vite so i can say to build ./*.html?
{
"name": "tirisi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "npm run build && vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.8",
"tailwindcss": "^3.0.23",
"vite": "^2.8.6"
},
"dependencies": {
"#tailwindcss/line-clamp": "^0.3.1",
"daisyui": "^2.11.1"
}
}
From https://vitejs.dev/config/
The most basic config file looks like this:
// vite.config.js
export default {
// config options
}
Just create that file and paste that in. There's no vite equiv to npm init or tailwind init
I have a python project (using flask) where I am trying to use Vue with. The problem is that nothing vue related renders if I go peek the html definition.
I've installed vue via npm, also installed webpack and laravel-mix. They seem to be well configured.
I have the instance
import Vue from 'vue';
import alert from './components/Alert.vue';
new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
test: 'is it working?'
},
components: {
alert
}
});
The component
<template>
<div class="alert" v-text="message"></div>
</template>
<script>
export default {
name: 'alert',
data() {
return {
message: 'I am an alert.'
};
}
};
</script>
<style>
.alert {
background: red;
}
</style>
And I am just trying to render the message
<div class="mdl-card__title mdl-color--primary mdl-color-text--white relative">
<h2 class="mdl-card__title-text">Login</h2>
</div>
<div id="app">
[[ test ]]
</div>
but when I try peeking in the html I see nothing.
Component not showing bellow the Login h2 tag
Package.json
{
"name": "I've hidden it",
"version": "1.0.0",
"description": "<h1>I've hidden it</h1>",
"main": "webpack.mix.js",
"directories": {
"test": "tests"
},
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"repository": {
"type": "git",
"url": "i've hidden it"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"laravel-mix": "6.0.6",
"postcss": "8.1",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
},
"dependencies": {
"vue": "^2.6.14"
}
}
On running npm mix, laravel-mix will compile the file you've provided to mix.js function and save it to the second parameter of the function, which is public/js directory in your project. The .vue() tells laravel-mix that it is a vue app entry point.
Once its compiled, you need to import the compiled scripts into your html.
<script src="public/js/main.js"/>
Now your Vue app should work fine.
Current webpack bundling project folder structure (win10):
root_folder\
|--node_modules
|--src
|--index.js
|--template.html
|--package.json
|--webpack.config.js
Contents of index.js:
console.log("Hello webpack");
Contents of template.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Contents of package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"dependencies": {},
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Contents of webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, './src/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack Boilerplate',
template: path.resolve(__dirname, './src/template.html'), // template file
filename: 'index.html', // output file
}),
]
};
How to make this folder completely portable, i.e. when running npx webpack or npm run build this always can run well, no matter if working with C:\root_folder\ or with C:\very\longpath\root_folder.
Have successfully ran npx webpack for this example in C:\root_folder\ and then i copied ** root_folder ** like it is into D:\testing\root_folder\ and when running npx webpack from D:\testing\root_folder\ it worked, which obviously shows it is portable.
Summary: It is helpful to store root folders of webpack bundling projects if they belong to other projects in their own project subfolder, so it is useful to be able to have root_folder sometimes in nested folders.
Question: Is there available a way to resolve all root_folder/ scripts with local paths in windows with simple npm scripts or even npx command, so it will not return error for long paths?
Current Answer: Well found which works is copying the nested root_folder to a temporary C:\temp\root_folder and from there do all the npm webpack processing and also module bundling.
So answer which worked here was to mount the project directory and from there run the build.
All of what is necessary is to have the following npm scripts (in package.json):
"scripts": {
"test": "ECHO \"Error: no test specified\" && EXIT 1",
"build": "(IF EXIST \"%CD%/dist\" RMDIR dist /S /Q) && webpack",
"nestingcompliance:build": "SUBST Z: \"%CD%\" && PUSHD Z: && npm run build && POPD && SUBST Z: /D"
}
And then run in cmd line:
npm run nestingcompliance:build
Do you need help making a 404 page? You can use this with express and with my answer on the bottom.
(if you have a working package.json and you are using express, you can simply just skip this step.)
Add this first to package.json:
{
"name": " text ",
"version": "0.0.1",
"description": " text ",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"dependencies": {
"express": "^4.16.4"
},
"engines": {
"node": "8.x"
},
"license": "MIT",
"keywords": [
"node",
"glitch",
"express"
]
}
then look at the answer below
Use this:
app.get('*', function(req, res){
res.sendFile(__dirname + '/views/404.html');
});
Also make sure to make a 404.html page in the views/ folder on glitch. Or, if you want remove the /views/404.html and replace it with /404.html.
View the demo. Make any random text on the end of the url.