Index.html & app.css is outside of the /tailwindcss/...
Vite Server is running but not working on localhost.
How to fix this problem
I don't want to put index.html in directory tailwindcss.
You could try specifying the entry point used by Rollup explicitly:
// vite.config.ts
export default {
build: {
rollupOptions: {
input: {
// entry point for compilation; normally would be "./index.html"
app: '../index.html',
but honestly it feels like you're fighting against the tools, and you should have that package.json one directory up in your project.
Vite looks for a root index.html by default. You can change this behaviour in package.json.
To do this, simply modify the following to suit...
"scripts": {
"dev": "vite serve ./src"
},
In this example, I've put my entry index.html file inside a src folder. I tell Vite about this via serve, following that with the relevant directory (file path is relative to project root).
Read more here.
Related
I am trying to move my application's API to Vercel. It is written in Typescript and uses Express.
The index.ts is located in <root>/src. The npm run build compiles it into <root>/dist directory. The file contains the following:
const app = express();
app.use((req: Request, res: Response, next: NextFunction) => {
//blah, blah, there is a lot going on here
})
app.use('/', common);
//... other app.use(s)
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on ${port}, http://localhost:${port}`));
module.exports = app;
I've got the following in the vercel.json file which is located in the root directory where the package.json also is:
{
"version": 2,
"installCommand": "npm install",
"buildCommand": "npm run build",
"outputDirectory": "dist",
"builds": [
{
"src": "dist/index.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "dist/index.js"
}
]
}
When locally I run npm run build, then vercel dev --listen 5000 I get Ready! Available at http://localhost:5000 and can go to http://localhost:5000/ping and get a response.
Now I commit the files to git, the deployment runs, but judging by the logs the npm install and npm run build commands are not running. No functions are created my /ping endpoint returns "Page not found".
Here is the deployment log:
This is what Build & Development Settings look like (the Root Directory is left blank):
I followed several recommendations I found online and according to them everything should work. I probably miss some setting somewhere. What is it?
If more information is needed, please let me know, I'll update my question.
Thank you.
--- UPDATE ---
I have set the Root Directory to src and checked the "Include source files outside of the Root Directory in the Build Step" checkbox. Now the npm install and npm run build are executing. As you can see some static files are deployed, but there are still no serverless functions and my /ping route returns 404 and "home" page, i.e. / route returns the content of the index.js file. In addition the local is not working either anymore, also returning 404 now.
Without that checkbox I was getting
Warning: The vercel.json file should exist inside the provided root directory
and still no install or build running.
Also worth noting that I had to change my tsconfig.json to have "outDir": "src/dist" instead of "outDir": "dist", otherwise I was getting
Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.
Removed the Root directory and back to square one, no npm commands running but local is working with / route returning Cannot GET / and /ping returning correct response.
For everyone out there who's looking for an answer, maybe this will help you.
In my case, what I needed is to create a folder, called api in my src folder, i.e. the folder that is specified as Root Directory in Build & Development Settings in Vercel. Within this directory, each serverless function needs a file named the same as the path of the route. For example, the file named "my-route.js" will be accessible via https://my-app-name.vercel.com/api/my-route.
All this file needs is an import of index.js file and module.exports. For example:
import app from '../index';
module.exports = app;
The index.js should also live the Root and contain your express setup.
If you want to have dynamic path parameters, the files' names in the api directory should be wrapped in square brakets, like [my-param.js]. You can also have sub-directories in the api foler.
Here are a few links that helped me figure this out:
https://dev.to/andrewbaisden/how-to-deploy-a-node-express-app-to-vercel-2aa
https://medium.com/geekculture/deploy-express-project-with-multiple-routes-to-vercel-as-multiple-serverless-functions-567c6ea9eb36
https://ryanccn.dev/posts/vercel-framework/#path-segments
No changes were needed in my existing Express setup and routes files.
Hope this will help someone. Took me quite a while to figure it all out :)
Well, the problem is simple to explain and although I have investigated I have not found a solution
When I start the project in src/ with either nodemon src/ --ignore src/public/*(with the npm start script) or node src/ commands only two .js files are executed in src/ and these are web3.js and index.js, nodemon and node completely ignore the existence of database.js
I thought that the error might be in the code in database.js so I created the file test.js which makes a simple console.log to check if it was executed but not
The files are structured as follows:
src/
- database.js
- index.js
- test.js
- web3.js
package.json
config.toml
I tried to run the database.js file independently with node and got this error, which is weird because in web3.js and index.js I also get the toml file the same way.
> node src/database.js
node:internal/fs/utils:345
throw err;
^
Error: ENOENT: no such file or directory, open './config.toml'
The code that gives this error, although irrelevant, here it is
const { readFileSync } = require("fs");
const { mongoUriOp } = toml.parse(readFileSync("./config.toml", 'utf-8'));
I tried (thanks to a comment) changing the config path to "../config.toml" and the file ran with node database, but it still won't run with npm start or node src/.
EDIT:
From the comments, it looks like you figured it out by importing (require) all your files in index.js. I have a feeling that your package.json file has a field main, and it is set to src/index.js.
It's difficult to understand what you are having trouble with.
I'm assuming you want to watch for changes in all of your JavaScript files inside the src folder.
You could try to add the watch flag to your command
inside package.json.
"scripts": {
"start": "nodemon --watch src --ignore src/public/*"
}
Link to doc for reference
I setup a mono repo using Ionic and Vue 3 the only issue is that in my child apps I still need to add the following into package.json. How can I use the root devDepenencies?
"devDependencies": {
"#vue/cli-plugin-typescript": "~5.0.0-rc.1"
},
Here is my structure:
apps
- app1
- package.json <-- here i have to add devDependency
- tsconfig.json
- app2
- package.json <-- here i have to add devDependency
- tsconfig.json
package.json <-- devDependency is in here too
tsconfig-base.json
Everything works this way but it creates a node_modules folder with a ton of dependencies in each child app. I'd like to avoid that if possible.
If I remove the devDependency I get the following error:
Module not found: Error: Can't resolve './src/main.js'
So its not seeing the dependency and thinking I'm using js but in fact i'm using typescript.
I tried setting the baseUrl in the tsconfigs but nothing has worked yet. Any help would be greatly appreciated.
Instead of configuring vue to find it you could set up a path link:
"devDependencies": {
"#vue/cli-plugin-typescript": "link:../node_modules/#vue/cli-plugin-typescript"
}
This would likely be your solution if you're using a monorepo. Add the following to your app1 and app2 package.json:
{
"vuePlugins": {
"resolveFrom": "insert path to parent package.json here"
}
}
See documentation here: https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-an-existing-project
I have two questions.
Question #1
I'm writing npm package on ES6 and have following package.json:
{
"name": "mypackage",
"bin": {
"mybin": "dist/bin/mybin.js"
},
"dependencies": [...],
"devDependencies": [...],
"directories": {
"lib": "dist"
},
"main": "dist/index.js",
"scripts": {
"compile": "./node_modules/.bin/babel ./src --optional runtime --presets es2015,stage-0 -d ./dist",
"prepublish": "npm run compile"
}
}
Everything is compiled successfully every time.
However, I can include:
var mypackage = require('mypackage');
But I'm not able to include subfolder with the same starting path:
var constants = require('mypackage/core/constants');
Of course constants.js has following full path mypackage/dist/core/constants.js
But I would like to include it without dist part..
For now to include constants I should write like this:
var constants = require('mypackage/dist/core/constants');
Which doesn't make a lot of sense.
I don't like approach when I should use NODE_PATH to solve this issue.
I need solution without making users extra-efforts to include dist folder contents.
At least users should not rely to compilation/publishing folders structure, they should not even know anything about this.
Question #2
How can I compile all the .es6 files to dist and then copy all the other files except compiled from src to dist?
For example, I have different templates, assets, etc.
I would like structure of dist to be exactly the same including all the files as in src but .es6 compiled to .js.
I know obvious solution to copy entire src to dist and then compile everything from dist to dist, but it doesn't look like a smart way for me.
On the other hand, I wouldn't like to specify every single asset/image/template to copy to dist folder.
May be there's gulp plugin to make exact copy from folder to folder but excluding all the files with given extension (or regexp)?
Update #1
#molda
I have also structure inside:
-- src/modules
---- module1
-------- static
---- module2
-------- static
So keeping all the static files in src/static isn't solution
I am trying to create a self-executing bundle of an application, but jspm can't find what it's looking for.
I have the following folder structure
The src directory contains all of the JavaScript, but it is hosted by node as if it were the root. jspm_packages is hosted as if it were inside the root, making normal module import without a path possible (ie import React from 'react')
The app runs just fine, but when I try to build it fails because it doesn't know to look in the src directory and the jspm_packages directory for modules. Is there a way to fix this without changing the folder structure or the root-hosting?
I am ok with moving the system.config.js file into src if that makes this possible)
EDIT
This is easy if you move jspm_packages into src.
in package.json
"jspm": {
"directories": {
"baseURL": "src"
},
"configFile": "src/system.config.js"
}
This will put both system.config.js and jspm_packages in src (don't use a baseUrl in system.config.js), and bundling will work. The major drawback here is the src folder no longer contains only the project code; it now also contains library code. Performing folder searches becomes harder, and I just prefer the idea of a folder with all of my code in it.
EDIT2
After thinking about this problem more, I guess what I am really after is a method to specify an alternate path configuration during bundling. Based on my reading of the docs, this appears to be unsupported.
You can set your baseUrl to be the root (i.e. "/") and then set the path for your source code on the paths property like this:
System.config({
baseURL: "/",
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
}
})
Full working example can be seen here.
Furthermore, if you need to change you paths just for bundling you could use the jspm-cli in a gulp task and override your builder configuration like this:
var jspm = require('jspm');
gulp.task('task', function () {
var builder = new jspm.Builder();
builder.loadConfigSync('pathToYourConfigFile');
builder.config({
paths: {
'*': 'pathToYourCode'
}
});
builder.bundle('yourOptionsHere');
}