After installing and running create-react-app
npx create-react-app my-app
cd my-app
npm start
I see one URL:
Compiled successfully!
You can now view my-app in the browser.
http://localhost:3000/
But I expected to see something like that:
Local: http://localhost:3000/
On Your Network: http://192.168.43.210:3000/
System: Linux Mint 19.1
react-scripts: "2.1.5"
Related
i've a repo with multiple react projects arranged in different subfolders
is it possible to open a specific project usign the link button?
somethig like this:
//pseudocode - this is the pat of my repo
https://gitpod.io/#https://github.com/pinale/?task=refinefirebase
this is my .gitpod.yml file:
tasks:
- name: reactstun
before: cd reactstun
init: npm install
command: npm run start
- name: refinefirebase
before: cd refinefirebase
init: npm install
command: npm run dev
- name: refineheadlessapp
before: cd refineheadlessapp
init: npm install
command: npm run dev
- name: refinemuiapp
before: cd refinemuiapp
init: npm install
command: npm run dev
Tried every possible step
Reinstalled Node, NPM, Expo, etc.
Cleaned Cache, verified it aswell.
Please help or I would have to reinstall Ubuntu.
faisal#PC:~$ expo init
Migrate to using:
› npx create-expo-app --template
✔ What would you like to name your app? … my-app
✔ Choose a template: › blank a minimal app as clean as an empty canvas
Error downloading and extracting template package: TypeError: Cannot read properties of null (reading '0')
✖ Something went wrong while downloading and extracting the template.
Can't read JSON file: /home/faisal/my-app/app.json
└─ Cause: Error: ENOENT: no such file or directory, open '/home/faisal/my-app/app.json'
├─ readAsync /usr/local/lib/node_modules/expo-cli/node_modules/#expo/json-file/src/JsonFile.ts:158:13
├─ extractAndPrepareTemplateAppAsync /usr/local/lib/node_modules/expo-cli/src/commands/utils/extractTemplateAppAsync.ts:25:25
└─ actionAsync /usr/local/lib/node_modules/expo-cli/src/commands/initAsync.ts:290:19
faisal#PC:~$ npx create-expo-app myapp
✖ Something went wrong in downloading and extracting the project files: Could not find npm package "expo-template-blank#latest"
Error cloning template: Error: Could not find npm package "expo-template-blank#latest"
faisal#PC:~$ npm ls -g
/usr/local/lib
+-- #angular/cli#14.2.3
+-- expo-cli#6.0.5
+-- expo-template-blank#46.0.21
`-- npm#8.19.2
faisal#PC:~$ npm -v
8.19.2
Reinstalled Node using NVM
Apparently the node I installed multiple times through the store was giving the error so I decided to use the Node Version Manager instead.
Instructions:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
nvm list-remote
nvm install v16.17.1
And yes, it works:
faisal#pc:~$ nvm install v16.17.1
Downloading and installing node v16.17.1...
Downloading https://nodejs.org/dist/v16.17.1/node-v16.17.1-linux-x64.tar.xz...
######################################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v16.17.1 (npm v8.15.0)
Creating default alias: default -> v16.17.1
faisal#pc:~$ expo init
Migrate to using:
› npx create-expo-app --template
✔ What would you like to name your app? … my-app
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✔ Downloaded template.
📦 Using npm to install packages.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd my-app
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
Run this command
npm uninstall -g react-native-cli #react-native-community/cli
Start a new project
npx react-native init AwesomeProject
The page is not refreshed when App.js saved.
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://172.17.206.116:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
node -v v14.17.0
npm -v 6.14.13
windows 10
I installed the Vue-CLI in version 3.7. Run vue create my-project and npm run serve. Everything was fine and got message
App running at:
- Local: http://localhost:8080/
Though on the http://localhost:8080/ I got This site can’t be reached.
I managed to use vue init webpack-simple my-project and then in ./node_modules/webpack-dev-server/bin/webpack-dev-server.js change port number and with the new one it's working but this "trick" doesn't work for vue create anyway.
Node version 11.11 and OSX Mojave. There should not be anything that could block the port. I have no idea what to do with this.
please run this command in your vue project directory:-
npm run serve
OR
yarn serve
After run command refresh your browser. this command would be run repeatedly when you get 'This site can’t be reached'.
Do this:
Remove your Node.js and again install latest version here
On the installation path choose npm package manager and install
Open cmd and enter this:
npm install -g #vue/cli
After install vue cli (Previous step) enter to cmd this:
vue create name-app
After some minutes (It depends on how fast your internet is) be sure You have the correct installation
So enter in cmd this:
npm run serve
Then you should be able to navigate to localhost page http://localhost:8080
You can override webpack dev host like this:
vue.config.js
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
},
};
Terminal output
App running at:
Local: http://127.0.0.1:8080/
Network: http://localhost:8080/
The answer is from shenron.
I am trying to setup a local development environment consisting of:
Ubuntu server vagrant box
My existing vuejs project created using Vue CLI 3 and passed to vagrant via synced_folder
Then run yarn run serve and access this on my host using port forwarding on the vagrant box.
Background:
I have developed a vue CLI 3 project on my Ubuntu 16.04 laptop which is working well, however, I want to move this inside of a vagrant box to keep my local machine tidy. I currently use yarn run serve which works well. I want to be able to run this command inside a new vagrant development environment.
Summary of Problems/Issues:
the vue command is not found after installing its dependencies
permission issues spat out by yarn when attempting to run yarn run serve inside vagrant box
there is an fsevents#1.2.4 message when yarn global add #vue/cli
Provisioning the local dev environment:
The Vagrantfile:
# -*- mode: ruby -*-
# vi: set ft=ruby :
Vagrant.configure("2") do |config|
config.vm.define "webserver_dev" do |webserver_dev|
webserver_dev.vm.box = "ubuntu/xenial64"
webserver_dev.vm.network "private_network", ip: "192.168.33.10"
webserver_dev.vm.network "forwarded_port", guest: 80, host: 8888
webserver_dev.vm.network "forwarded_port", guest: 8080, host: 8080
webserver_dev.vm.hostname = "develop.dev"
webserver_dev.vm.synced_folder ".", "/var/www", :mount_options => ["dmode=777", "fmode=666"]
webserver_dev.ssh.forward_agent = true
webserver_dev.vm.provider "virtualbox" do |vb|
vb.memory = "1824"
vb.cpus = "2"
end
end
end
Provisioning of the vagrant box: ubuntu/xenial64 (virtualbox, 20180802.0.0):
sudo apt update && sudo apt upgrade
sudo apt install build-essential libssl-dev -y
# install node and npm:
cd ~
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
# install yarn
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
# Show installed versions
yarn -v (outputs 1.9.4)
node -v (outputs v10.9.0)
npm -v (outputs 6.2.0)
Problems/Issues Output:
When I navigate to my existing vue project folder and run yarn run serve inside vagrant ssh I get the following error:
yarn run v1.9.4
$ vue-cli-service serve
/bin/sh: 1: vue-cli-service: Permission denied
error Command failed with exit code 126.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
When I run sudo yarn run serve
(I shouldn't have to run this as root anyway but:)
yarn run v1.9.4
$ vue-cli-service serve
/bin/sh: 1: vue-cli-service: Permission denied
error Command failed with exit code 126.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Running vue --version
vagrant#cc:~$ vue --version
No command 'vue' found, did you mean:
Command 'vpe' from package 'texlive-latex-extra' (universe)
vue: command not found
Output from running yarn global add #vue/cli
As shown in the official vue-cli installation documentation
NOTE: The fsevents#1.2.4 message I get. Could this what is causing the problems?
vagrant#cu:~$ yarn global add #vue/cli
yarn global v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
[----------------------------------------------------------------------------------------------------------------------------------------] 0/617(node:7694) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
info fsevents#1.2.4: The platform "linux" is incompatible with this module.
info "fsevents#1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "#vue/cli#3.0.1" with binaries:
- vue
Done in 58.25s.
Summary:
Has anyone out there achieved a local development environment where they are successfully able to run yarn run serve inside it and access the result on their host machine?
I would be very interested to see how other developers approach their local development for vue js projects which also have other services requiring reverse proxys (eg node js app running on a different port).
I have spent an awful lot of time trying to set this up to no avail. Maybe these tools just don't play well together. If you think you could help I would be very grateful. Thanks
Temporary Workaround: - inspired by this post
After further troubleshooting I found the problem is certainly a permissions related issue (not related to vue-cli).
I think that as my vagrant is using virtualbox, there is a virtualbox issue with symbolic links from the synced folder from my host, which may change permissions and stops chmod command from having any effect on files. In my case the execute flag from node_modules/.bin directory was not-executable.
For anyone with similar issues here is my current workaround to this issue (Do yourself a favour and read https://github.com/hashicorp/vagrant/issues/713 I wish I'd found it earlier!):
1) copy the projects package.json to: the yarn global directory: /home/vagrant/.config/yarn/global/
cp /var/www/project/package.json /home/vagrant/.config/yarn/global/
2) Install the projects dependencies globally in the yarn users directory:
cd /home/vagrant/.config/yarn/global
yarn install
3) Now returning to the project and running yarn run serve works as it uses the node_modules from /home/vagrant/.config/yarn/global/node_modules/.bin/ which has the correct executable permissions.
cd /var/www/project/package.json
yarn run serve
Example of cause of the issue:
1) Change directory to your project and ls -l to see permissions:
cd /var/www/project/node_modules/.bin
ls -la
Outputs:
lrw-rw-rw- 1 vagrant vagrant 18 Aug 29 00:21 which -> ../which/bin/which
2) Attempt to make file executable:
chmod 777 ./which (adding sudo doesn't make this work either)
Outputs:
lrw-rw-rw- 1 vagrant vagrant 18 Aug 29 00:21 which -> ../which/bin/which
OLD ANSWER - DIDN'T WORK: The solution I am now using is taken from here: Source
Adding this to the Vagrantfile enables symbolic links to work properly.
I am using ubuntu on my host and guest machines so can't be sure this will work for Mac and Windows.
config.vm.provider "virtualbox" do |v|
v.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/vagrant", "1"]
end
Further Reading:
https://github.com/hashicorp/vagrant/issues/713
You need to use sudo when installing vue-cli.
The vue-cli documentation at https://cli.vuejs.org/guide/installation.html states that:
To install the new package, use one of the following commands. You
need administrator privileges to execute these unless npm was
installed on your system through a Node.js version manager (e.g. n or
nvm).
npm install -g #vue/cli
# OR
yarn global add #vue/cli