How to Build Vue 3 Vite App for production - javascript

I created a fresh vue project with the new version which includes vite init.
When I run npm run build a dist/ is created. But when I open dist/index.html inside the dist folder it doesn't show anything. My question is how can I build the app and run it without any command (Building for production). Thanks

You need a server, otherwise assets will fail to be found and you'll get errors and a blank page. Use npm run preview.

Related

npx create-next-app will only ceate a package.json file and then fail

I have been trying to create a new nextjs app for a project but I keep getting this error.
I have tried several techniques to create a new nextjs app but the same error continues.
I don't know if it's from my PC configuration or something because; recently, even npx create-react-app started giving the same error on my PC
Here's the error
Creating a new Next.js app in C:\Users\<user>\Desktop\websites\nextjs-starter.
Using yarn.
Installing dependencies:
- react
- react-dom
- next
Usage Error: The nearest package directory (C:\Users\<user>\Desktop\websites\nextjs-starter) doesn't seem to be part of the project declared in C:\Users\<user>.
- If C:\Users\<user> isn't intended to be a project, remove any yarn.lock and/or package.json file there.
- If C:\Users\<user> is intended to be a project, it might be that you forgot to list Desktop/websites/nextjs-starter in its workspace configuration.
- Finally, if C:\Users\<user> is fine and you intend Desktop/websites/nextjs-starter to be treated as a completely separate project (not even a workspace), create an empty yarn.lock file in it.
$ yarn add [--json] [-E,--exact] [-T,--tilde] [-C,--caret] [-D,--dev] [-P,--peer] [-O,--optional] [--prefer-dev] [-i,--interactive] [--cached] [--mode #0] ...
Aborting installation.
yarn add --exact --cwd C:\Users\<user>\Desktop\websites\nextjs-starter react react-dom next has failed.

npm run build cannot access in localhost

I want to test my react/ node.js web app with a production build. I already run npm run build at the app directory and created build folder.
I was unable to run the application using localhost:8080 (server port).
Are there any ways to double check if the application is actually running in that port or access production-ready application?
PS. I used serve to host the application but it posts error 404: The requested path could not be found
Thank you for your help.
Every SPA application has its own package.json file. Inside you have to see the script section:
Normally after you run nm run build you have a compiled version of your code.
At this point, you have a see the dist folder.
After this, you can either run npm run start and you have to see
(this option is not suitable for SSR frameworks like NUXT or NEXT)
or if you don't have that option install an npm package that renders your compiled code by doing the following:
npm install -g serve
serve -s build
and you have to see

Linking local library into Angular 5 Project

What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve

run 'watch' before serve- node ionic2

I am working with ionic 2. And I don't know why when I'm trying to run 'ionic serve', it answer with the next messeges:
WARN: ionic.config.js has been deprecated, you can remove it.
WARN: No 'serve:before' gulp task found!
Your gulpfile contains a 'watch' task already! Add:
gulp.task('serve:before', ['watch']);
to your gulpfile to have Ionic CLI run 'watch' before serve.
WARN: ionic.config.js has been deprecated, you can remove it.
In the gulpfile.js I add that line and it works, but when I change some html file it don't update. I have to stop serve. And run the command again.
PD: I have alredy install all dependencies with npm install
Thanks
Recently Ionic updated their CLI tool (to beta.21). They have obviously made some changes in the gulp file which is being generated by their newly updated CLI. The project you are trying to run was created using an older version of CLI (probably beta.19). That's why you are getting that warning. Regarding the 'ionic.config.js has been deprecated' line, that file is simply a checkpoint to see whether you are using the latest version of Ionic CLI.
There is a quick fix (which I did).
1) Create a new ionic app (possibly using the same template as the one you are trying to run i.e., blank or sidemenu or tabs).
2) Copy the contents of the app directory of the project which you are trying to run to the app directory of the newly generated project.
(I don't know whether this is the right method, but this will work.)
Hope this helps you. Thanks.

Why aren't my assets being moved when building an electron app?

I have begun developing an app using Electron, GitHub's desktop application framework. I am using the Electron Boilerplate.
To run the app I run npm install followed by npm start. This works great with the initial boilerplate.
I now want to integrate jQuery. To do this I add:
<script>
window.$ = window.jQuery = require('./assets/scripts/jquery-1.12.1.min.js');
</script>
Unfortunately this spits out an error in the dev console stating it can't be found. I'm assuming it's all running from the /build directory, where the assets aren't.
So my questions:
Should the assets from my assets folder (/assets/js and /assets/css) be copied upon npm start/npm install?
Is the app running from /build or is there another problem here?
Thanks
Fixed! I had to amend the build.js within /tasks/build/ to include my newly created assets directory.

Categories