I am in the process of learning Sveltejs and until now I have been using https://svelte.dev/repl/ to go through the tutorial, which has been working perfectly.
However, I wanted to develop and run Sveltejs applications from my machine (MacBook Air M1) - so I downloaded the provided sveltejs file and opened it in VS Code.
I installed the node_modules npm install. Then, I ran npm run dev which doesn't seem to produce an error
Screenshot of the terminal
Nevertheless, when I open http://localhost:5000, I am presented with a blank page, and going on 'Inspect Element' presents me with an empty webpage: Screenshot of localhost:5000
I downloaded this template from https://svelte.dev/repl/ - I did not make any changes to this project yet it still malfunctions.
Any help is appreciated and thank you in advance!
It should be noted that I am new to web development and the node package manager.
The problem on the M1 mac (actually it is probably due to oSX Catalina not the M1 specifically but I haven’t checked on an intel running Catalina) is that port 5000 is in use by command center. This means that svelte can't bind to that port.
To see what ports are active on your mac run the command
lsof -nP +c 15 | grep LISTEN
When you run npm run dev you can set the port to something else that is not in conflict...This is what I ran.
PORT=54321 npm run dev
That should fix it and run for you.
Then you will access it on
http://localhost:54321
When you start your svelte projest you need this command:
npx degit sveltejs/template my-svelte-project
after you go to your project:
cd my-svelte-project
and when you are in this project you run:
npm install
npm run dev
after npm run dev normally you have an information on witch port application runs.
Then you go to src and App.svelte and you remplace code by default by your code.
Normally it has to work.
Did you have a welcome page of svelte before you put your code?
here you have a good tutorial of svelte.
Related
I'm on windows 10
When I run:
npm run start
or
npm start
I get an error:
npm start
> app-test#0.1.0 start
> react-scripts start
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
What I already tried:
npm ci
remove node_modules and reinstall project
npm audit fix
run command from elevated PowerShell (as admin)
Uninstall Node v.18 win NVM and reinstall common Node installation LTS v.16
Check if react scripts is on dependencies section in package.json - and it's of course there.
Recreate project itself and also create a fresh new React project with npx create-react-app
Clearing npm cache
Nothing's helped me.
BUT This project runs fine WHEN I explicitly tell the node path to subfolder with a script:
app-test> node node_modules/react-scripts/scripts/start.js
Compiled successfully!
You can now view app-test in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.91.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
What's interesting that an old React projects also resided in the parent folder starts normally even I renew node_modules in these projects doing them npm i or npm ci
But any time I try to create and start new React app command npm start fails
UPD1: Tried to create-react-app on any other drive or folder. And it's running ok.
So culprit seems permissions policies in my common working directory ?
UPD2:
I resolved a problem though still have no clear idea who was actually the really culprit of this bug.
I copied all my parent developer folder with all code examples to another drive, then tried to create react app there and out of the blue it worked fine at then new location.
Also I removed this original folder from the drive where it used to be. And do git clone "..." at this directory< recreating the exact structure as it was before all experiments.
Then I tried create-react-app exactly at that location as I've unsuccessfully tried before swapping folders and it was OK !
Tried couple of time with different folder location within parent directory and all sill working fine now !
I remembered now I already have such bug before. And I had to reinstall Windows that time.
I also want to mention that I also have another machine with Windows, another one with Linux and had also laptop with an OSX so I can ( or could) push to this very git repository from any of these computers.
Suggestion of somebody who have any idea, why this bug was happening repeatable would be highly appreciated.
Thanks.
Code example I am trying to run: https://github.com/nshaposhnik/react-native-maps-example
I am on windows 10.
What I do:
Downloaded the code
Extracted to folder
Setup with the following after deleting yarn.lock:
yarn add react-native-maps
yarn add react-native-maps-directions
yarn add react-native-google-places-autocomplete
npm install
npm audit fix
Edit the code in the 3 places that requires my custom google API key which I got from the developer site
Tried running via:
npm start
I get a successful run in the terminal (" Welcome to React Native! Learn once, write anywhere"), but no browser opens up. I go to localhost:8081 in my browser and see a barren webpage with the following text:
React Native packager is running.
Visit documentation
That's all. Nothing in the sample project runs. I just want to run their app in a browser or emulator, though I don't have any of the phone emulators working, so I just want to run in web browser.
How can I make this work from the above example? Much appreciated.
You have to run emulator separately on "Windows" using android studio or command line, and after open your project using VsCode(or your editor) and the run following command ,
react-native run-android
Your app will run on your opened emulator
I have initiated successfully a new react-native project. Then, every time I try to run my newly built project using the command react-native run-android, it gets stucks on info Starting JS server....
Here is the output:
$ react-native run-android
info Running jetifier to migrate libraries to AndroidX".
You can disable it using "--no-jetifier" flag.
Jetifier found 855 file(s) to forward-jetify. Using 4 workers...
info Starting JS server..."
I tried restarting the laptop and switching emulators. I don't know what else to do anymore.
How do I solve the problem?
Kill the automatically popped up metro bundler command prompt
Kill the command terminal which is running react-native run-android
Now Run react-native start This will start your js server
In new command prompt window run react-native run-android
The app came up in 5 mins in an emulator.
Linux:
Go to the terminal and type:
react-native start
and then in OTHER terminal, inside your project folder:
yarn android
or
npm run android
Temporary fix:
REACT_TERMINAL= react-native run-android
in my case with manjaro + xfce4:
REACT_TERMINAL=xfce4-terminal react-native run-android
or puts in your .bashrc:
export REACT_TERMINAL=xfce4-terminal
font: https://github.com/facebook/react-native/issues/26097
I had the same problem. I started a project yesterday and it worked, started a new one today and it didn't work. The problem seems to be "#react-native-community/cli-platform-android". The version that showed up today is 2.8.2 as opposed to 2.7.0 for yesterday's project.
I used:
npm install #react-native-community/cli-platform-android#2.7.0
This is not a optimal solution, but it will get you going.
I had the exact same frustrating issue for a very different reason than mentioned in other answers.
As explained in this SO answer Android adb binds to port 5037 and I installed some program which took this port so adb was hanging silently (why adb! .. say something!)
Commands to test if this your issue cause:
test any adb command and see if it hangs, eg:
adb devices
If it does, then check who is using the port:
sudo lsof -i :5037
In my case(Manjaro OS)
First:
npm start
Then in a separate terminal:
npm run android
The best solution that I constantly find myself using, is going to the application manager on android, then clearing the data of the app. Running the app afterwards goes smoothly without lagging.
Reinstalling android studio with a new emulator or changing the app name in app.json , build.gradle and android manifest.xml solved the issue.
I am following the tutorial on the official React Native website.
Using the following to build my project:
react-native run-ios
I get the error:
Found Xcode project TestProject.xcodeproj
xcrun: error: unable to find utility "instruments", not a developer
tool or in PATH
Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer
tool or in PATH
Although, when I run the app from the .xcodeproj, everything works fine.
Any suggestions?
Check out this link (Running react-native run-ios occurs an error?). It appears to be a problem with the location of Command line tools.
In Xcode, select Xcode menu, then Preferences, then Locations tab. Select your Xcode version from the dropdown and exit Xcode.
You may need to install or set the location of the Xcode Command Line Tools.
Via command line
If you have Xcode downloaded you can run the following to set the path:
sudo xcode-select -s /Applications/Xcode.app
If the command line tools haven't been installed yet, you may need to run this first:
xcode-select --install
You may need to accept the Xcode license before installing command line tools:
sudo xcodebuild -license accept
Via Xcode
Or adjust the Command Line Tools setting via Xcode (Xcode > Preferences > Locations):
An update for anybody (like me) who's run into this in Xcode 13 -- the instruments command has been removed.
Updating to the latest version of react-native in your package.json file will no longer try to use the instruments command.
By default, after installing Xcode command-line not selected, so open Xcode and go to Preferences >> Locations and set Command Line Tools...
This worked for me in MAC High Sierra, Xcode Version 9.3:
Press i to open iOS emulator...
And You can see a cool new iPhone simulator like below image:
In my case the problem was that Xcode was not installed.
I had to accept the XCode license after my first install before I could run it. You can run the following to get the license prompt via command line. You have to type agree and confirm as well.
sudo xcodebuild -license
Problem is your Xcode version is not set on Command Line Tools, to solve this problem open Xcode>Menu>preferences> location> here for Command Line tools select your Xcode version, that's it.
For those like me who come to this page with this problem after updating Xcode but don't have an issue with the location setting, restarting my computer did the trick.
For me, it turns out that there was an iOS system update pending asking to restart the computer. Restart and let the update finish solved my problem.
In my case the SDKROOT environment variable was wrong, which referred to an old version of iPhoneOSxx.x.sdk. (Perhaps this would have automatically resolved itself after a reboot?)
You can check by running echo $SDKROOT and verifying that it's a valid path.
I fixed it by updating in .bash_profile:
export SDKROOT=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS11.2.sdk
None of these solutions worked for me. These two similar problems offer temporary solutions that worked, it seems the simulator process isn't being shutdown correctly:
Killing Simulator Processes
From https://stackoverflow.com/a/52533391/11279823
Quit the simulator & Xcode.
Opened Activity monitor, selected cpu option and search for sim, killing all the process shown as result.
Then fired up the terminal and run sudo xcrun simctl erase all. It will delete all content of all simulators. By content if you logged in somewhere password will be gone, all developer apps installed in that simulator will be gone.
Opening Simulator before starting the package
From https://stackoverflow.com/a/55374768/11279823
open -a Simulator; npm start
Hopefully a permanent solution is found.
Go to Xcode Preferences
Locate the location tab
Set the Xcode version in Given Command Line Tools
Now, it ll successfully work.
If the previous answers didn't help you, you're probably dealing with an outdated react-native version. If you want to run your app on device without upgrading React-Native, you'll have to run the app directly from Xcode instead of doing it in the CLI. So open the <appname>.xcworkspace, select your device on the right-hand dropdown and press the "Run" icon.
Xcode screenshot
In Mac: After all, you are getting this issue, there may be a chance of missing the following in System Preferences -> Network -> Ethernet -> Select Advanced -> Proxies
add the following line,
*.local,localhost
This is how I got the solution,
> rm -rf ~/Library/Developer/Xcode/DerivedData
> sudo rm -rf /Library/Developer/CommandLineTools
> xcode-select --install
> sudo xcodebuild -license accept
Xcode > Preferences > Location > Command Line Tools choose.
simply go to Xcode
click on Xcode from the top left menu
Xcode->preferences-> location-> click comman line option and set Xcode version.
For any such problem:
Go to .expo folder
Find apk-cache
Remove that folder
and you are done..
Hope it helps?
I'm following the Get Started tutorial on https://cordova.apache.org/#getstarted but I'm getting an error despite following the instructions clearly, this is what I did:
npm install -g cordova
cordova create myApp
cd myApp
cordova platform add browser
cordova run browser
but at the end of the last command, I get an error:
C:\code\cordova\test
λ cordova run browser
Running command: cmd "/s /c "C:\code\cordova\test\platforms\browser\cordova\run.bat""
C:\code\cordova\test\platforms\browser\cordova\node_modules\cordova-serve\node_modules\q\q.js:155
throw e;
^
Error: listen EACCES
at exports._errnoException (util.js:746:11)
at Server._listen2 (net.js:1139:19)
at listen (net.js:1182:10)
at Server.listen (net.js:1267:5)
at module.exports (C:\code\cordova\test\platforms\browser\cordova\node_modules\cordova-serve\src\server.js:134:8)
at C:\code\cordova\test\platforms\browser\cordova\node_modules\cordova-serve\src\platform.js:45:16
at _fulfilled (C:\code\cordova\test\platforms\browser\cordova\node_modules\cordova-serve\node_modules\q\q.js:834:54)
at self.promiseDispatch.done (C:\code\cordova\test\platforms\browser\cordova\node_modules\cordova-serve\node_modules\q\q.js:863:30)
at Promise.promise.promiseDispatch (C:\code\cordova\test\platforms\browser\cordova\node_modules\cordova-serve\node_modules\q\q.js:796:13)
at C:\code\cordova\test\platforms\browser\cordova\node_modules\cordova-serve\node_modules\q\q.js:857:14
ERROR running one or more of the platforms: Error: cmd: Command failed with exit code 1
You may not have the required environment or OS to run this project
Does anyone have any idea why this is happening?
I'm using NodeJS v0.12.7 and Cordova 5.4.0
I have had a similar issue on my Debian 8.3 (jessie) with an installed Chromium from the offical debian package-sources.
The detailled error message was:
Error: Error executing "google-chrome --user-data-dir=/tmp/temp_chrome_user_data_dir_for_cordova http://localhost:8000/index.html": /bin/sh: 1: google-chrome: not found
To fix the issue, I have downloaded the (Google-) Chrome-Browser directly from their website, and installed the .deb-package.
After that I did a
cordova platform rm browser
cordova platform add browser
cordova build browser
cordova run browser
and it finally worked.
Summary:
Chromium doesn't work - use chrome
Although the tutorial you linked says browser for some reason. I don't see it on their "supported platform list", try using a platform which you think you're going to develop for and see if you have the same issues.
Link to the platform list (odd that browser isn't listed): https://cordova.apache.org/docs/en/latest/guide/support/index.html
This is a late reply, maybe will help someone else.
instead of
cordova run browser
You should try "cordova serve" command after the add platform browser..
cordova platform add browser
cordova serve
after this hopefully if everything is set up right , you will get a message
"server runing on localhost:/port" . Just goto that address on your browser..
see the magic.
I'm confused why you want to deploy it from the command line to a browser instead of a device or an emulator.
Wouldn't you just open index.html in the browswer?
Take a look at the Cordova Windows Platform Guide
It goes more into detail about running Cordova on a windows platform.
Requirements:
To develop apps for Windows platform:
Windows 8.0, 8.1, or 10, 32 or 64 bit Home, Pro, or Enterprise
Visual Studio 2013
To develop apps for Windows 10:
Visual Studio 2015 RC or higher
Note: For Windows 10, the Visual Studio installer has an option to install tools to build Universal Windows Apps. You must ensure that this option is selected when installing to install the required SDK.
Create a New Project
At this point, to create a new project you can choose between the cross-platform CLI tool described in The Command-Line Interface, or the set of Windows-specific shell tools. The CLI approach below generates an app named HelloWorld within a new hello project directory:
> cordova create hello com.example.hello HelloWorld
> cd hello
> cordova platform add windows
Here's the corresponding lower-level shell-tool approach:
C:\path\to\cordova-windows\package\bin\create.bat C:\path\to\new\hello com.example.hello HelloWorld
Build the Project
If you are using the CLI in development, the project directory's top-level www directory contains the source files. Run either of these within the project directory to rebuild the app:
> cordova build
> cordova build windows # do not rebuild other platforms
> cordova build windows --debug # generates debugging information
> cordova build windows --release # signs the apps for release
Here's the corresponding lower-level shell-tool approach:
C:\path\to\project\cordova\build.bat --debug
C:\path\to\project\cordova\build.bat --release
The clean command helps flush out directories in preparation for the next build:
C:\path\to\project\cordova\clean.bat
Deploy the app
To deploy Windows package:
> cordova run windows -- --win # explicitly specify Windows as deployment target
> cordova run windows # `run` uses Windows package by default
Also before executing the command:
cordova create myApp
make sure to cd into a user directory or a directory where you will keep your cordova apps
Ok, I also had this problem, and couldn't figure out what was going on for the life of me. I finally figured it out:
The guy didn't have Chrome installed. Installed Chrome, poof, problem solved.
Let this be a lesson for us all.