I'm new in using NPM. I wanted to load my project website in live server, but whenever I type live-server in the terminal, it only shows LISTING DIRECTORY (which is the list of all the files I have in my project website folder such as html, css, & script) instead of loading my project website. I tried to google it but found no answer. I don't know what to make sure or what to do about it.
If you don't specify a directory index somewhere (the default is a file named index.html) the server doesn't know what file you want to use as an entry point, so it'll just respond with a directory listing.
The docs say, you can add an index file by specifying the --entry-file command line parameter:
serve this file (server root relative) in place of missing files (useful for single page apps)
Just add the entry point to the startup script, by running
$ live-server --entry-point=PATH
Related
I have simple React application and I want to add SSR in Express.js.
I made a bit of a gaff in the beginning and in my repository I just have a frontend folder and in it the whole React app with typescript, babel and webpack configured.
I haven't played with SSR yet, so I'm curious, if I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
Link to my github repo with this react app: https://github.com/poldeeek/spider-game
If I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
You'll probably need to re-install all the dependencies if you choose to setup two separate folders like that. I would recommend putting server.js in frontend/server, which can then use the same node_modules as your frontend/src/index.js is using.
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
There is no right or wrong answer here. If this setup suits your needs, then go with it. The only challenge with this setup is that you have to configure babel and webpack to point to two different files: index.tsx (in case you don't want the server) and indexServer.tsx (in case you want to include the server).
I am trying to push a project I created using the Yeoman's angular generator template to a server.
This is my project -
This is in my app folder -
This is the node-modules folder. For some reason, Yeoman has installed several node-modules. I am not using all of these.
The list goes on. This is just a small snippet of what's in the node-modules folder.
In order to push to the server, I am using grunt build. This generates a dist folder with the following content -
.
However when I navigate to my views, (e.g. reset-password), I get an error that this file is not available.
I am guessing this is because the dist folder doesn't have the views folder that the app folder does.
My final requirement is I want to push this project to the server, so that it is accessible to anyone. I don't want to push all the node-modules because I am not using them.
UPDATE -
This is the content in dist/scripts/ -
In the script.2a4ac124.js file, all my views are referenced but when I try to navigate to - file:///Users/proj/Documents/sso/dist/reset-password I get a file not found error, but when I navigate to file:///Users/proj/Documents/sso/dist/index.html#/ I see the index page.
installing node modules is normal - it installs development dependencies, which will be used in the grunt tasks that Yeoman creates. The reason there are so many is because the dev dependencies have their own dependencies that need to be resolved.
reset-password navigation error is most likely some build error, though it is difficult to tell just from the description. Yeoman converts the view files into angularJS templateCache and puts them into the concat/uglified js file (usually the app-.js file). First see if they are there. If they aren't, the view files aren't getting build. If they are there, it could be that the templates are incorrectly cached, or it could also be something else totally.
To deploy your application, simply copy the contents of dist folder to wherever you are deploying. You don't need the node_modules, since they are only used for performing dev. tasks.
Also,
Your screenshots show a SignUpCtrl.js file at the app root. Yeoman scaffoldings, whichever one you are using, usually aren't designed to have script files at the app root. Try putting it back inside the scripts file first.
So I made a Typescript project with Visual Studio. It works fine when I launch it with Visual Studio, but if I try to push it to my GitHub Pages site, it will put the index.html in a subfolder and I get a 404 error when I try to load my website. Even if I try to reference the index.html in the website url it doesn't really work.
I was wondering if it's possible to only publish the needed items. I think I would only need the subfolder. Correct me if I am wrong though.
Note: I have the GitHub extension for Visual Studio installed.
UPDATE:
Since some of the links don't seem to work anymore I think I should give some extra information. So basically you need to have a branch named gh-pages. On that branch you need to have an index.html file in your root folder. Then the index.html file should be visible on the github page URL.
You need to push a branch named gh-pages in order to view it as a website.
Create a new branch and then move the file into the root folder of the branch, upload it to the gh-pages and you set to go.
Check this out:
https://github.com/nirgeier/JimVliet.github.io/tree/gh-pages
This is how your file should be inside your root folder.
I'm using the /private directory in Meteor 1.0.3 at the moment to store and serve up pdf documents to the browser.
As an example, I have a folder structure like so:
/application-name
/private
/files
/users
/user-name
/pdf-file1.pdf
I have a template with a button click event. In this event I make a couple of calls to Meteor methods and finally a server side Iron Router go('render-pdf') method. In these Meteor methods I use fs node.js to:
(1) check if the /user-name directory exists, and if it doesn't I
create it.
(2) create the pdf-file.pdf file
Then in the server side Iron Router go('render-pdf') route, again using fs node.js to:
(3) read the created pdf-file.pdf and
(4) finally render it to the browser
The problem is in step (1), when creating the /user-name directory, Meteor server restarts. In step (2), again Meteor server restarts.
But most importantly, the first time my code runs, and the directory
does not exist (step (1)), I get an error.
I can then call the button event again, this time after the directory has been created, and the pdf is rendered fine.
The error looks like so:
Error: ENOENT, no such file or directory '/Users/myname/meteor/meteor-application/private/files/users/user-name/pdf-file.pdf' at Object.fs.openSync (fs.js:438:18) at Object.fs.readFileSync (fs.js:289:15) at [object Object].Router.route.name (meteor-application/both/routes.js:225:17) at boundNext (packages/iron:middleware-stack/lib/middleware_stack.js:251:1) at runWithEnvironment (packages/meteor/dynamics_nodejs.js:108:1) at packages/meteor/dynamics_nodejs.js:121:1 at [object Object].urlencodedParser (/Users/myname/.meteor/packages/iron_router/.1.0.7.15dqor4++os+web.browser+web.cordova/npm/node_modules/body-parser/lib/types/urlencoded.js:72:36) at packages/iron:router/lib/router.js:277:1 at [object Object]._.extend.withValue (packages/meteor/dynamics_nodejs.js:56:1) at [object Object].hookWithOptions (packages/iron:router/lib/router.js:276:1)
It's probably that when I get to the point step (4) of trying to render the file, it either doesn't exist yet or the application is restarting. The next time I try the application has already restarted and files exist.
I was under the impression that the /private directory provides a
place to handle files that do not affect the execution of the
application? To me this means, at runtime I can add whatever I want without the application restarting.
Little history
At first I used the /server directory with a ./folder-name subdirectory. This worked as when I added folder and files the application didn't restart. The downside is when I deployed Meteor using the great Meteor-up package (mup), the deployment bundle ignored these files unless I added a *.js file somewhere inside. And further, if I created the 'hidden' folder structure on my EC2 instance, the deployment would remove the directory.
So using /private folder solved this issue, or so I thought. The folder structure and 'assets' deployed. But the downside to this approach is when I add 'assets' to it, it seems to restart -- even though I though this wasn't something that was suppose to happen.
Question
How can I add 'assets' (in the form of directories and files) under the /private directory without the Meteor application restarting? If this can't be done, how can I add 'assets' anywhere only server side without the application restarting?
Please note
When I deploy to production, I'd like some of the folder structure to stay in place, for example:
/private/files/users
should say there, while the
/user-name
directory can be dynamic. I only mention this because I've read if you do a /.directory-name, Meteor ignores the folder and its contents. But this includes deployments as well.
What I really need
A server side only folder that gets included in the deployment bundle, and when I add 'stuff' to it at runtime, doesn't restart my application...
Either a way to include /.hidden-folder in my mup deployment
bundle or have the /private folder not restart every time I add
stuff to it at runtime.
In order to keep from:
(1) overwriting/removing the directory structure every time I deployed and,
(2) restarting the Meteor application every time I created a directory or file.
I decided in my case it just made sense to use a directory structure outside of the Meteor project instead of inside as before.
Something like Dropbox/users/user-name, or anything really.
I now believe that the /private and /public folders are more for static content than anything else.
I'm not really storing that many files yet, and some of them are only temporary anyhow, so this method will hold me over until I move to something like S3.
Please note:
(1) You need to give your Meteor user permissions to access the outside-the-project directory.
(2) Consider that this will take up space on your OS Instance HD.
(3) You'll need to use Node.js for file system calls. These calls are not wrapped in Meteor Fibers, so you're on your own in terms of async/sync programming.
I know how to get the current directory from a Meteor package, but how do I get the path of a specific file in the project?
node's __dirname and __filename don't work in Meteor.
It is complicated.
meteor run copies your project files to a tree of directories inside <project-dir>/.meteor/local/build, reorganizes them in non-obvious ways (e.g.. the private subdirectory in the original tree becomes the assets subdirectory) and mixes it in with various npm modules to create a bundle that can be executed as a nodejs project. Indeed, to avoid duplications, there is a .gitignore file automatically set up in the .meteor directory that tells git, if you use it for version control, not to copy the .meteor/local directory.
The original project directory gets watched in case you change a file. The change then gets copied into the current project build directory and the project rebuilt.
If you deploy to a remote system, the build gets copied to a server and then run.
process is usually a defined global server-side object, and works according to the node.js API, because the meteor server code is ultimately running in node.js.
So you can run console.log(process.cwd()); in your server-side to obtain the current working directory for the server process, usually something like:
~/<meteor project directory>/.meteor/local/build/programs/server
This suggests that when meteor run is done locally, original project files are in ../../../../../, but don't use that as it may change in the future.
Instead, for the directory containing the original project files, you could use:
baseDir = process.cwd().replace(/\/\.meteor.*$/, '');
This will get the working directory, and truncate everything beginning with /.meteor
This won't work for a server deploy, though, because the original project tree is not needed on the server, only the build. Files that aren't intended to be client or server code could possibly be stuck in the private subdir, which as I mentioned becomes the assets subdir in the build. Ways to currently find files in the build is either manual inspection .meteor/local in a local run, or use of a JS library that calls or imitates gnu find.
Since you mentioned packages, I note that in the build, server-side package code finally ends up in:
~/<project-dir>/.meteor/local/build/programs/server/packages
and client side in:
~/<project-dir>/.meteor/local/build/programs/web.browser/packages